Skip to content

Commit 792bea9

Browse files
kentcdoddscursoragent
kentcdodds
and
cursoragent
authored
About page content (#52)
Co-authored-by: me <me@kentcdodds.com> Co-authored-by: Cursor Agent <cursoragent@cursor.com>
1 parent ae8271d commit 792bea9

1 file changed

Lines changed: 150 additions & 3 deletions

File tree

‎app/routes/_app+/_marketing+/about.tsx‎

Lines changed: 150 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,154 @@
1+
import { Link, type MetaFunction } from 'react-router'
2+
import { Icon } from '#app/components/ui/icon.tsx'
3+
4+
export const meta: MetaFunction = () => [{ title: 'About | GratiText' }]
5+
6+
const gratitudeBenefits = [
7+
{
8+
title: 'Improves Mental Health',
9+
description:
10+
'Expressing gratitude can significantly enhance psychological well-being. It can reduce stress, anxiety, and depression by shifting focus from negative thoughts to positive ones.',
11+
},
12+
{
13+
title: 'Enhances Physical Health',
14+
description:
15+
'Grateful people often experience better physical health. They tend to exercise more, have fewer aches and pains, and sleep better, contributing to overall well-being.',
16+
},
17+
{
18+
title: 'Strengthens Relationships',
19+
description:
20+
'Showing appreciation and thanking others can strengthen social bonds. It fosters a sense of connection and can deepen relationships by making others feel valued and appreciated.',
21+
},
22+
]
23+
24+
const faqItems = [
25+
{
26+
question:
27+
'How can practicing gratitude improve my mental and physical health?',
28+
answer:
29+
'Gratitude helps you focus on what is going well, which can reduce stress and negative thought patterns. Over time, this shift in mindset supports better emotional balance and can encourage healthier habits like rest and exercise.',
30+
},
31+
{
32+
question:
33+
'What are some effective ways to incorporate gratitude into my daily routine?',
34+
answer:
35+
'Try keeping a short daily gratitude journal, sending a quick thank-you text, or pausing each morning to note three things you appreciate. Small, consistent moments make the habit stick.',
36+
},
37+
{
38+
question:
39+
'How can I maintain a sense of gratitude during challenging times or difficult situations?',
40+
answer:
41+
'Maintaining a sense of gratitude during challenging times can be difficult but is achievable with conscious effort and certain strategies. Here are some tips to help you cultivate gratitude even during tough situations:',
42+
details: [
43+
'Focus on Small Positives: Even in difficult times, there are often small positive moments or aspects you can appreciate. This could be a kind gesture from a friend, a moment of laughter, or simply the beauty of nature around you. Keeping a daily gratitude journal where you note these small positives can help.',
44+
'Mindfulness and Meditation: Practices such as mindfulness and meditation can help center your thoughts and allow you to find peace in the present moment. This can make it easier to identify things you are grateful for, even amidst chaos or stress.',
45+
'Reframe the Situation: Try to reframe your perspective on the challenging situation. Look for lessons or personal growth opportunities that may come from it. This does not mean ignoring the difficulty but rather finding a silver lining or something valuable you can take away from the experience.',
46+
],
47+
defaultOpen: true,
48+
},
49+
]
50+
151
export default function AboutRoute() {
252
return (
3-
<div className="container">
4-
<h1 className="text-h1">About</h1>
5-
</div>
53+
<main className="bg-background pb-16">
54+
<section className="container pt-10">
55+
<Link
56+
to="/"
57+
className="text-body-xs text-muted-foreground inline-flex items-center gap-2"
58+
>
59+
<Icon name="arrow-left" size="sm" />
60+
Back Home
61+
</Link>
62+
<div className="mt-6 max-w-2xl space-y-4">
63+
<h1 className="text-h3 text-foreground leading-tight md:text-h2">
64+
Create and Nurture Lasting Bonds With Your Loved Ones
65+
</h1>
66+
<p className="text-body-sm text-muted-foreground">
67+
This page serves as a preview of different paragraph and text
68+
styles for any scenario you might need.
69+
</p>
70+
</div>
71+
</section>
72+
73+
<section className="container mt-12" aria-labelledby="gratitude-benefits">
74+
<div className="max-w-3xl space-y-4">
75+
<h2 id="gratitude-benefits" className="text-h4 md:text-h3">
76+
Why Should You Practice Gratitude?
77+
</h2>
78+
<p className="text-body-sm text-muted-foreground">
79+
Practicing gratitude and thanking others offers numerous benefits
80+
for both the individual and those around them. Here are some key
81+
reasons why it is beneficial:
82+
</p>
83+
<ol className="space-y-5 text-body-sm text-muted-foreground">
84+
{gratitudeBenefits.map((benefit, index) => (
85+
<li key={benefit.title} className="leading-relaxed">
86+
<span className="font-semibold text-foreground">
87+
{index + 1}. {benefit.title}:{' '}
88+
</span>
89+
{benefit.description}
90+
</li>
91+
))}
92+
</ol>
93+
</div>
94+
</section>
95+
96+
<section className="container mt-12" aria-labelledby="gratitude-faq">
97+
<div className="max-w-3xl space-y-6">
98+
<h2 id="gratitude-faq" className="text-h4 md:text-h3">
99+
Frequently Asked Questions
100+
</h2>
101+
<div className="rounded-[28px] border border-border bg-muted p-4 shadow-sm sm:p-6">
102+
<div className="space-y-4">
103+
{faqItems.map((item) => (
104+
<details
105+
key={item.question}
106+
open={item.defaultOpen}
107+
className="rounded-2xl border border-border bg-card px-5 py-4 shadow-sm"
108+
>
109+
<summary className="flex cursor-pointer list-none items-center justify-between gap-4 text-body-sm font-semibold text-foreground">
110+
<span>{item.question}</span>
111+
<Icon
112+
name="chevron-down"
113+
size="sm"
114+
className="text-muted-foreground"
115+
/>
116+
</summary>
117+
<div className="mt-3 space-y-3 text-body-xs text-muted-foreground">
118+
<p className="leading-relaxed">{item.answer}</p>
119+
{item.details ? (
120+
<ol className="list-decimal space-y-2 pl-4">
121+
{item.details.map((detail) => (
122+
<li key={detail} className="leading-relaxed">
123+
{detail}
124+
</li>
125+
))}
126+
</ol>
127+
) : null}
128+
</div>
129+
</details>
130+
))}
131+
</div>
132+
</div>
133+
</div>
134+
</section>
135+
136+
<section className="container mt-12 pb-8">
137+
<div className="text-center">
138+
<p className="text-body-xs text-muted-foreground">
139+
Have Questions/Need to Report an Issue?
140+
</p>
141+
<p className="text-body-sm text-foreground">
142+
Contact us at{' '}
143+
<a
144+
className="font-semibold underline"
145+
href="mailto:support@gratitext.app"
146+
>
147+
support@gratitext.app
148+
</a>
149+
</p>
150+
</div>
151+
</section>
152+
</main>
6153
)
7154
}

0 commit comments

Comments
 (0)