commit 4ade157749ef11e78cef8714efa9c3eb75d9bfbf
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 06:30:31 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..3c017ab
--- /dev/null
+++ b/body.html
@@ -0,0 +1,95 @@
+<header>
+ <nav>
+ <div class="logo">Kahuna</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#features">Features</a></li>
+ <li><a href="#benefits">Benefits</a></li>
+ <li><a href="#demo">Demo</a></li>
+ <li><a href="#contact" class="cta-button">Get Started</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h1>Transform Your Sales Meetings Into Revenue</h1>
+ <p>AI-powered meeting intelligence and automated lead nurturing to help you close more deals</p>
+ <button class="primary-button">Book a Demo</button>
+ </div>
+ <div class="hero-image">
+ <div class="abstract-shape"></div>
+ </div>
+ </section>
+
+ <section id="features" class="features">
+ <h2>Core Features</h2>
+ <div class="features-grid">
+ <div class="feature-card">
+ <div class="icon meeting"></div>
+ <h3>Meeting Intelligence</h3>
+ <p>Capture and analyze sales conversations for actionable insights</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon analytics"></div>
+ <h3>Performance Analytics</h3>
+ <p>Track metrics and get personalized coaching recommendations</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon automation"></div>
+ <h3>AI Follow-ups</h3>
+ <p>Automated SMS engagement to nurture leads and close deals</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="benefits" class="benefits">
+ <h2>Why Choose Kahuna</h2>
+ <div class="benefits-container">
+ <div class="benefit">
+ <h3>30% More Closed Deals</h3>
+ <p>Turn insights into action with AI-powered recommendations</p>
+ </div>
+ <div class="benefit">
+ <h3>50% Less Follow-up Time</h3>
+ <p>Automate lead nurturing with intelligent SMS campaigns</p>
+ </div>
+ <div class="benefit">
+ <h3>100% Meeting Coverage</h3>
+ <p>Never miss a key moment or opportunity again</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Ready to Transform Your Sales?</h2>
+ <form id="contact-form" class="contact-form">
+ <input type="email" placeholder="Your work email" required>
+ <input type="text" placeholder="Company name" required>
+ <button type="submit" class="primary-button">Start Free Trial</button>
+ </form>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>Kahuna</h4>
+ <p>AI-powered sales intelligence platform</p>
+ </div>
+ <div class="footer-section">
+ <h4>Contact</h4>
+ <p>hello@kahuna.scroll.pub</p>
+ </div>
+ <div class="footer-section">
+ <h4>Follow Us</h4>
+ <div class="social-links">
+ <a href="#" aria-label="LinkedIn">LinkedIn</a>
+ <a href="#" aria-label="Twitter">Twitter</a>
+ </div>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..1ab9fd5
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://kahuna.scroll.pub
+metaTags
+editButton /edit.html
+title Kahuna - AI-Powered Sales Intelligence Platform
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..3beb9de
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_019duD6RTqBUdJPg1RB7idDx",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a professional website for Kahuna. For the domain, I suggest:\n\n---domain---\nkahuna.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://kahuna.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Kahuna - AI-Powered Sales Intelligence Platform\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">Kahuna</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=\"#features\">Features</a></li>\n <li><a href=\"#benefits\">Benefits</a></li>\n <li><a href=\"#demo\">Demo</a></li>\n <li><a href=\"#contact\" class=\"cta-button\">Get Started</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>Transform Your Sales Meetings Into Revenue</h1>\n <p>AI-powered meeting intelligence and automated lead nurturing to help you close more deals</p>\n <button class=\"primary-button\">Book a Demo</button>\n </div>\n <div class=\"hero-image\">\n <div class=\"abstract-shape\"></div>\n </div>\n </section>\n\n <section id=\"features\" class=\"features\">\n <h2>Core Features</h2>\n <div class=\"features-grid\">\n <div class=\"feature-card\">\n <div class=\"icon meeting\"></div>\n <h3>Meeting Intelligence</h3>\n <p>Capture and analyze sales conversations for actionable insights</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon analytics\"></div>\n <h3>Performance Analytics</h3>\n <p>Track metrics and get personalized coaching recommendations</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon automation\"></div>\n <h3>AI Follow-ups</h3>\n <p>Automated SMS engagement to nurture leads and close deals</p>\n </div>\n </div>\n </section>\n\n <section id=\"benefits\" class=\"benefits\">\n <h2>Why Choose Kahuna</h2>\n <div class=\"benefits-container\">\n <div class=\"benefit\">\n <h3>30% More Closed Deals</h3>\n <p>Turn insights into action with AI-powered recommendations</p>\n </div>\n <div class=\"benefit\">\n <h3>50% Less Follow-up Time</h3>\n <p>Automate lead nurturing with intelligent SMS campaigns</p>\n </div>\n <div class=\"benefit\">\n <h3>100% Meeting Coverage</h3>\n <p>Never miss a key moment or opportunity again</p>\n </div>\n </div>\n </section>\n\n <section id=\"contact\" class=\"contact\">\n <h2>Ready to Transform Your Sales?</h2>\n <form id=\"contact-form\" class=\"contact-form\">\n <input type=\"email\" placeholder=\"Your work email\" required>\n <input type=\"text\" placeholder=\"Company name\" required>\n <button type=\"submit\" class=\"primary-button\">Start Free Trial</button>\n </form>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>Kahuna</h4>\n <p>AI-powered sales intelligence platform</p>\n </div>\n <div class=\"footer-section\">\n <h4>Contact</h4>\n <p>hello@kahuna.scroll.pub</p>\n </div>\n <div class=\"footer-section\">\n <h4>Follow Us</h4>\n <div class=\"social-links\">\n <a href=\"#\" aria-label=\"LinkedIn\">LinkedIn</a>\n <a href=\"#\" aria-label=\"Twitter\">Twitter</a>\n </div>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary: #2563eb;\n --secondary: #1e40af;\n --text: #1f2937;\n --bg: #ffffff;\n --accent: #dbeafe;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n color: var(--text);\n line-height: 1.6;\n}\n\n/* Header & Navigation */\nheader {\n position: fixed;\n width: 100%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: 700;\n color: var(--primary);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text);\n font-weight: 500;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n.cta-button {\n background: var(--primary);\n color: white !important;\n padding: 0.5rem 1rem;\n border-radius: 6px;\n transition: background-color 0.3s ease;\n}\n\n.cta-button:hover {\n background: var(--secondary);\n}\n\n/* Hero Section */\n.hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n padding: 6rem 2rem 4rem;\n background: linear-gradient(135deg, var(--bg), var(--accent));\n}\n\n.hero-content {\n max-width: 600px;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n line-height: 1.2;\n margin-bottom: 1.5rem;\n background: linear-gradient(to right, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n color: transparent;\n}\n\n.hero-image {\n position: relative;\n flex: 1;\n height: 500px;\n}\n\n.abstract-shape {\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(circle at 30% 30%, var(--primary), transparent);\n opacity: 0.1;\n border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;\n animation: morphShape 15s ease-in-out infinite;\n}\n\n/* Features Section */\n.features {\n padding: 6rem 2rem;\n background: var(--bg);\n}\n\n.features-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 3rem auto 0;\n}\n\n.feature-card {\n padding: 2rem;\n background: white;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n}\n\n/* Benefits Section */\n.benefits {\n padding: 6rem 2rem;\n background: var(--accent);\n}\n\n.benefits-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 3rem auto 0;\n}\n\n/* Contact Section */\n.contact {\n padding: 6rem 2rem;\n text-align: center;\n background: var(--bg);\n}\n\n.contact-form {\n max-width: 500px;\n margin: 3rem auto 0;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\ninput {\n padding: 1rem;\n border: 2px solid var(--accent);\n border-radius: 6px;\n font-size: 1rem;\n}\n\n.primary-button {\n background: var(--primary);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 6px;\n font-size: 1rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.primary-button:hover {\n background: var(--secondary);\n}\n\n/* Footer */\nfooter {\n background: var(--text);\n color: white;\n padding: 4rem 2rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n/* Animations */\n@keyframes morphShape {\n 0%, 100% {\n border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;\n }\n 50% {\n border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;\n }\n}\n\n/* Mobile Responsiveness */\n.mobile-menu {\n display: none;\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .mobile-menu span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--text);\n margin: 5px 0;\n transition: 0.3s;\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 .hero {\n flex-direction: column;\n text-align: center;\n }\n\n .hero h1 {\n font-size: 2.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\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 \n // Animate hamburger to X\n const spans = mobileMenu.querySelectorAll('span');\n spans.forEach(span => span.classList.toggle('active'));\n });\n\n // Smooth scroll for navigation 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 target.scrollIntoView({\n behavior: 'smooth'\n });\n \n // Close mobile menu if open\n navLinks.classList.remove('active');\n });\n });\n\n // Form submission\n const contactForm = document.getElementById('contact-form');\n contactForm.addEventListener('submit', (e) => {\n e.preventDefault();\n \n // Animate button to show processing state\n const submitButton = contactForm.querySelector('button');\n submitButton.textContent = 'Processing...';\n \n // Simulate form submission\n setTimeout(() => {\n submitButton.textContent = 'Thanks for your interest!';\n contactForm.reset();\n \n // Reset button text after 2 seconds\n setTimeout(() => {\n submitButton.textContent = 'Start Free Trial';\n }, 2000);\n }, 1000);\n });\n\n // Intersection Observer for fade-in 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.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);\n\n // Observe all sections\n document.querySelectorAll('section').forEach(section => {\n section.style.opacity = '0';\n section.style.transform = 'translateY(20px)';\n section.style.transition = 'all 0.6s ease-out';\n observer.observe(section);\n });\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 416,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3481
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..4a2373a
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# kahuna4.scroll.pub
+Website generated by Claude from prompt: Website for my SAAS called Kahuna. Kahuna is an AI-powered sales platform that helps businesses unlock the full potential of their sales meetings and lead management. At its core, Kahuna captures and analyzes sales meetings, delivering rich insights, performance feedback, and actionable recommendations that empower teams to close more deals. As a complementary feature, Kahuna leverages AI-driven SMS follow-ups to re-engage unclosed leads with conversational, human-like text messages designed to build trust and move deals forward. By combining meeting intelligence with automated lead nurturing, Kahuna ensures no revenue opportunity slips through the cracks, helping businesses scale smarter and sell more effectively.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..4bea550
--- /dev/null
+++ b/script.js
@@ -0,0 +1,71 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+
+ // Animate hamburger to X
+ const spans = mobileMenu.querySelectorAll('span');
+ spans.forEach(span => span.classList.toggle('active'));
+ });
+
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+
+ // Close mobile menu if open
+ navLinks.classList.remove('active');
+ });
+ });
+
+ // Form submission
+ const contactForm = document.getElementById('contact-form');
+ contactForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ // Animate button to show processing state
+ const submitButton = contactForm.querySelector('button');
+ submitButton.textContent = 'Processing...';
+
+ // Simulate form submission
+ setTimeout(() => {
+ submitButton.textContent = 'Thanks for your interest!';
+ contactForm.reset();
+
+ // Reset button text after 2 seconds
+ setTimeout(() => {
+ submitButton.textContent = 'Start Free Trial';
+ }, 2000);
+ }, 1000);
+ });
+
+ // Intersection Observer for fade-in animations
+ const observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px 0px -50px 0px'
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ // Observe all sections
+ document.querySelectorAll('section').forEach(section => {
+ section.style.opacity = '0';
+ section.style.transform = 'translateY(20px)';
+ section.style.transition = 'all 0.6s ease-out';
+ observer.observe(section);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2d8ddc7
--- /dev/null
+++ b/style.css
@@ -0,0 +1,261 @@
+:root {
+ --primary: #2563eb;
+ --secondary: #1e40af;
+ --text: #1f2937;
+ --bg: #ffffff;
+ --accent: #dbeafe;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ color: var(--text);
+ line-height: 1.6;
+}
+
+/* Header & Navigation */
+header {
+ position: fixed;
+ width: 100%;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ z-index: 1000;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: var(--primary);
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text);
+ font-weight: 500;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary);
+}
+
+.cta-button {
+ background: var(--primary);
+ color: white !important;
+ padding: 0.5rem 1rem;
+ border-radius: 6px;
+ transition: background-color 0.3s ease;
+}
+
+.cta-button:hover {
+ background: var(--secondary);
+}
+
+/* Hero Section */
+.hero {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ padding: 6rem 2rem 4rem;
+ background: linear-gradient(135deg, var(--bg), var(--accent));
+}
+
+.hero-content {
+ max-width: 600px;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ line-height: 1.2;
+ margin-bottom: 1.5rem;
+ background: linear-gradient(to right, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ color: transparent;
+}
+
+.hero-image {
+ position: relative;
+ flex: 1;
+ height: 500px;
+}
+
+.abstract-shape {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: radial-gradient(circle at 30% 30%, var(--primary), transparent);
+ opacity: 0.1;
+ border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+ animation: morphShape 15s ease-in-out infinite;
+}
+
+/* Features Section */
+.features {
+ padding: 6rem 2rem;
+ background: var(--bg);
+}
+
+.features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 3rem auto 0;
+}
+
+.feature-card {
+ padding: 2rem;
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+ transform: translateY(-5px);
+}
+
+/* Benefits Section */
+.benefits {
+ padding: 6rem 2rem;
+ background: var(--accent);
+}
+
+.benefits-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 3rem auto 0;
+}
+
+/* Contact Section */
+.contact {
+ padding: 6rem 2rem;
+ text-align: center;
+ background: var(--bg);
+}
+
+.contact-form {
+ max-width: 500px;
+ margin: 3rem auto 0;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+input {
+ padding: 1rem;
+ border: 2px solid var(--accent);
+ border-radius: 6px;
+ font-size: 1rem;
+}
+
+.primary-button {
+ background: var(--primary);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: 6px;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.primary-button:hover {
+ background: var(--secondary);
+}
+
+/* Footer */
+footer {
+ background: var(--text);
+ color: white;
+ padding: 4rem 2rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+}
+
+/* Animations */
+@keyframes morphShape {
+ 0%, 100% {
+ border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+ }
+ 50% {
+ border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
+ }
+}
+
+/* Mobile Responsiveness */
+.mobile-menu {
+ display: none;
+}
+
+@media (max-width: 768px) {
+ .mobile-menu {
+ display: block;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--text);
+ margin: 5px 0;
+ transition: 0.3s;
+ }
+
+ .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;
+ }
+
+ .hero {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+}