commit 96e4d8c3c7829ff6389d986478535f2cdd53a22e
Author: ffff:189.78.162.204 <ffff:189.78.162.204@hub.scroll.pub>
Date: 2024-12-27 18:10:40 +0000
Subject: created index-copy.html
diff --git a/index-copy.html b/index-copy.html
new file mode 100644
index 0000000..72ba403
--- /dev/null
+++ b/index-copy.html
@@ -0,0 +1,166 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>Managing Depression: Evidence-Based Approaches That Work</title>
+ <script>
+ /* This HTML was generated by 📜 Scroll v164.7.0. https://scroll.pub */
+ </script>
+ <style>
+ @media print {
+ .doNotPrint {
+ display: none !important;
+ }
+ }
+ </style>
+ <link rel="canonical" href="https://healingmind.scroll.pub/index.html" />
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <meta name="description" content="" />
+ <meta name="generator" content="Scroll v164.7.0" />
+ <meta
+ property="og:title"
+ content="Managing Depression: Evidence-Based Approaches That Work"
+ />
+ <meta property="og:description" content="" />
+ <meta property="og:image" content="" />
+
+ <link
+ rel="source"
+ type="application/git"
+ title="Source Code Repository"
+ href="index.scroll"
+ />
+
+ <meta name="twitter:card" content="summary_large_image" />
+ </head>
+ <body>
+ <style>
+ .abstractIconButtonParser {
+ position: absolute;
+ top: 0.25rem;
+ }
+ .abstractIconButtonParser svg {
+ fill: rgba(204, 204, 204, 0.8);
+ width: 1.875rem;
+ height: 1.875rem;
+ padding: 0 7px;
+ }
+ .abstractIconButtonParser:hover svg {
+ fill: #333;
+ }</style
+ ><a
+ href="/edit.html"
+ class="doNotPrint abstractIconButtonParser"
+ style="right: 2rem"
+ ><svg
+ width="800px"
+ height="800px"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"
+ /></svg
+ ></a>
+ <link rel="stylesheet" type="text/css" href="style.css" />
+ <header>
+ <nav>
+ <div class="logo">HealingMind</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#strategies">Strategies</a></li>
+ <li><a href="#lifestyle">Lifestyle</a></li>
+ <li><a href="#support">Support</a></li>
+ <li><a href="#resources">Resources</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <main>
+ <section class="hero">
+ <h1>Evidence-Based Approaches for Managing Depression</h1>
+ <p>
+ Discover practical strategies that are scientifically proven to help
+ </p>
+ </section>
+
+ <section id="strategies" class="card-section">
+ <h2>Key Strategies</h2>
+ <div class="card-grid">
+ <article class="card">
+ <div class="card-icon">🧠</div>
+ <h3>Cognitive Behavioral Therapy</h3>
+ <p>Learn to identify and change negative thought patterns</p>
+ </article>
+ <article class="card">
+ <div class="card-icon">🌱</div>
+ <h3>Mindfulness</h3>
+ <p>Practice present-moment awareness and meditation</p>
+ </article>
+ <article class="card">
+ <div class="card-icon">💪</div>
+ <h3>Physical Activity</h3>
+ <p>Regular exercise can be as effective as medication</p>
+ </article>
+ <article class="card">
+ <div class="card-icon">🌟</div>
+ <h3>Social Connection</h3>
+ <p>Maintain and strengthen relationships with others</p>
+ </article>
+ </div>
+ </section>
+
+ <section id="lifestyle" class="lifestyle-section">
+ <h2>Lifestyle Changes</h2>
+ <div class="timeline">
+ <div class="timeline-item">
+ <h3>Sleep Hygiene</h3>
+ <p>Maintain consistent sleep schedule and bedtime routine</p>
+ </div>
+ <div class="timeline-item">
+ <h3>Nutrition</h3>
+ <p>Focus on whole foods and balanced meals</p>
+ </div>
+ <div class="timeline-item">
+ <h3>Daily Structure</h3>
+ <p>Create and maintain daily routines and schedules</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="support" class="support-section">
+ <h2>Finding Support</h2>
+ <div class="support-grid">
+ <div class="support-item">
+ <h3>Professional Help</h3>
+ <p>Seeking therapy or counseling is a sign of strength</p>
+ </div>
+ <div class="support-item">
+ <h3>Support Groups</h3>
+ <p>Connect with others who understand your experience</p>
+ </div>
+ </div>
+ </section>
+ </main>
+
+ <footer>
+ <div class="footer-content">
+ <p>
+ This website provides general information and is not a substitute for
+ professional medical advice.
+ </p>
+ <nav class="footer-nav">
+ <a href="#about">About</a>
+ <a href="#privacy">Privacy</a>
+ <a href="#contact">Contact</a>
+ </nav>
+ </div>
+ </footer>
+
+ <script src="script.js"></script>
+ </body>
+</html>
commit 41c5500ea3f98e6a30d33cef129dde3d14342279
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 18:07:34 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..6b49204
--- /dev/null
+++ b/body.html
@@ -0,0 +1,90 @@
+<header>
+ <nav>
+ <div class="logo">HealingMind</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#strategies">Strategies</a></li>
+ <li><a href="#lifestyle">Lifestyle</a></li>
+ <li><a href="#support">Support</a></li>
+ <li><a href="#resources">Resources</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Evidence-Based Approaches for Managing Depression</h1>
+ <p>Discover practical strategies that are scientifically proven to help</p>
+ </section>
+
+ <section id="strategies" class="card-section">
+ <h2>Key Strategies</h2>
+ <div class="card-grid">
+ <article class="card">
+ <div class="card-icon">🧠</div>
+ <h3>Cognitive Behavioral Therapy</h3>
+ <p>Learn to identify and change negative thought patterns</p>
+ </article>
+ <article class="card">
+ <div class="card-icon">🌱</div>
+ <h3>Mindfulness</h3>
+ <p>Practice present-moment awareness and meditation</p>
+ </article>
+ <article class="card">
+ <div class="card-icon">💪</div>
+ <h3>Physical Activity</h3>
+ <p>Regular exercise can be as effective as medication</p>
+ </article>
+ <article class="card">
+ <div class="card-icon">🌟</div>
+ <h3>Social Connection</h3>
+ <p>Maintain and strengthen relationships with others</p>
+ </article>
+ </div>
+ </section>
+
+ <section id="lifestyle" class="lifestyle-section">
+ <h2>Lifestyle Changes</h2>
+ <div class="timeline">
+ <div class="timeline-item">
+ <h3>Sleep Hygiene</h3>
+ <p>Maintain consistent sleep schedule and bedtime routine</p>
+ </div>
+ <div class="timeline-item">
+ <h3>Nutrition</h3>
+ <p>Focus on whole foods and balanced meals</p>
+ </div>
+ <div class="timeline-item">
+ <h3>Daily Structure</h3>
+ <p>Create and maintain daily routines and schedules</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="support" class="support-section">
+ <h2>Finding Support</h2>
+ <div class="support-grid">
+ <div class="support-item">
+ <h3>Professional Help</h3>
+ <p>Seeking therapy or counseling is a sign of strength</p>
+ </div>
+ <div class="support-item">
+ <h3>Support Groups</h3>
+ <p>Connect with others who understand your experience</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <p>This website provides general information and is not a substitute for professional medical advice.</p>
+ <nav class="footer-nav">
+ <a href="#about">About</a>
+ <a href="#privacy">Privacy</a>
+ <a href="#contact">Contact</a>
+ </nav>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..2a4592b
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://healingmind.scroll.pub
+metaTags
+ description "Evidence-based strategies and practical tips for managing depression, including lifestyle changes, therapeutic approaches, and self-help techniques."
+ keywords "depression help, mental health, depression management, self-help, mental wellness"
+editButton /edit.html
+title Managing Depression: Evidence-Based Approaches That Work
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..fa61e79
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_013Z37BW3PCMWbMN88y53sFJ",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a website focused on evidence-based strategies for managing depression.\n\n---domain---\nhealingmind.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://healingmind.scroll.pub\nmetaTags\n description \"Evidence-based strategies and practical tips for managing depression, including lifestyle changes, therapeutic approaches, and self-help techniques.\"\n keywords \"depression help, mental health, depression management, self-help, mental wellness\"\neditButton /edit.html\ntitle Managing Depression: Evidence-Based Approaches That Work\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">HealingMind</div>\n <button class=\"mobile-menu\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#strategies\">Strategies</a></li>\n <li><a href=\"#lifestyle\">Lifestyle</a></li>\n <li><a href=\"#support\">Support</a></li>\n <li><a href=\"#resources\">Resources</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Evidence-Based Approaches for Managing Depression</h1>\n <p>Discover practical strategies that are scientifically proven to help</p>\n </section>\n\n <section id=\"strategies\" class=\"card-section\">\n <h2>Key Strategies</h2>\n <div class=\"card-grid\">\n <article class=\"card\">\n <div class=\"card-icon\">🧠</div>\n <h3>Cognitive Behavioral Therapy</h3>\n <p>Learn to identify and change negative thought patterns</p>\n </article>\n <article class=\"card\">\n <div class=\"card-icon\">🌱</div>\n <h3>Mindfulness</h3>\n <p>Practice present-moment awareness and meditation</p>\n </article>\n <article class=\"card\">\n <div class=\"card-icon\">💪</div>\n <h3>Physical Activity</h3>\n <p>Regular exercise can be as effective as medication</p>\n </article>\n <article class=\"card\">\n <div class=\"card-icon\">🌟</div>\n <h3>Social Connection</h3>\n <p>Maintain and strengthen relationships with others</p>\n </article>\n </div>\n </section>\n\n <section id=\"lifestyle\" class=\"lifestyle-section\">\n <h2>Lifestyle Changes</h2>\n <div class=\"timeline\">\n <div class=\"timeline-item\">\n <h3>Sleep Hygiene</h3>\n <p>Maintain consistent sleep schedule and bedtime routine</p>\n </div>\n <div class=\"timeline-item\">\n <h3>Nutrition</h3>\n <p>Focus on whole foods and balanced meals</p>\n </div>\n <div class=\"timeline-item\">\n <h3>Daily Structure</h3>\n <p>Create and maintain daily routines and schedules</p>\n </div>\n </div>\n </section>\n\n <section id=\"support\" class=\"support-section\">\n <h2>Finding Support</h2>\n <div class=\"support-grid\">\n <div class=\"support-item\">\n <h3>Professional Help</h3>\n <p>Seeking therapy or counseling is a sign of strength</p>\n </div>\n <div class=\"support-item\">\n <h3>Support Groups</h3>\n <p>Connect with others who understand your experience</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <p>This website provides general information and is not a substitute for professional medical advice.</p>\n <nav class=\"footer-nav\">\n <a href=\"#about\">About</a>\n <a href=\"#privacy\">Privacy</a>\n <a href=\"#contact\">Contact</a>\n </nav>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #3498db;\n --background-color: #f9fafb;\n --text-color: #2c3e50;\n --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n}\n\nheader {\n background-color: white;\n box-shadow: var(--card-shadow);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text-color);\n font-weight: 500;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n.mobile-menu {\n display: none;\n}\n\nmain {\n margin-top: 4rem;\n padding: 2rem;\n}\n\n.hero {\n text-align: center;\n padding: 4rem 1rem;\n background: linear-gradient(135deg, #3498db, #2c3e50);\n color: white;\n border-radius: 1rem;\n margin-bottom: 4rem;\n}\n\n.hero h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.card-section {\n max-width: 1200px;\n margin: 0 auto 4rem;\n}\n\n.card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem 0;\n}\n\n.card {\n background: white;\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: var(--card-shadow);\n transition: var(--transition);\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n.card-icon {\n font-size: 2rem;\n margin-bottom: 1rem;\n}\n\n.timeline {\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem 0;\n}\n\n.timeline-item {\n position: relative;\n padding: 2rem;\n margin-bottom: 2rem;\n background: white;\n border-radius: 1rem;\n box-shadow: var(--card-shadow);\n}\n\n.support-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 2rem 0;\n}\n\n.support-item {\n background: white;\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: var(--card-shadow);\n}\n\nfooter {\n background: var(--primary-color);\n color: white;\n padding: 2rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n text-align: center;\n}\n\n.footer-nav {\n margin-top: 1rem;\n}\n\n.footer-nav a {\n color: white;\n text-decoration: none;\n margin: 0 1rem;\n transition: var(--transition);\n}\n\n.footer-nav a:hover {\n color: var(--accent-color);\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: flex;\n flex-direction: column;\n gap: 4px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 4px;\n }\n\n .mobile-menu span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--primary-color);\n transition: var(--transition);\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: white;\n flex-direction: column;\n padding: 1rem;\n text-align: center;\n }\n\n .nav-links.active {\n display: flex;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu functionality\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n mobileMenu.classList.toggle('active');\n });\n\n // Smooth scrolling for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n window.scrollTo({\n top: target.offsetTop - 80,\n behavior: 'smooth'\n });\n // Close mobile menu if open\n navLinks.classList.remove('active');\n mobileMenu.classList.remove('active');\n }\n });\n });\n\n // Add scroll animations\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('section').forEach(section => {\n observer.observe(section);\n });\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 278,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2760
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..fa17a83
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# healingmind.scroll.pub
+Website generated by Claude from prompt: create a website of what works for depression
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..3acead7
--- /dev/null
+++ b/script.js
@@ -0,0 +1,45 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu functionality
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ mobileMenu.classList.toggle('active');
+ });
+
+ // Smooth scrolling for anchor links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ if (target) {
+ window.scrollTo({
+ top: target.offsetTop - 80,
+ behavior: 'smooth'
+ });
+ // Close mobile menu if open
+ navLinks.classList.remove('active');
+ mobileMenu.classList.remove('active');
+ }
+ });
+ });
+
+ // Add scroll animations
+ const observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px 0px -50px 0px'
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ }
+ });
+ }, observerOptions);
+
+ document.querySelectorAll('section').forEach(section => {
+ observer.observe(section);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..1129ba1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,207 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #3498db;
+ --background-color: #f9fafb;
+ --text-color: #2c3e50;
+ --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+}
+
+header {
+ background-color: white;
+ box-shadow: var(--card-shadow);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ font-weight: 500;
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--accent-color);
+}
+
+.mobile-menu {
+ display: none;
+}
+
+main {
+ margin-top: 4rem;
+ padding: 2rem;
+}
+
+.hero {
+ text-align: center;
+ padding: 4rem 1rem;
+ background: linear-gradient(135deg, #3498db, #2c3e50);
+ color: white;
+ border-radius: 1rem;
+ margin-bottom: 4rem;
+}
+
+.hero h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+.card-section {
+ max-width: 1200px;
+ margin: 0 auto 4rem;
+}
+
+.card-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 2rem 0;
+}
+
+.card {
+ background: white;
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: var(--card-shadow);
+ transition: var(--transition);
+}
+
+.card:hover {
+ transform: translateY(-5px);
+}
+
+.card-icon {
+ font-size: 2rem;
+ margin-bottom: 1rem;
+}
+
+.timeline {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 2rem 0;
+}
+
+.timeline-item {
+ position: relative;
+ padding: 2rem;
+ margin-bottom: 2rem;
+ background: white;
+ border-radius: 1rem;
+ box-shadow: var(--card-shadow);
+}
+
+.support-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 2rem 0;
+}
+
+.support-item {
+ background: white;
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: var(--card-shadow);
+}
+
+footer {
+ background: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ margin-top: 4rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.footer-nav {
+ margin-top: 1rem;
+}
+
+.footer-nav a {
+ color: white;
+ text-decoration: none;
+ margin: 0 1rem;
+ transition: var(--transition);
+}
+
+.footer-nav a:hover {
+ color: var(--accent-color);
+}
+
+@media (max-width: 768px) {
+ .mobile-menu {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 4px;
+ }
+
+ .mobile-menu span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--primary-color);
+ transition: var(--transition);
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: white;
+ flex-direction: column;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+}