-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
192 lines (167 loc) · 10 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en" data-theme="blue">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Mama Circle 💞 is a grassroots space where mothers can gently connect. No sign-ups, no pressure — just gently showing up for one another.">
<meta name="keywords" content="motherhood, support, postpartum, new moms, mom help, mama circle, community, parenting, emotional care" />
<meta name="author" content="Mama Circle" />
<meta property="og:title" content="Mama Circle 💞" />
<meta property="og:description" content="A soft place to land in motherhood. Mamas supporting mamas — no sign-ups, no judgment." />
<meta property="og:url" content="https://mamacircle.me" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://mamacircle.me/assets/mandala-circle.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Mama Circle 💞" />
<meta name="twitter:description" content="A soft place to land in motherhood." />
<meta name="twitter:image" content="https://mamacircle.me/assets/mandala-circle.png" />
<link rel="canonical" href="https://mamacircle.me" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<title>Mama Circle</title>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital@1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
</head>
<body>
<header class="site-header">
<div class="nav-container">
<div class="site-branding"><a href="#top">Mama Circle</a></div>
<button class="menu-toggle" aria-label="Toggle menu" aria-expanded="false">
<i class="fa-solid fa-bars"></i>
</button>
<nav class="site-nav">
<ul>
<li><a href="#manifesto">Manifesto</a></li>
<li><a href="#how-it-works">How it works</a></li>
<li><a href="#circle">Stories</a></li>
<li><a href="code-of-care.html">Code of Care</a></li>
<li class="language-switcher">
<a href="index-pt.html" lang="pt" class="lang-link" data-lang="pt">PT</a> |
<a href="index.html" lang="en" class="lang-link" data-lang="en">EN</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="top" role="main" class="wrapper">
<section class="header">
<img class="logo" src="assets/mandala-circle.png" alt="Mama Circle - Mandala Logo"/>
<h1>Mama Circle <span class="strapline"> — a soft place to land in motherhood</span></h1>
<div class="intro">
<p>If you're a new mama feeling overwhelmed, emotional, or simply in need of a kind word — this space is for you.</p>
<p>Mama Circle is not a group or an app. It's a quiet signal — a simple way for mamas to find one another through <span class="hashtag">#mamacircle 💞</span>.</p>
<p>You might come across someone who says:<br />
<em class="quote">I’m part of <span class="hashtag">#mamacircle 💞</span> — you can always reach out to me (if it feels safe for you).</em><br />
<strong>And they’ll mean it.</strong></p>
</div>
</section>
<section id="manifesto" class="left-accent section-box" aria-labelledby="manifesto-heading">
<h2 id="manifesto-heading">The Mama Circle Manifesto</h2>
<ul class="blockquote">
<li>When you're tired — <em>we offer understanding.</em></li>
<li>When you're overwhelmed — <em>we offer calm.</em></li>
<li>When you're unsure — <em>we offer stories.</em></li>
<li>When you're lonely — <em>we offer connection.</em></li>
<li>When you're lost — <em>we offer each other.</em></li>
<li>And if we’re nearby — <em>we’ll bring tea, hold your baby, clean your kitchen, or simply give you a hug.</em></li>
</ul>
<hr class="divider" />
<ul class="values-list">
<li>Connection <strong>over</strong> isolation</li>
<li>Listening <strong>over</strong> advising</li>
<li>Presence <strong>over</strong> perfection</li>
<li>Compassion <strong>over</strong> comparison</li>
<li>Community <strong>over</strong> competition</li>
</ul>
<p class="note">These are the values of Mama Circle — not about being perfect, but being present.</p>
</section>
<section id="how-it-works">
<h2>How Mama Circle Works</h2>
<div class="tabs" role="tablist" aria-label="Mama Circle roles">
<button class="tab active" data-tab="new-mamas" role="tab" aria-selected="true" aria-controls="new-mamas" id="tab-new">
<i class="fa-solid fa-baby"></i> For New Mamas
</button>
<button class="tab" data-tab="supporters" role="tab" aria-selected="false" aria-controls="supporters" id="tab-supporters">
<i class="fa-solid fa-hand-holding-heart"></i> For Supporters
</button>
</div>
<div class="tab-content section-box highlighted active" id="new-mamas" role="tabpanel" aria-labelledby="tab-new">
<h3>You're not alone.</h3>
<p>You might be here because someone shared this link, or you saw <span class="hashtag">#mamacircle 💞</span> in someone’s bio or message. That person is letting you know:</p>
<p><em class="quote">You can always reach out to me (if it feels safe for you).</em></p>
<p>You can also:</p>
<ul>
<li>Search <span class="hashtag">#mamacircle 💞</span> on your social media.</li>
<li>Reach out to someone who feels like a soft landing.</li>
<li>Send a message, ask a question, or just say hi.</li>
<li>No sign-up required. No expectations. Just connection.</li>
</ul>
</div>
<div class="tab-content section-box highlighted" id="supporters" role="tabpanel" aria-labelledby="tab-supporters">
<h3>Show your support.</h3>
<p>If you’re already a mama and want to gently hold space for others, you can:</p>
<ul>
<li>Say the Circle Signal when you meet another mother:
<em class="quote">I’m part of <span class="hashtag">#mamacircle 💞</span> — you can always reach out to me (if it feels safe for you).</em>
</li>
<li>Add <span class="hashtag">#mamacircle 💞</span> to your social media bio, so others know you’re part of the circle.
</li>
<li>Visit the <a href="toolkit.html">Toolkit</a> for messages, ideas, and gentle ways to spread the word.</li>
<li>You don’t need to be perfect, just present. No sign-ups, no lists — just love in motion.</li>
</ul>
</div>
<p class="note">There’s no app. No group. Just a circle held together by quiet connection — one message, one mama at a time.</p>
</section>
<section id="circle" class="wall">
<h2>Real Words from the Circle</h2>
<p>These mamas shared what <span class="hashtag">#mamacircle 💞</span> means to them. Their words might echo your story — or give you the courage to reach out.</p>
<div class="circle-list">
<article class="mama-card">
<h3>Nati <span>— Perth, Scotland</span></h3>
<div class="quote-wrapper">
<p class="quote">Hello, mamas <3 I'm a proud mum of a beautiful 3-year-old. Being away from family (overseas), it's been a rocky road. Balancing work, marital life and raising a toddler... phew! Aren't we all heroes?</p>
</div>
<span class="show-more" onclick="this.closest('.mama-card').classList.toggle('expanded')">Show more</span>
</article>
<article class="mama-card">
<h3>Natalia <span>— Amsterdam, Netherlands</span></h3>
<div class="quote-wrapper">
<p class="quote">Sometimes we don't know who to ask that “silly” question, or if it's normal to feel what we’re feeling. When your first baby is born, you are also reborn, and lost, and unsure. I felt completely lost. I hope I can pass along the support I received.</p>
</div>
<span class="show-more" onclick="this.closest('.mama-card').classList.toggle('expanded')">Show more</span>
</article>
</div>
<div class="join-banner left-accent section-muted section-box" role="complementary">
<h3>Want to be featured here?</h3>
<p>Share your story, your care, your “I’ve been there.” It might be just what another mama needs.</p>
<a class="button" href="https://docs.google.com/forms/d/e/1FAIpQLSdBmw7GZ8UI61lRiiASpiIHP8Niuyj2b332ZbgEePJ4PiJiZg/viewform" target="_blank" rel="noopener">
Share your Circle message
</a>
</div>
</section>
<footer class="site-footer" aria-label="Site footer">
<div class="footer-grid">
<div class="footer-left">
<p><strong>How to join:</strong><br />
Just add <span class="hashtag">#mamacircle 💞</span> to your bio or profile. It lets other mamas know you're there — gently, without pressure or rules.</p>
</div>
<div class="footer-right">
<p class="disclaimer-line">
Mama Circle is a grassroots, self-organized initiative. Use your own judgment and always prioritize safety.
</p>
<p class="policy-line">
<a href="privacy.html" target="_blank">Privacy & Safety</a> ·
<a href="code-of-care.html" target="_blank">Code of Care</a>
</p>
</div>
</div>
<p class="signature">Made with love for all mamas 💞</p>
</footer>
</main>
<script src="script.js"></script>
</body>
</html>