Update src/app/page.tsx

Merge version_8 into main

src/app/layout.tsx

@@ -5,7 +5,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Efficient Ads - Agency-Quality Ad Creatives in 48 Hours",  description: "Get agency-quality ad creatives delivered in 48 hours at half the cost. Perfect for agencies, brands, and creators."};
+  title: "Efficient Ads - Agency-Quality Ad Creatives in 48 Hours",  description: "Get agency-quality ad creatives delivered in 48 hours at half the cost. Perfect for agencies, brands, and creators."
+};
 
 export default function RootLayout({
   children,
@@ -1384,4 +1385,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -12,8 +12,11 @@ import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
 import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
 import { BarChart3, Briefcase, CreditCard, Mail, Package, Palette, Shield, ShoppingCart, TrendingUp, Users, Zap, Sparkles, Database, Crown, Play, Image, Layers, Clock, CheckCircle, HelpCircle, Calendar } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [showComparison, setShowComparison] = useState(false);
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-bubble"
@@ -208,6 +211,73 @@ export default function LandingPage() {
       </div>
 
       <div id="pricing" data-section="pricing">
+        <div className="relative">
+          <div className="flex justify-center mb-6">
+            <button
+              onClick={() => setShowComparison(!showComparison)}
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-button text-primary hover:opacity-80 transition-opacity"
+              aria-label="Toggle feature comparison"
+            >
+              <CheckCircle size={18} />
+              <span>{showComparison ? "Hide Comparison" : "Show Plan Comparison"}</span>
+            </button>
+          </div>
+          {showComparison && (
+            <div className="mb-8 p-6 rounded-lg bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20">
+              <h3 className="text-lg font-semibold mb-4 text-foreground">Feature Comparison</h3>
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-accent/20">
+                      <th className="text-left py-2 px-3 font-semibold">Feature</th>
+                      <th className="text-center py-2 px-3 font-semibold">Starter</th>
+                      <th className="text-center py-2 px-3 font-semibold">Growth</th>
+                      <th className="text-center py-2 px-3 font-semibold">Enterprise</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr className="border-b border-accent/10">
+                      <td className="py-3 px-3">Projects/Month</td>
+                      <td className="text-center py-3 px-3">4</td>
+                      <td className="text-center py-3 px-3">Unlimited</td>
+                      <td className="text-center py-3 px-3">Unlimited</td>
+                    </tr>
+                    <tr className="border-b border-accent/10">
+                      <td className="py-3 px-3">Creatives/Month</td>
+                      <td className="text-center py-3 px-3">Included</td>
+                      <td className="text-center py-3 px-3">30+</td>
+                      <td className="text-center py-3 px-3">Unlimited</td>
+                    </tr>
+                    <tr className="border-b border-accent/10">
+                      <td className="py-3 px-3">Turnaround Time</td>
+                      <td className="text-center py-3 px-3">48 hours</td>
+                      <td className="text-center py-3 px-3">24 hours</td>
+                      <td className="text-center py-3 px-3">24 hours</td>
+                    </tr>
+                    <tr className="border-b border-accent/10">
+                      <td className="py-3 px-3">Account Manager</td>
+                      <td className="text-center py-3 px-3">-</td>
+                      <td className="text-center py-3 px-3">✓</td>
+                      <td className="text-center py-3 px-3">✓</td>
+                    </tr>
+                    <tr className="border-b border-accent/10">
+                      <td className="py-3 px-3">API Access</td>
+                      <td className="text-center py-3 px-3">-</td>
+                      <td className="text-center py-3 px-3">-</td>
+                      <td className="text-center py-3 px-3">✓</td>
+                    </tr>
+                    <tr>
+                      <td className="py-3 px-3">24/7 Support</td>
+                      <td className="text-center py-3 px-3">-</td>
+                      <td className="text-center py-3 px-3">-</td>
+                      <td className="text-center py-3 px-3">✓</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </div>
         <PricingCardEight
           title="Simple, Transparent Pricing"
           description="Choose the plan that fits your creative needs. Upgrade anytime."
@@ -245,9 +315,6 @@ export default function LandingPage() {
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          buttons={[
-            { text: "Compare All Plans", href: "#features" }
-          ]}
           buttonAnimation="opacity"
         />
       </div>
@@ -410,4 +477,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}