add the pricing page now

components/footer.js

@@ -150,18 +150,16 @@ class CustomFooter extends HTMLElement {
                                 </a>
                             </div>
                         </div>
-
                         <div class="footer-col">
                             <h4>Product</h4>
                             <ul class="footer-links">
-                                <li><a href="#">Features</a></li>
-                                <li><a href="#">Integrations</a></li>
-                                <li><a href="#">Pricing</a></li>
+                                <li><a href="index.html#features">Features</a></li>
+                                <li><a href="index.html#integrations">Integrations</a></li>
+                                <li><a href="pricing.html">Pricing</a></li>
                                 <li><a href="#">Changelog</a></li>
                             </ul>
                         </div>
-
-                        <div class="footer-col">
+<div class="footer-col">
                             <h4>Resources</h4>
                             <ul class="footer-links">
                                 <li><a href="#">Documentation</a></li>

components/navbar.js

@@ -144,15 +144,13 @@ class CustomNavbar extends HTMLElement {
                             <i data-feather="box" class="text-indigo-500"></i>
                             <span class="logo-text">VortexCode</span>
                         </a>
-                        
                         <div class="nav-links">
-                            <a href="#features" class="nav-link">Features</a>
-                            <a href="#integrations" class="nav-link">Integrations</a>
-                            <a href="#api-docs" class="nav-link">Developers</a>
-                            <a href="#pricing" class="nav-link">Pricing</a>
+                            <a href="index.html#features" class="nav-link">Features</a>
+                            <a href="index.html#integrations" class="nav-link">Integrations</a>
+                            <a href="index.html#api-docs" class="nav-link">Developers</a>
+                            <a href="pricing.html" class="nav-link">Pricing</a>
                         </div>
-
-                        <div class="nav-actions">
+<div class="nav-actions">
                             <a href="#" class="btn-login">Log in</a>
                             <a href="#signup" class="btn-signup">Start Free Trial</a>
                         </div>
@@ -161,16 +159,15 @@ class CustomNavbar extends HTMLElement {
                             <i data-feather="menu"></i>
                         </button>
                     </div>
-                    
                     <div class="mobile-menu" id="mobileMenu">
-                        <a href="#features">Features</a>
-                        <a href="#integrations">Integrations</a>
-                        <a href="#api-docs">Developers</a>
-                        <a href="#pricing">Pricing</a>
+                        <a href="index.html#features">Features</a>
+                        <a href="index.html#integrations">Integrations</a>
+                        <a href="index.html#api-docs">Developers</a>
+                        <a href="pricing.html">Pricing</a>
                         <a href="#" class="btn-login">Log in</a>
-                        <a href="#signup" class="btn-signup" style="text-align:center;">Start Free Trial</a>
+                        <a href="index.html#signup" class="btn-signup" style="text-align:center;">Start Free Trial</a>
                     </div>
-                </div>
+</div>
             </nav>
         `;
 

index.html

@@ -96,16 +96,17 @@
             </div>
         </div>
     </section>
-
     <!-- Features Comparison Table -->
     <section id="features" class="py-24 relative">
         <div class="container mx-auto px-6">
             <div class="text-center mb-16">
                 <h2 class="text-3xl md:text-5xl font-bold mb-4">Choose Your Power</h2>
                 <p class="text-gray-400">Compare plans and find the perfect fit for your team.</p>
+                <a href="pricing.html" class="inline-flex items-center text-indigo-400 font-medium hover:text-indigo-300 transition-colors mt-4">
+                    View detailed pricing <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+                </a>
             </div>
-            
-            <div class="overflow-x-auto rounded-xl border border-dark-700 bg-dark-800/50 backdrop-blur-sm">
+<div class="overflow-x-auto rounded-xl border border-dark-700 bg-dark-800/50 backdrop-blur-sm">
                 <table class="w-full text-left border-collapse">
                     <thead>
                         <tr class="border-b border-dark-700 bg-dark-800">
@@ -152,16 +153,16 @@
                         <tr class="bg-dark-800/80">
                             <td class="p-6"></td>
                             <td class="p-6">
-                                <button class="w-full py-2 px-4 rounded border border-dark-600 text-white hover:border-indigo-500 transition-colors">Get Started</button>
+                                <a href="pricing.html" class="block w-full py-2 px-4 rounded border border-dark-600 text-white hover:border-indigo-500 transition-colors text-center">Get Started</a>
                             </td>
                             <td class="p-6">
-                                <button class="w-full py-2 px-4 rounded bg-purple-600 text-white font-medium hover:bg-purple-700 transition-colors shadow-lg shadow-purple-500/20">Get Pro</button>
+                                <a href="pricing.html" class="block w-full py-2 px-4 rounded bg-purple-600 text-white font-medium hover:bg-purple-700 transition-colors shadow-lg shadow-purple-500/20 text-center">Get Pro</a>
                             </td>
                             <td class="p-6">
-                                <button class="w-full py-2 px-4 rounded border border-dark-600 text-white hover:border-purple-500 transition-colors">Contact Sales</button>
+                                <a href="pricing.html" class="block w-full py-2 px-4 rounded border border-dark-600 text-white hover:border-purple-500 transition-colors text-center">Contact Sales</a>
                             </td>
                         </tr>
-                    </tbody>
+</tbody>
                 </table>
             </div>
         </div>

pricing.html

@@ -0,0 +1,420 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pricing - VortexCode</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        indigo: {
+                            400: '#818cf8',
+                            500: '#6366f1',
+                            600: '#4f46e5',
+                            900: '#312e81',
+                        },
+                        purple: {
+                            500: '#a855f7',
+                            600: '#9333ea',
+                        },
+                        dark: {
+                            900: '#0f172a',
+                            800: '#1e293b',
+                            700: '#334155',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-dark-900 text-gray-100 font-sans antialiased overflow-x-hidden">
+
+    <!-- Navbar Component -->
+    <custom-navbar></custom-navbar>
+
+    <!-- Hero Section -->
+    <section class="relative pt-32 pb-20 lg:pt-40 lg:pb-28 overflow-hidden">
+        <div class="absolute inset-0 z-0">
+            <div class="absolute inset-0 bg-gradient-to-br from-indigo-900/30 via-dark-900 to-purple-900/20"></div>
+            <div class="absolute top-20 right-0 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl"></div>
+            <div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
+        </div>
+
+        <div class="container mx-auto px-6 relative z-10 text-center">
+            <div class="inline-block px-4 py-1.5 mb-6 border border-indigo-500/30 rounded-full bg-indigo-500/10 backdrop-blur-sm">
+                <span class="text-indigo-300 text-sm font-medium tracking-wide">💎 Simple, transparent pricing</span>
+            </div>
+            <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
+                Choose the plan that <br>
+                <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-500">fits your needs</span>
+            </h1>
+            <p class="text-lg md:text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
+                Start free and scale as you grow. No hidden fees, no surprises. Cancel anytime.
+            </p>
+            <div class="flex items-center justify-center gap-4">
+                <span class="text-gray-400">Monthly</span>
+                <button id="billingToggle" class="w-14 h-8 bg-indigo-600 rounded-full relative transition-colors">
+                    <span class="absolute top-1 right-1 w-6 h-6 bg-white rounded-full transition-transform"></span>
+                </button>
+                <span class="text-gray-400">Yearly <span class="text-green-400 text-sm font-medium">(Save 20%)</span></span>
+            </div>
+        </div>
+    </section>
+
+    <!-- Pricing Cards -->
+    <section class="py-16 relative">
+        <div class="container mx-auto px-6">
+            <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+                <!-- Starter Plan -->
+                <div class="bg-dark-800 border border-dark-700 rounded-2xl p-8 hover:border-indigo-500/50 transition-all duration-300">
+                    <div class="mb-8">
+                        <h3 class="text-xl font-bold text-white mb-2">Starter</h3>
+                        <p class="text-gray-400 text-sm">Perfect for individuals and side projects</p>
+                    </div>
+                    <div class="mb-8">
+                        <span class="text-4xl font-bold text-white" data-monthly="$0" data-yearly="$0">$0</span>
+                        <span class="text-gray-400">/month</span>
+                    </div>
+                    <a href="#signup" class="block w-full py-3 px-6 border border-dark-600 text-white rounded-lg font-medium hover:bg-dark-700 transition-colors text-center mb-8">
+                        Get Started Free
+                    </a>
+                    <ul class="space-y-4">
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">Up to 3 projects</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">1 team member</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">Basic analytics</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">Community support</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="x" class="w-5 h-5 text-red-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-500">API access</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="x" class="w-5 h-5 text-red-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-500">Custom integrations</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Pro Plan -->
+                <div class="bg-gradient-to-b from-indigo-900/20 to-dark-800 border-2 border-indigo-500/50 rounded-2xl p-8 relative transform md:-translate-y-4 transition-all duration-300">
+                    <div class="absolute -top-4 left-1/2 -translate-x-1/2">
+                        <span class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white text-sm font-semibold px-4 py-1 rounded-full">Most Popular</span>
+                    </div>
+                    <div class="mb-8">
+                        <h3 class="text-xl font-bold text-white mb-2">Pro</h3>
+                        <p class="text-gray-400 text-sm">For growing teams and startups</p>
+                    </div>
+                    <div class="mb-8">
+                        <span class="text-4xl font-bold text-white" data-monthly="$29" data-yearly="$23">$29</span>
+                        <span class="text-gray-400">/month</span>
+                    </div>
+                    <a href="#signup" class="block w-full py-3 px-6 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg font-medium hover:shadow-lg hover:shadow-indigo-500/30 transition-all text-center mb-8">
+                        Start Pro Trial
+                    </a>
+                    <ul class="space-y-4">
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">Unlimited projects</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">Up to 10 team members</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">Advanced analytics</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">Priority email support</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">Full API access</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">100+ integrations</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Enterprise Plan -->
+                <div class="bg-dark-800 border border-dark-700 rounded-2xl p-8 hover:border-purple-500/50 transition-all duration-300">
+                    <div class="mb-8">
+                        <h3 class="text-xl font-bold text-white mb-2">Enterprise</h3>
+                        <p class="text-gray-400 text-sm">For large organizations and scale-ups</p>
+                    </div>
+                    <div class="mb-8">
+                        <span class="text-4xl font-bold text-white" data-monthly="$99" data-yearly="$79">$99</span>
+                        <span class="text-gray-400">/month</span>
+                    </div>
+                    <a href="#signup" class="block w-full py-3 px-6 border border-dark-600 text-white rounded-lg font-medium hover:bg-dark-700 transition-colors text-center mb-8">
+                        Contact Sales
+                    </a>
+                    <ul class="space-y-4">
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">Unlimited everything</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">Unlimited team members</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">Custom analytics & reports</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">24/7 dedicated support</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">Custom integrations</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="check" class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300">SSO & advanced security</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Feature Comparison Table -->
+    <section class="py-24 bg-dark-800/30">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-5xl font-bold mb-4">Compare all features</h2>
+                <p class="text-gray-400">Everything you need to make the right decision</p>
+            </div>
+            
+            <div class="overflow-x-auto rounded-xl border border-dark-700 bg-dark-800/50 backdrop-blur-sm">
+                <table class="w-full text-left border-collapse">
+                    <thead>
+                        <tr class="border-b border-dark-700 bg-dark-800">
+                            <th class="p-6 text-lg font-semibold">Features</th>
+                            <th class="p-6 text-lg font-semibold text-indigo-400">Starter</th>
+                            <th class="p-6 text-lg font-semibold text-purple-400 relative">
+                                Pro
+                                <span class="absolute top-2 right-2 text-xs bg-purple-600 text-white px-2 py-0.5 rounded-full">Popular</span>
+                            </th>
+                            <th class="p-6 text-lg font-semibold">Enterprise</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-dark-700">
+                        <tr class="hover:bg-dark-700/30 transition-colors">
+                            <td class="p-6 text-gray-300 font-medium">Projects</td>
+                            <td class="p-6 text-gray-400">Up to 3</td>
+                            <td class="p-6 text-white">Unlimited</td>
+                            <td class="p-6 text-white">Unlimited</td>
+                        </tr>
+                        <tr class="hover:bg-dark-700/30 transition-colors">
+                            <td class="p-6 text-gray-300 font-medium">Team Members</td>
+                            <td class="p-6 text-gray-400">1</td>
+                            <td class="p-6 text-white">Up to 10</td>
+                            <td class="p-6 text-white">Unlimited</td>
+                        </tr>
+                        <tr class="hover:bg-dark-700/30 transition-colors">
+                            <td class="p-6 text-gray-300 font-medium">Storage</td>
+                            <td class="p-6 text-gray-400">1 GB</td>
+                            <td class="p-6 text-white">50 GB</td>
+                            <td class="p-6 text-white">Unlimited</td>
+                        </tr>
+                        <tr class="hover:bg-dark-700/30 transition-colors">
+                            <td class="p-6 text-gray-300 font-medium">API Access</td>
+                            <td class="p-6 text-center"><i data-feather="x" class="w-5 h-5 text-red-400 mx-auto"></i></td>
+                            <td class="p-6 text-center"><i data-feather="check" class="w-5 h-5 text-green-400 mx-auto"></i></td>
+                            <td class="p-6 text-center"><i data-feather="check" class="w-5 h-5 text-green-400 mx-auto"></i></td>
+                        </tr>
+                        <tr class="hover:bg-dark-700/30 transition-colors">
+                            <td class="p-6 text-gray-300 font-medium">Advanced Analytics</td>
+                            <td class="p-6 text-center"><i data-feather="x" class="w-5 h-5 text-red-400 mx-auto"></i></td>
+                            <td class="p-6 text-center"><i data-feather="check" class="w-5 h-5 text-green-400 mx-auto"></i></td>
+                            <td class="p-6 text-center"><i data-feather="check" class="w-5 h-5 text-green-400 mx-auto"></i></td>
+                        </tr>
+                        <tr class="hover:bg-dark-700/30 transition-colors">
+                            <td class="p-6 text-gray-300 font-medium">Custom Integrations</td>
+                            <td class="p-6 text-center"><i data-feather="x" class="w-5 h-5 text-red-400 mx-auto"></i></td>
+                            <td class="p-6 text-center"><i data-feather="x" class="w-5 h-5 text-red-400 mx-auto"></i></td>
+                            <td class="p-6 text-center"><i data-feather="check" class="w-5 h-5 text-green-400 mx-auto"></i></td>
+                        </tr>
+                        <tr class="hover:bg-dark-700/30 transition-colors">
+                            <td class="p-6 text-gray-300 font-medium">24/7 Priority Support</td>
+                            <td class="p-6 text-center"><i data-feather="x" class="w-5 h-5 text-red-400 mx-auto"></i></td>
+                            <td class="p-6 text-center"><i data-feather="x" class="w-5 h-5 text-red-400 mx-auto"></i></td>
+                            <td class="p-6 text-center"><i data-feather="check" class="w-5 h-5 text-green-400 mx-auto"></i></td>
+                        </tr>
+                        <tr class="hover:bg-dark-700/30 transition-colors">
+                            <td class="p-6 text-gray-300 font-medium">SSO / SAML</td>
+                            <td class="p-6 text-center"><i data-feather="x" class="w-5 h-5 text-red-400 mx-auto"></i></td>
+                            <td class="p-6 text-center"><i data-feather="x" class="w-5 h-5 text-red-400 mx-auto"></i></td>
+                            <td class="p-6 text-center"><i data-feather="check" class="w-5 h-5 text-green-400 mx-auto"></i></td>
+                        </tr>
+                        <tr class="bg-dark-800/80">
+                            <td class="p-6"></td>
+                            <td class="p-6">
+                                <a href="#signup" class="block w-full py-2 px-4 rounded border border-dark-600 text-white hover:border-indigo-500 transition-colors text-center">Get Started</a>
+                            </td>
+                            <td class="p-6">
+                                <a href="#signup" class="block w-full py-2 px-4 rounded bg-purple-600 text-white font-medium hover:bg-purple-700 transition-colors shadow-lg shadow-purple-500/20 text-center">Get Pro</a>
+                            </td>
+                            <td class="p-6">
+                                <a href="#signup" class="block w-full py-2 px-4 rounded border border-dark-600 text-white hover:border-purple-500 transition-colors text-center">Contact Sales</a>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+
+    <!-- FAQ Section -->
+    <section class="py-24">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-5xl font-bold mb-4">Frequently Asked Questions</h2>
+                <p class="text-gray-400">Got questions? We've got answers.</p>
+            </div>
+
+            <div class="max-w-3xl mx-auto space-y-4">
+                <!-- FAQ Item 1 -->
+                <details class="bg-dark-800 border border-dark-700 rounded-xl group">
+                    <summary class="p-6 cursor-pointer flex justify-between items-center font-semibold text-white hover:text-indigo-400 transition-colors">
+                        Can I change plans later?
+                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform group-open:rotate-180"></i>
+                    </summary>
+                    <div class="px-6 pb-6 text-gray-400">
+                        Absolutely! You can upgrade or downgrade your plan at any time. When you upgrade, you'll be charged prorated amounts for the remainder of your billing cycle.
+                    </div>
+                </details>
+
+                <!-- FAQ Item 2 -->
+                <details class="bg-dark-800 border border-dark-700 rounded-xl group">
+                    <summary class="p-6 cursor-pointer flex justify-between items-center font-semibold text-white hover:text-indigo-400 transition-colors">
+                        What payment methods do you accept?
+                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform group-open:rotate-180"></i>
+                    </summary>
+                    <div class="px-6 pb-6 text-gray-400">
+                        We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for Enterprise plans.
+                    </div>
+                </details>
+
+                <!-- FAQ Item 3 -->
+                <details class="bg-dark-800 border border-dark-700 rounded-xl group">
+                    <summary class="p-6 cursor-pointer flex justify-between items-center font-semibold text-white hover:text-indigo-400 transition-colors">
+                        Is there a free trial?
+                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform group-open:rotate-180"></i>
+                    </summary>
+                    <div class="px-6 pb-6 text-gray-400">
+                        Yes! All paid plans come with a 14-day free trial. No credit card required to start. You'll have full access to all features during the trial period.
+                    </div>
+                </details>
+
+                <!-- FAQ Item 4 -->
+                <details class="bg-dark-800 border border-dark-700 rounded-xl group">
+                    <summary class="p-6 cursor-pointer flex justify-between items-center font-semibold text-white hover:text-indigo-400 transition-colors">
+                        Do you offer refunds?
+                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform group-open:rotate-180"></i>
+                    </summary>
+                    <div class="px-6 pb-6 text-gray-400">
+                        We offer a 30-day money-back guarantee for all paid plans. If you're not satisfied, contact our support team within 30 days for a full refund.
+                    </div>
+                </details>
+
+                <!-- FAQ Item 5 -->
+                <details class="bg-dark-800 border border-dark-700 rounded-xl group">
+                    <summary class="p-6 cursor-pointer flex justify-between items-center font-semibold text-white hover:text-indigo-400 transition-colors">
+                        Can I cancel my subscription anytime?
+                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform group-open:rotate-180"></i>
+                    </summary>
+                    <div class="px-6 pb-6 text-gray-400">
+                        Yes, you can cancel your subscription at any time. Your access will continue until the end of your current billing period. No questions asked.
+                    </div>
+                </details>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section id="signup" class="py-24 relative overflow-hidden">
+        <div class="absolute inset-0 z-0">
+            <div class="absolute inset-0 bg-gradient-to-t from-indigo-900/20 to-transparent pointer-events-none"></div>
+        </div>
+        <div class="container mx-auto px-6 relative z-10">
+            <div class="bg-dark-800 border border-indigo-500/30 rounded-3xl p-8 md:p-16 text-center max-w-4xl mx-auto shadow-2xl shadow-indigo-500/10">
+                <h2 class="text-3xl md:text-5xl font-bold mb-6">Ready to get started?</h2>
+                <p class="text-gray-400 text-lg mb-10 max-w-2xl mx-auto">Join thousands of developers building the future. Start your free trial today.</p>
+                
+                <form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
+                    <input type="email" placeholder="Enter your work email" class="flex-1 bg-dark-900 border border-dark-700 text-white px-6 py-4 rounded-lg focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all">
+                    <button type="button" class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold rounded-lg hover:shadow-lg hover:shadow-indigo-500/30 transition-all transform hover:-translate-y-0.5">
+                        Get Started
+                    </button>
+                </form>
+                <p class="text-xs text-gray-500 mt-4">By signing up, you agree to our Terms of Service and Privacy Policy.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer Component -->
+    <custom-footer></custom-footer>
+
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    
+    <!-- Global Script -->
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+
+        // Billing Toggle Logic
+        const billingToggle = document.getElementById('billingToggle');
+        const priceElements = document.querySelectorAll('[data-monthly]');
+        let isYearly = false;
+
+        billingToggle.addEventListener('click', () => {
+            isYearly = !isYearly;
+            const toggleBtn = billingToggle.querySelector('span');
+            
+            if (isYearly) {
+                toggleBtn.style.transform = 'translateX(-24px)';
+                billingToggle.classList.remove('bg-indigo-600');
+                billingToggle.classList.add('bg-purple-600');
+                priceElements.forEach(el => {
+                    el.textContent = el.dataset.yearly;
+                });
+            } else {
+                toggleBtn.style.transform = 'translateX(0)';
+                billingToggle.classList.remove('bg-purple-600');
+                billingToggle.classList.add('bg-indigo-600');
+                priceElements.forEach(el => {
+                    el.textContent = el.dataset.monthly;
+                });
+            }
+        });
+    </script>
+</body>
+</html>