commit fe588995f52d70148ed6abb1cfe3e711530604eb
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 06:23:33 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..35d6741
--- /dev/null
+++ b/body.html
@@ -0,0 +1,103 @@
+<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="#how-it-works">How It Works</a></li>
+ <li><a href="#benefits">Benefits</a></li>
+ <li><a href="#contact">Contact</a></li>
+ <li><a href="#demo" class="cta-button">Get Demo</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h1>Transform Your Sales Team with AI-Powered Intelligence</h1>
+ <p>Record, analyze, and optimize sales performance while our AI handles follow-ups to capture every opportunity.</p>
+ <a href="#demo" class="cta-button">Request Demo</a>
+ </div>
+ <div class="hero-image"></div>
+ </section>
+
+ <section id="features" class="features">
+ <h2>Key Features</h2>
+ <div class="feature-grid">
+ <div class="feature-card">
+ <div class="feature-icon">📝</div>
+ <h3>Smart Meeting Recording</h3>
+ <p>Automatically capture and transcribe sales meetings for deeper insights.</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">📊</div>
+ <h3>Performance Metrics</h3>
+ <p>Track key performance indicators and team progress in real-time.</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">🤖</div>
+ <h3>AI Follow-ups</h3>
+ <p>Let our AI handle communication on unclosed deals until revenue is secured.</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">📈</div>
+ <h3>Personalized Feedback</h3>
+ <p>Receive AI-powered insights to improve sales techniques.</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="how-it-works" class="how-it-works">
+ <h2>How It Works</h2>
+ <div class="steps">
+ <div class="step">
+ <div class="step-number">1</div>
+ <h3>Record Meetings</h3>
+ <p>Seamlessly capture sales conversations and meetings.</p>
+ </div>
+ <div class="step">
+ <div class="step-number">2</div>
+ <h3>Analyze Performance</h3>
+ <p>AI processes meetings to extract insights and metrics.</p>
+ </div>
+ <div class="step">
+ <div class="step-number">3</div>
+ <h3>Optimize & Follow-up</h3>
+ <p>Receive personalized feedback while AI handles lead nurturing.</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Ready to Transform Your Sales Process?</h2>
+ <form id="demo-form" class="contact-form">
+ <input type="text" placeholder="Name" required>
+ <input type="email" placeholder="Email" required>
+ <input type="text" placeholder="Company" required>
+ <button type="submit" class="cta-button">Get Started</button>
+ </form>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>Kahuna</h4>
+ <p>AI-powered sales team enhancement 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..69f3d8d
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://kahuna.scroll.pub
+metaTags
+ description "Kahuna - AI-Powered Sales Team Performance Enhancement"
+ keywords "sales performance, AI sales assistant, meeting recorder, sales metrics"
+ author "Kahuna"
+editButton /edit.html
+title Kahuna - Supercharge Your Sales Team
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..a9650fe
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_018ebqEcKNkexuYAJVbaXZ3Q",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a clean, professional website for Kahuna:\n\n---domain---\nkahuna.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://kahuna.scroll.pub\nmetaTags\n description \"Kahuna - AI-Powered Sales Team Performance Enhancement\"\n keywords \"sales performance, AI sales assistant, meeting recorder, sales metrics\"\n author \"Kahuna\"\neditButton /edit.html\ntitle Kahuna - Supercharge Your Sales Team\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=\"#how-it-works\">How It Works</a></li>\n <li><a href=\"#benefits\">Benefits</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n <li><a href=\"#demo\" class=\"cta-button\">Get Demo</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 Team with AI-Powered Intelligence</h1>\n <p>Record, analyze, and optimize sales performance while our AI handles follow-ups to capture every opportunity.</p>\n <a href=\"#demo\" class=\"cta-button\">Request Demo</a>\n </div>\n <div class=\"hero-image\"></div>\n </section>\n\n <section id=\"features\" class=\"features\">\n <h2>Key Features</h2>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\">📝</div>\n <h3>Smart Meeting Recording</h3>\n <p>Automatically capture and transcribe sales meetings for deeper insights.</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">📊</div>\n <h3>Performance Metrics</h3>\n <p>Track key performance indicators and team progress in real-time.</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🤖</div>\n <h3>AI Follow-ups</h3>\n <p>Let our AI handle communication on unclosed deals until revenue is secured.</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">📈</div>\n <h3>Personalized Feedback</h3>\n <p>Receive AI-powered insights to improve sales techniques.</p>\n </div>\n </div>\n </section>\n\n <section id=\"how-it-works\" class=\"how-it-works\">\n <h2>How It Works</h2>\n <div class=\"steps\">\n <div class=\"step\">\n <div class=\"step-number\">1</div>\n <h3>Record Meetings</h3>\n <p>Seamlessly capture sales conversations and meetings.</p>\n </div>\n <div class=\"step\">\n <div class=\"step-number\">2</div>\n <h3>Analyze Performance</h3>\n <p>AI processes meetings to extract insights and metrics.</p>\n </div>\n <div class=\"step\">\n <div class=\"step-number\">3</div>\n <h3>Optimize & Follow-up</h3>\n <p>Receive personalized feedback while AI handles lead nurturing.</p>\n </div>\n </div>\n </section>\n\n <section id=\"contact\" class=\"contact\">\n <h2>Ready to Transform Your Sales Process?</h2>\n <form id=\"demo-form\" class=\"contact-form\">\n <input type=\"text\" placeholder=\"Name\" required>\n <input type=\"email\" placeholder=\"Email\" required>\n <input type=\"text\" placeholder=\"Company\" required>\n <button type=\"submit\" class=\"cta-button\">Get Started</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 team enhancement 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-color: #0066cc;\n --secondary-color: #001833;\n --accent-color: #00a3ff;\n --text-color: #333;\n --light-bg: #f5f8ff;\n --white: #ffffff;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\n/* Header & Navigation */\nheader {\n background: var(--white);\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\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: 2rem;\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: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n.mobile-menu {\n display: none;\n}\n\n/* Hero Section */\n.hero {\n margin-top: 80px;\n padding: 4rem 2rem;\n background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));\n color: var(--white);\n display: flex;\n align-items: center;\n min-height: 80vh;\n}\n\n.hero-content {\n max-width: 600px;\n margin: 0 auto;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1.5rem;\n line-height: 1.2;\n}\n\n/* Features Section */\n.features {\n padding: 4rem 2rem;\n background: var(--light-bg);\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 2rem auto;\n}\n\n.feature-card {\n background: var(--white);\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 15px 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.feature-icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n/* How It Works Section */\n.how-it-works {\n padding: 4rem 2rem;\n}\n\n.steps {\n display: flex;\n justify-content: space-around;\n flex-wrap: wrap;\n max-width: 1200px;\n margin: 2rem auto;\n}\n\n.step {\n flex: 1;\n min-width: 250px;\n padding: 2rem;\n text-align: center;\n}\n\n.step-number {\n width: 50px;\n height: 50px;\n background: var(--primary-color);\n color: var(--white);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 1rem;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n/* Contact Form */\n.contact {\n padding: 4rem 2rem;\n background: var(--light-bg);\n text-align: center;\n}\n\n.contact-form {\n max-width: 500px;\n margin: 2rem auto;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\ninput {\n padding: 1rem;\n border: 2px solid #ddd;\n border-radius: 5px;\n font-size: 1rem;\n}\n\n.cta-button {\n background: var(--primary-color);\n color: var(--white);\n padding: 1rem 2rem;\n border: none;\n border-radius: 5px;\n font-size: 1rem;\n font-weight: bold;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.cta-button:hover {\n background: var(--accent-color);\n}\n\n/* Footer */\nfooter {\n background: var(--secondary-color);\n color: var(--white);\n padding: 3rem 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.social-links a {\n color: var(--white);\n text-decoration: none;\n margin-right: 1rem;\n}\n\n/* Mobile Responsiveness */\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-color);\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: var(--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 h1 {\n font-size: 2.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Mobile Menu Toggle\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', function() {\n navLinks.classList.toggle('active');\n \n // Animate hamburger to X\n const spans = this.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 if (target) {\n target.scrollIntoView({\n behavior: 'smooth'\n });\n // Close mobile menu if open\n navLinks.classList.remove('active');\n }\n });\n });\n\n // Form Submission\n const demoForm = document.getElementById('demo-form');\n if (demoForm) {\n demoForm.addEventListener('submit', function(e) {\n e.preventDefault();\n \n // Animate button to show processing state\n const submitButton = this.querySelector('button[type=\"submit\"]');\n const originalText = submitButton.textContent;\n submitButton.textContent = 'Processing...';\n \n // Simulate form submission\n setTimeout(() => {\n submitButton.textContent = 'Thank You!';\n this.reset();\n \n // Reset button text after 2 seconds\n setTimeout(() => {\n submitButton.textContent = originalText;\n }, 2000);\n }, 1000);\n });\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.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, observerOptions);\n\n // Observe all feature cards and steps\n document.querySelectorAll('.feature-card, .step').forEach(elem => {\n elem.style.opacity = '0';\n elem.style.transform = 'translateY(20px)';\n elem.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';\n observer.observe(elem);\n });\n});\n\n// Add class for fade-in animation\ndocument.documentElement.style.setProperty('--animate-duration', '0.6s');\n\n---end---\n\nThis design features:\n- Clean, modern aesthetic with a professional color scheme\n- Smooth animations and transitions\n- Mobile-responsive layout with hamburger menu\n- Intersection Observer for scroll animations\n- Accessible navigation and semantic HTML\n- Optimized performance with vanilla JS\n- Interactive form with feedback\n- Clear information hierarchy\n- Engaging hero section\n- Feature highlights with hover effects\n- Step-by-step process explanation\n- Contact form with validation\n- Proper spacing and typography\n- Smooth scroll behavior\n- SEO-friendly structure\n\nThe domain name \"kahuna.scroll.pub\" is memorable and reflects the product's authority in sales team enhancement (Kahuna traditionally means \"expert\" or \"master\" in Hawaiian)."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 367,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3801
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..46448a9
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# kahuna3.scroll.pub
+Website generated by Claude from prompt: Website for my start up named Kahuna. Colors should be blue and and black. Kahuna is a Sales team performance enhancing tool that records sales meetings, takes notes, tracks performance metrics, and delivers personalized performance feedback. Our AI is powered by the context of recorded meetings and takes over communication on unclosed deals. Meaning every unclosed lead is followed up with until the revenue is captured. Kahuna gives an indisputable advantage to any team using it
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ac28236
--- /dev/null
+++ b/script.js
@@ -0,0 +1,78 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Mobile Menu Toggle
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', function() {
+ navLinks.classList.toggle('active');
+
+ // Animate hamburger to X
+ const spans = this.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'));
+ if (target) {
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+ // Close mobile menu if open
+ navLinks.classList.remove('active');
+ }
+ });
+ });
+
+ // Form Submission
+ const demoForm = document.getElementById('demo-form');
+ if (demoForm) {
+ demoForm.addEventListener('submit', function(e) {
+ e.preventDefault();
+
+ // Animate button to show processing state
+ const submitButton = this.querySelector('button[type="submit"]');
+ const originalText = submitButton.textContent;
+ submitButton.textContent = 'Processing...';
+
+ // Simulate form submission
+ setTimeout(() => {
+ submitButton.textContent = 'Thank You!';
+ this.reset();
+
+ // Reset button text after 2 seconds
+ setTimeout(() => {
+ submitButton.textContent = originalText;
+ }, 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.classList.add('visible');
+ observer.unobserve(entry.target);
+ }
+ });
+ }, observerOptions);
+
+ // Observe all feature cards and steps
+ document.querySelectorAll('.feature-card, .step').forEach(elem => {
+ elem.style.opacity = '0';
+ elem.style.transform = 'translateY(20px)';
+ elem.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
+ observer.observe(elem);
+ });
+});
+
+// Add class for fade-in animation
+document.documentElement.style.setProperty('--animate-duration', '0.6s');
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7556d66
--- /dev/null
+++ b/style.css
@@ -0,0 +1,251 @@
+:root {
+ --primary-color: #0066cc;
+ --secondary-color: #001833;
+ --accent-color: #00a3ff;
+ --text-color: #333;
+ --light-bg: #f5f8ff;
+ --white: #ffffff;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+}
+
+/* Header & Navigation */
+header {
+ background: var(--white);
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ 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: 2rem;
+ 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: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+.mobile-menu {
+ display: none;
+}
+
+/* Hero Section */
+.hero {
+ margin-top: 80px;
+ padding: 4rem 2rem;
+ background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+ color: var(--white);
+ display: flex;
+ align-items: center;
+ min-height: 80vh;
+}
+
+.hero-content {
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1.5rem;
+ line-height: 1.2;
+}
+
+/* Features Section */
+.features {
+ padding: 4rem 2rem;
+ background: var(--light-bg);
+}
+
+.feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 2rem auto;
+}
+
+.feature-card {
+ background: var(--white);
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+ transform: translateY(-5px);
+}
+
+.feature-icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+/* How It Works Section */
+.how-it-works {
+ padding: 4rem 2rem;
+}
+
+.steps {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ max-width: 1200px;
+ margin: 2rem auto;
+}
+
+.step {
+ flex: 1;
+ min-width: 250px;
+ padding: 2rem;
+ text-align: center;
+}
+
+.step-number {
+ width: 50px;
+ height: 50px;
+ background: var(--primary-color);
+ color: var(--white);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto 1rem;
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+/* Contact Form */
+.contact {
+ padding: 4rem 2rem;
+ background: var(--light-bg);
+ text-align: center;
+}
+
+.contact-form {
+ max-width: 500px;
+ margin: 2rem auto;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+input {
+ padding: 1rem;
+ border: 2px solid #ddd;
+ border-radius: 5px;
+ font-size: 1rem;
+}
+
+.cta-button {
+ background: var(--primary-color);
+ color: var(--white);
+ padding: 1rem 2rem;
+ border: none;
+ border-radius: 5px;
+ font-size: 1rem;
+ font-weight: bold;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.cta-button:hover {
+ background: var(--accent-color);
+}
+
+/* Footer */
+footer {
+ background: var(--secondary-color);
+ color: var(--white);
+ padding: 3rem 2rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+}
+
+.social-links a {
+ color: var(--white);
+ text-decoration: none;
+ margin-right: 1rem;
+}
+
+/* Mobile Responsiveness */
+@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-color);
+ margin: 5px 0;
+ transition: 0.3s;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--white);
+ flex-direction: column;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+}