commit 8d960854cbe7dd97c5d0f767acfb2ec05f433463
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 05:42:32 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..d83cccd
--- /dev/null
+++ b/body.html
@@ -0,0 +1,113 @@
+<header>
+ <nav class="navbar">
+ <div class="logo">FixitPro</div>
+ <button class="mobile-menu-btn" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#services">Services</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#testimonials">Testimonials</a></li>
+ <li><a href="#contact" class="cta-button">Get a Quote</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h1>Expert Handyman Services</h1>
+ <p>Quality repairs and maintenance for your home</p>
+ <a href="#contact" class="cta-button">Schedule Service</a>
+ </div>
+ </section>
+
+ <section id="services" class="services">
+ <h2>Our Services</h2>
+ <div class="service-grid">
+ <div class="service-card">
+ <div class="icon">🔧</div>
+ <h3>General Repairs</h3>
+ <p>From fixing leaky faucets to patching drywall</p>
+ </div>
+ <div class="service-card">
+ <div class="icon">🏠</div>
+ <h3>Home Maintenance</h3>
+ <p>Regular upkeep to prevent costly repairs</p>
+ </div>
+ <div class="service-card">
+ <div class="icon">🎨</div>
+ <h3>Painting</h3>
+ <p>Interior and exterior painting services</p>
+ </div>
+ <div class="service-card">
+ <div class="icon">⚡</div>
+ <h3>Electrical</h3>
+ <p>Light fixtures, outlets, and minor repairs</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="about" class="about">
+ <h2>Why Choose Us</h2>
+ <div class="about-content">
+ <div class="about-text">
+ <ul>
+ <li>Licensed and Insured</li>
+ <li>20+ Years Experience</li>
+ <li>100% Satisfaction Guaranteed</li>
+ <li>Free Estimates</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+
+ <section id="testimonials" class="testimonials">
+ <h2>What Our Clients Say</h2>
+ <div class="testimonial-slider">
+ <div class="testimonial active">
+ <p>"Exceptional service! Fixed everything in one visit. Highly recommended!"</p>
+ <cite>- Sarah Johnson</cite>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Get a Free Quote</h2>
+ <form id="contact-form" class="contact-form">
+ <div class="form-group">
+ <input type="text" id="name" name="name" required placeholder="Your Name">
+ </div>
+ <div class="form-group">
+ <input type="email" id="email" name="email" required placeholder="Email Address">
+ </div>
+ <div class="form-group">
+ <input type="tel" id="phone" name="phone" required placeholder="Phone Number">
+ </div>
+ <div class="form-group">
+ <textarea id="message" name="message" required placeholder="Describe your project"></textarea>
+ </div>
+ <button type="submit" class="submit-button">Send Request</button>
+ </form>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>Contact Info</h4>
+ <p>📱 (555) 123-4567</p>
+ <p>📧 info@fixitpro.scroll.pub</p>
+ </div>
+ <div class="footer-section">
+ <h4>Hours</h4>
+ <p>Monday-Friday: 7am-6pm</p>
+ <p>Saturday: 8am-2pm</p>
+ </div>
+ <div class="footer-section">
+ <h4>Service Area</h4>
+ <p>Greater Metropolitan Area</p>
+ <p>and Surrounding Communities</p>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..cabd404
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://fixitpro.scroll.pub
+metaTags
+title FixitPro Handyman Services - Professional Home Repairs & Maintenance
+description Professional handyman services for all your home repair and maintenance needs. Licensed, insured, and trusted in the community.
+keywords handyman, home repair, maintenance, renovation, local handyman, professional handyman
+author FixitPro Handyman Services
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..e7ad4fd
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_0115NYxkFmsokHFFbT2EKfMm",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a professional handyman business website. For the domain, I suggest:\n\n---domain---\nfixitpro.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://fixitpro.scroll.pub\nmetaTags\ntitle FixitPro Handyman Services - Professional Home Repairs & Maintenance\ndescription Professional handyman services for all your home repair and maintenance needs. Licensed, insured, and trusted in the community.\nkeywords handyman, home repair, maintenance, renovation, local handyman, professional handyman\nauthor FixitPro Handyman Services\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav class=\"navbar\">\n <div class=\"logo\">FixitPro</div>\n <button class=\"mobile-menu-btn\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#services\">Services</a></li>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#testimonials\">Testimonials</a></li>\n <li><a href=\"#contact\" class=\"cta-button\">Get a Quote</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>Expert Handyman Services</h1>\n <p>Quality repairs and maintenance for your home</p>\n <a href=\"#contact\" class=\"cta-button\">Schedule Service</a>\n </div>\n </section>\n\n <section id=\"services\" class=\"services\">\n <h2>Our Services</h2>\n <div class=\"service-grid\">\n <div class=\"service-card\">\n <div class=\"icon\">🔧</div>\n <h3>General Repairs</h3>\n <p>From fixing leaky faucets to patching drywall</p>\n </div>\n <div class=\"service-card\">\n <div class=\"icon\">🏠</div>\n <h3>Home Maintenance</h3>\n <p>Regular upkeep to prevent costly repairs</p>\n </div>\n <div class=\"service-card\">\n <div class=\"icon\">🎨</div>\n <h3>Painting</h3>\n <p>Interior and exterior painting services</p>\n </div>\n <div class=\"service-card\">\n <div class=\"icon\">⚡</div>\n <h3>Electrical</h3>\n <p>Light fixtures, outlets, and minor repairs</p>\n </div>\n </div>\n </section>\n\n <section id=\"about\" class=\"about\">\n <h2>Why Choose Us</h2>\n <div class=\"about-content\">\n <div class=\"about-text\">\n <ul>\n <li>Licensed and Insured</li>\n <li>20+ Years Experience</li>\n <li>100% Satisfaction Guaranteed</li>\n <li>Free Estimates</li>\n </ul>\n </div>\n </div>\n </section>\n\n <section id=\"testimonials\" class=\"testimonials\">\n <h2>What Our Clients Say</h2>\n <div class=\"testimonial-slider\">\n <div class=\"testimonial active\">\n <p>\"Exceptional service! Fixed everything in one visit. Highly recommended!\"</p>\n <cite>- Sarah Johnson</cite>\n </div>\n </div>\n </section>\n\n <section id=\"contact\" class=\"contact\">\n <h2>Get a Free Quote</h2>\n <form id=\"contact-form\" class=\"contact-form\">\n <div class=\"form-group\">\n <input type=\"text\" id=\"name\" name=\"name\" required placeholder=\"Your Name\">\n </div>\n <div class=\"form-group\">\n <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"Email Address\">\n </div>\n <div class=\"form-group\">\n <input type=\"tel\" id=\"phone\" name=\"phone\" required placeholder=\"Phone Number\">\n </div>\n <div class=\"form-group\">\n <textarea id=\"message\" name=\"message\" required placeholder=\"Describe your project\"></textarea>\n </div>\n <button type=\"submit\" class=\"submit-button\">Send Request</button>\n </form>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>Contact Info</h4>\n <p>📱 (555) 123-4567</p>\n <p>📧 info@fixitpro.scroll.pub</p>\n </div>\n <div class=\"footer-section\">\n <h4>Hours</h4>\n <p>Monday-Friday: 7am-6pm</p>\n <p>Saturday: 8am-2pm</p>\n </div>\n <div class=\"footer-section\">\n <h4>Service Area</h4>\n <p>Greater Metropolitan Area</p>\n <p>and Surrounding Communities</p>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #e74c3c;\n --text-color: #333;\n --light-bg: #f5f6fa;\n --white: #ffffff;\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', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\n/* Navigation */\n.navbar {\n position: fixed;\n width: 100%;\n top: 0;\n background: var(--white);\n padding: 1rem 5%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n z-index: 1000;\n}\n\n.logo {\n font-size: 1.8rem;\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(--secondary-color);\n}\n\n/* Hero Section */\n.hero {\n height: 100vh;\n background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.8)),\n url('data:image/svg+xml,<svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"%232c3e50\"/></svg>');\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white);\n}\n\n.hero-content h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n animation: fadeInUp 1s ease;\n}\n\n.hero-content p {\n font-size: 1.5rem;\n margin-bottom: 2rem;\n animation: fadeInUp 1s ease 0.2s;\n}\n\n/* Services Section */\n.services {\n padding: 5rem 5%;\n background: var(--light-bg);\n}\n\n.service-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n}\n\n.service-card {\n background: var(--white);\n padding: 2rem;\n border-radius: 10px;\n text-align: center;\n transition: var(--transition);\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n}\n\n.service-card:hover {\n transform: translateY(-10px);\n}\n\n.service-card .icon {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n/* Contact Form */\n.contact {\n padding: 5rem 5%;\n}\n\n.contact-form {\n max-width: 600px;\n margin: 0 auto;\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\ninput, textarea {\n width: 100%;\n padding: 1rem;\n border: 2px solid #ddd;\n border-radius: 5px;\n transition: var(--transition);\n}\n\ninput:focus, textarea:focus {\n border-color: var(--secondary-color);\n outline: none;\n}\n\n/* Footer */\nfooter {\n background: var(--primary-color);\n color: var(--white);\n padding: 3rem 5%;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n/* Buttons */\n.cta-button, .submit-button {\n display: inline-block;\n padding: 1rem 2rem;\n background: var(--secondary-color);\n color: var(--white);\n text-decoration: none;\n border-radius: 5px;\n border: none;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.cta-button:hover, .submit-button:hover {\n background: #c0392b;\n transform: translateY(-2px);\n}\n\n/* Mobile Menu */\n.mobile-menu-btn {\n display: none;\n flex-direction: column;\n gap: 6px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 5px;\n}\n\n.mobile-menu-btn span {\n width: 30px;\n height: 3px;\n background: var(--primary-color);\n transition: var(--transition);\n}\n\n/* Animations */\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Media Queries */\n@media (max-width: 768px) {\n .mobile-menu-btn {\n display: flex;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\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-content h1 {\n font-size: 2.5rem;\n }\n\n .hero-content p {\n font-size: 1.2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Mobile Menu Toggle\n const menuBtn = document.querySelector('.mobile-menu-btn');\n const navLinks = document.querySelector('.nav-links');\n\n menuBtn.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n menuBtn.classList.toggle('active');\n });\n\n // Smooth Scrolling 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 block: 'start'\n });\n // Close mobile menu if open\n navLinks.classList.remove('active');\n menuBtn.classList.remove('active');\n }\n });\n });\n\n // Form Submission Handler\n const contactForm = document.getElementById('contact-form');\n if (contactForm) {\n contactForm.addEventListener('submit', function(e) {\n e.preventDefault();\n // Add form validation\n const name = document.getElementById('name').value;\n const email = document.getElementById('email').value;\n const phone = document.getElementById('phone').value;\n const message = document.getElementById('message').value;\n\n if (name && email && phone && message) {\n // Here you would typically send the form data to a server\n alert('Thank you for your message! We will contact you soon.');\n contactForm.reset();\n } else {\n alert('Please fill in all fields.');\n }\n });\n }\n\n // Scroll-based Navigation Highlight\n window.addEventListener('scroll', function() {\n const sections = document.querySelectorAll('section');\n const navLinks = document.querySelectorAll('.nav-links a');\n \n let current = '';\n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n const sectionHeight = section.clientHeight;\n if (pageYOffset >= (sectionTop - sectionHeight/3)) {\n current = section.getAttribute('id');\n }\n });\n\n navLinks.forEach(link => {\n link.classList.remove('active');\n if (link.getAttribute('href').slice(1) === current) {\n link.classList.add('active');\n }\n });\n });\n});\n\n---end---\n\nThis website features:\n- Modern, clean design with smooth animations\n- Fully responsive layout\n- Mobile-friendly navigation\n- Service showcase with hover effects\n- Contact form with validation\n- Smooth scrolling navigation\n- Semantic HTML5 structure\n- Optimized for SEO\n- Accessible design features\n- Pure CSS animations and transitions\n- No external dependencies\n- Performance optimized\n\nThe design uses a professional color scheme and modern layout techniques while maintaining simplicity and ease of use. The CSS includes advanced features like CSS Grid, Flexbox, custom properties, and smooth animations. The JavaScript handles form validation, smooth scrolling, and mobile menu functionality."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 280,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3689
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7d9b7a9
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# fixitpro.scroll.pub
+Website generated by Claude from prompt: I want to a website for my handyman business.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..704d2e4
--- /dev/null
+++ b/script.js
@@ -0,0 +1,70 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Mobile Menu Toggle
+ const menuBtn = document.querySelector('.mobile-menu-btn');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuBtn.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ menuBtn.classList.toggle('active');
+ });
+
+ // Smooth Scrolling 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',
+ block: 'start'
+ });
+ // Close mobile menu if open
+ navLinks.classList.remove('active');
+ menuBtn.classList.remove('active');
+ }
+ });
+ });
+
+ // Form Submission Handler
+ const contactForm = document.getElementById('contact-form');
+ if (contactForm) {
+ contactForm.addEventListener('submit', function(e) {
+ e.preventDefault();
+ // Add form validation
+ const name = document.getElementById('name').value;
+ const email = document.getElementById('email').value;
+ const phone = document.getElementById('phone').value;
+ const message = document.getElementById('message').value;
+
+ if (name && email && phone && message) {
+ // Here you would typically send the form data to a server
+ alert('Thank you for your message! We will contact you soon.');
+ contactForm.reset();
+ } else {
+ alert('Please fill in all fields.');
+ }
+ });
+ }
+
+ // Scroll-based Navigation Highlight
+ window.addEventListener('scroll', function() {
+ const sections = document.querySelectorAll('section');
+ const navLinks = document.querySelectorAll('.nav-links a');
+
+ let current = '';
+ sections.forEach(section => {
+ const sectionTop = section.offsetTop;
+ const sectionHeight = section.clientHeight;
+ if (pageYOffset >= (sectionTop - sectionHeight/3)) {
+ current = section.getAttribute('id');
+ }
+ });
+
+ navLinks.forEach(link => {
+ link.classList.remove('active');
+ if (link.getAttribute('href').slice(1) === current) {
+ link.classList.add('active');
+ }
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..71ac11a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,232 @@
+:root {
+ --primary-color: #2c3e50;
+ --secondary-color: #e74c3c;
+ --text-color: #333;
+ --light-bg: #f5f6fa;
+ --white: #ffffff;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+}
+
+/* Navigation */
+.navbar {
+ position: fixed;
+ width: 100%;
+ top: 0;
+ background: var(--white);
+ padding: 1rem 5%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ z-index: 1000;
+}
+
+.logo {
+ font-size: 1.8rem;
+ 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(--secondary-color);
+}
+
+/* Hero Section */
+.hero {
+ height: 100vh;
+ background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.8)),
+ url('data:image/svg+xml,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="%232c3e50"/></svg>');
+ background-size: cover;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: var(--white);
+}
+
+.hero-content h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ animation: fadeInUp 1s ease;
+}
+
+.hero-content p {
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+ animation: fadeInUp 1s ease 0.2s;
+}
+
+/* Services Section */
+.services {
+ padding: 5rem 5%;
+ background: var(--light-bg);
+}
+
+.service-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 3rem;
+}
+
+.service-card {
+ background: var(--white);
+ padding: 2rem;
+ border-radius: 10px;
+ text-align: center;
+ transition: var(--transition);
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+
+.service-card:hover {
+ transform: translateY(-10px);
+}
+
+.service-card .icon {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+/* Contact Form */
+.contact {
+ padding: 5rem 5%;
+}
+
+.contact-form {
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+input, textarea {
+ width: 100%;
+ padding: 1rem;
+ border: 2px solid #ddd;
+ border-radius: 5px;
+ transition: var(--transition);
+}
+
+input:focus, textarea:focus {
+ border-color: var(--secondary-color);
+ outline: none;
+}
+
+/* Footer */
+footer {
+ background: var(--primary-color);
+ color: var(--white);
+ padding: 3rem 5%;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+}
+
+/* Buttons */
+.cta-button, .submit-button {
+ display: inline-block;
+ padding: 1rem 2rem;
+ background: var(--secondary-color);
+ color: var(--white);
+ text-decoration: none;
+ border-radius: 5px;
+ border: none;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.cta-button:hover, .submit-button:hover {
+ background: #c0392b;
+ transform: translateY(-2px);
+}
+
+/* Mobile Menu */
+.mobile-menu-btn {
+ display: none;
+ flex-direction: column;
+ gap: 6px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 5px;
+}
+
+.mobile-menu-btn span {
+ width: 30px;
+ height: 3px;
+ background: var(--primary-color);
+ transition: var(--transition);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
+ .mobile-menu-btn {
+ display: flex;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ background: var(--white);
+ flex-direction: column;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .hero-content h1 {
+ font-size: 2.5rem;
+ }
+
+ .hero-content p {
+ font-size: 1.2rem;
+ }
+}