Update src/app/page.tsx

Merge version_16 into main

src/app/cart/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import ProductCartItem from '@/components/ecommerce/cart/ProductCartItem';
+import { useState } from 'react';
+
+export default function CartPage() {
+  const [cartItems, setCartItems] = useState([
+    { id: "1", name: "Supernova Margherita", price: "24", quantity: 1, imageSrc: "http://img.b2bpic.net/free-photo/close-up-street-food-neon-light_23-2151571778.jpg" }
+  ]);
+
+  const handleRemove = (id: string) => setCartItems(cartItems.filter(i => i.id !== id));
+
+  return (
+    <ThemeProvider borderRadius="soft" contentWidth="medium" background="blurBottom">
+      <ReactLenis root>
+        <NavbarStyleApple 
+          navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/#about" }, { name: "Menu", id: "/#menu" }, { name: "Cart", id: "/cart" }]} 
+          brandName="Cosmic Crust" 
+        />
+        <main className="py-24 px-6">
+          <h1 className="text-4xl font-bold mb-8">Your Cart</h1>
+          <div className="space-y-4">
+            {cartItems.map(item => (
+              <ProductCartItem key={item.id} item={{ ...item, price: item.price + " Credits" }} onRemove={handleRemove} />
+            ))}
+            {cartItems.length === 0 && <p>Your cart is empty.</p>}
+          </div>
+          <div className="mt-8 flex justify-end">
+            <a href="/checkout" className="px-6 py-3 bg-primary text-white rounded-full">Proceed to Checkout</a>
+          </div>
+        </main>
+        <FooterLogoEmphasis 
+          columns={[{ items: [{ label: "Home", href: "/" }] }]} 
+          logoText="Cosmic Crust" 
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/checkout/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider borderRadius="soft" contentWidth="medium" background="blurBottom">
+      <ReactLenis root>
+        <NavbarStyleApple 
+          navItems={[{ name: "Home", id: "/" }, { name: "Cart", id: "/cart" }, { name: "Checkout", id: "/checkout" }]} 
+          brandName="Cosmic Crust" 
+        />
+        <main className="py-24 px-6">
+          <h1 className="text-4xl font-bold mb-8">Checkout</h1>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            <div>
+              <h2 className="text-2xl font-semibold mb-4">Shipping Information</h2>
+              <form className="space-y-4">
+                <input type="text" placeholder="Full Name" className="w-full p-3 border rounded" />
+                <input type="email" placeholder="Email Address" className="w-full p-3 border rounded" />
+                <textarea placeholder="Shipping Address" className="w-full p-3 border rounded" />
+              </form>
+            </div>
+            <div>
+              <h2 className="text-2xl font-semibold mb-4">Order Summary</h2>
+              <div className="bg-gray-100 p-6 rounded">
+                <div className="flex justify-between py-2"><span>Subtotal</span><span>24 Credits</span></div>
+                <div className="flex justify-between py-2 border-t font-bold"><span>Total</span><span>24 Credits</span></div>
+                <button className="w-full mt-6 py-3 bg-primary text-white rounded-full">Complete Order</button>
+              </div>
+            </div>
+          </div>
+        </main>
+        <FooterLogoEmphasis 
+          columns={[{ items: [{ label: "Home", href: "/" }] }]} 
+          logoText="Cosmic Crust" 
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/menu/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function MenuPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="smallMedium"
+        sizing="medium"
+        background="blurBottom"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+                navItems={[
+                    { name: "Home", id: "/" },
+                    { name: "About", id: "/about" },
+                    { name: "Menu", id: "/menu" },
+                    { name: "Pricing", id: "/pricing" },
+                    { name: "Contact", id: "/contact" },
+                ]}
+                brandName="Cosmic Crust"
+            />
+        </div>
+
+        <div id="menu" data-section="menu" className="py-20">
+            <ProductCardTwo
+                animationType="blur-reveal"
+                textboxLayout="split"
+                gridVariant="asymmetric-60-wide-40-narrow"
+                useInvertedBackground={false}
+                title="The Galactic Menu"
+                description="Explore our range of futuristic pizzas."
+                products={[
+                    { id: "1", brand: "Classic", name: "Nebula Margherita", price: "24 CAD", rating: 5, reviewCount: "10k+", imageSrc: "http://img.b2bpic.net/free-photo/close-up-street-food-neon-light_23-2151571778.jpg" },
+                    { id: "2", brand: "Premium", name: "Titan Pepperoni", price: "28 CAD", rating: 4, reviewCount: "8k+", imageSrc: "http://img.b2bpic.net/free-photo/delicious-pizza-indoors_23-2150901007.jpg" }
+                ]}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+                columns={[
+                    { items: [{ label: "About", href: "/about" }, { label: "Menu", href: "/menu" }, { label: "Pricing", href: "/pricing" }, { label: "Privacy Policy", href: "#" }] },
+                    { items: [{ label: "Contact", href: "/contact" }, { label: "Careers", href: "#" }, { label: "Locations", href: "#" }] }
+                ]}
+                logoText="Cosmic Crust"
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
@@ -31,10 +31,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        { name: "Home", id: "hero" },
-        { name: "About", id: "about" },
-        { name: "Menu", id: "menu" },
-        { name: "Contact", id: "contact" },
+        { name: "Home", id: "/" },
+        { name: "About", id: "#about" },
+        { name: "Menu", id: "#menu" },
+        { name: "Pricing", id: "/pricing" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="Cosmic Crust"
     />
@@ -47,19 +48,11 @@ export default function LandingPage() {
       description="Experience quantum-leavened crusts and nebula-infused ingredients delivered from the stars to your plate."
       leftCarouselItems={[
         { imageSrc: "http://img.b2bpic.net/free-photo/close-up-street-food-neon-light_23-2151571655.jpg", imageAlt: "sci-fi spaceship interior" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/futuristic-spaceship-corridor-with-glowing-yellow-neon-lights-generative-ai_191095-1744.jpg", imageAlt: "sci-fi spaceship interior" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2345.jpg", imageAlt: "sci-fi spaceship interior" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/control-table-spacecraft-from-inside_23-2151828141.jpg", imageAlt: "sci-fi spaceship interior" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-street-food-neon-light_23-2151571784.jpg", imageAlt: "sci-fi spaceship interior" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-high-tech-earth_23-2151100396.jpg", imageAlt: "sci-fi spaceship interior" }
+        { imageSrc: "http://img.b2bpic.net/free-photo/futuristic-spaceship-corridor-with-glowing-yellow-neon-lights-generative-ai_191095-1744.jpg", imageAlt: "sci-fi spaceship interior" }
       ]}
       rightCarouselItems={[
         { imageSrc: "http://img.b2bpic.net/free-photo/close-up-street-food-neon-light_23-2151571790.jpg", imageAlt: "sci-fi spaceship interior" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-street-food-neon-light_23-2151571682.jpg", imageAlt: "sci-fi spaceship interior" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/control-table-spacecraft_23-2151828233.jpg", imageAlt: "sci-fi spaceship interior" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/futuristic-moon-background_23-2150930760.jpg", imageAlt: "sci-fi spaceship interior" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232849.jpg", imageAlt: "sci-fi spaceship interior" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/cosmic-background-with-golden-neon-laser-lights_181624-27799.jpg", imageAlt: "sci-fi spaceship interior" }
+        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-street-food-neon-light_23-2151571682.jpg", imageAlt: "sci-fi spaceship interior" }
       ]}
       buttons={[{ text: "Order Interstellar", href: "#menu" }]}
     />
@@ -84,8 +77,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         { id: "1", brand: "Cosmic", name: "Supernova Margherita", price: "24 Credits", rating: 5, reviewCount: "10k+", imageSrc: "http://img.b2bpic.net/free-photo/close-up-street-food-neon-light_23-2151571778.jpg", imageAlt: "sci-fi futuristic pizza" },
-        { id: "2", brand: "Cosmic", name: "Titan Pepperoni Blast", price: "28 Credits", rating: 4, reviewCount: "8k+", imageSrc: "http://img.b2bpic.net/free-photo/delicious-pizza-indoors_23-2150901007.jpg", imageAlt: "cyberpunk style food" },
-        { id: "3", brand: "Cosmic", name: "Nebula Mushroom Delight", price: "26 Credits", rating: 5, reviewCount: "5k+", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-3d-alien-world_23-2151879021.jpg", imageAlt: "gourmet alien food" }
+        { id: "2", brand: "Cosmic", name: "Titan Pepperoni Blast", price: "28 Credits", rating: 4, reviewCount: "8k+", imageSrc: "http://img.b2bpic.net/free-photo/delicious-pizza-indoors_23-2150901007.jpg", imageAlt: "cyberpunk style food" }
       ]}
       title="Galactic Specials"
       description="Our signature pizzas from the deepest sectors of the culinary universe."
@@ -100,8 +92,7 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         { title: "Laser Ovens", description: "Precision cooking at 4000 degrees.", imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-interior-design_23-2151821280.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/futuristic-kitchen-interior-design_23-2151821284.jpg", buttonText: "See Tech" },
-        { title: "Drone Delivery", description: "Sub-orbital delivery in under 5 minutes.", imageSrc: "http://img.b2bpic.net/free-photo/adult-person-interacting-with-futuristic-delivery-robot_23-2151210956.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-city-street-night-with-neon-lights-futuristic-aesthetic_23-2151488733.jpg", buttonText: "See Tech" },
-        { title: "Nano-Ingredients", description: "Molecularly optimized nutrition and taste.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-arrangement-spanish-food_23-2149157431.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/person-using-ar-technology-their-daily-occupation_23-2151137301.jpg", buttonText: "See Tech" }
+        { title: "Drone Delivery", description: "Sub-orbital delivery in under 5 minutes.", imageSrc: "http://img.b2bpic.net/free-photo/adult-person-interacting-with-futuristic-delivery-robot_23-2151210956.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-city-street-night-with-neon-lights-futuristic-aesthetic_23-2151488733.jpg", buttonText: "See Tech" }
       ]}
       title="Quantum Culinary Tech"
       description="Technological advancements that ensure every slice reaches peak cosmic flavor."
@@ -114,8 +105,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         { id: "1", title: "Best Pizza in Sector 7", quote: "The Supernova Margherita is genuinely stellar. I order it every cycle.", name: "Zax the Cyborg", role: "Explorer", imageSrc: "http://img.b2bpic.net/free-photo/teenager-light-movie-projector_23-2149489842.jpg" },
-        { id: "2", title: "Speedy Delivery", quote: "Drone arrived exactly as my thrusters cooled down. Perfectly hot.", name: "Captain Vega", role: "Pilot", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232843.jpg" },
-        { id: "3", title: "Lab Tested Quality", quote: "The ingredients are molecularly perfect. A triumph of taste.", name: "Dr. Aris", role: "Scientist", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-with-delicious-pizza_23-2150873888.jpg" }
+        { id: "2", title: "Speedy Delivery", quote: "Drone arrived exactly as my thrusters cooled down. Perfectly hot.", name: "Captain Vega", role: "Pilot", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232843.jpg" }
       ]}
       title="Interstellar Feedback"
       description="Don't just take our word for it—listen to our planetary pioneers."
@@ -129,8 +119,7 @@ export default function LandingPage() {
       useInvertedBackground={true}
       metrics={[
         { id: "1", value: "1M+", title: "Pizzas Delivered", description: "Across multiple systems", imageSrc: "http://img.b2bpic.net/free-photo/view-delicious-anime-style-pizza_23-2151061958.jpg" },
-        { id: "2", value: "42", title: "Ingredients", description: "Sourced from 42 planets", imageSrc: "http://img.b2bpic.net/free-photo/assortment-healthy-vegetarian-food_23-2148908746.jpg" },
-        { id: "3", value: "99.9%", title: "Arrival Precision", description: "Sub-orbital accuracy", imageSrc: "http://img.b2bpic.net/free-photo/drones-exploring-dark-forest-with-blue-lights-futuristic-aesthetic_23-2152000922.jpg" }
+        { id: "2", value: "42", title: "Ingredients", description: "Sourced from 42 planets", imageSrc: "http://img.b2bpic.net/free-photo/assortment-healthy-vegetarian-food_23-2148908746.jpg" }
       ]}
       title="Space-Age Stats"
       description="Quantifying our journey through the culinary cosmos."
@@ -143,8 +132,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         { id: "1", title: "Do you deliver to Mars?", content: "Yes, standard sub-orbital rates apply." },
-        { id: "2", title: "Are ingredients organic?", content: "We use bio-engineered, optimized nutrients." },
-        { id: "3", title: "Can I request custom toppings?", content: "Custom atomic arrangements are available." }
+        { id: "2", title: "Are ingredients organic?", content: "We use bio-engineered, optimized nutrients." }
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038903.jpg"
       mediaAnimation="slide-up"
@@ -155,19 +143,20 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={true}
-      background={{ variant: "sparkles-gradient" }}
-      text="Ready to launch your appetite into orbit? Signal our command center for reservations or delivery orders."
-      buttons={[{ text: "Contact Command", href: "mailto:orders@cosmiccrust.space" }]}
+      <ContactCTA
+      tag="Canadian Support"
+      title="Need a slice of home?"
+      description="Our Canadian team is ready to serve you from our local base. Call +1 (555) 123-4567 or visit our Vancouver hub."
+      buttons={[{ text: "Call Now", href: "tel:+15551234567" }]}
+      background={{ variant: "plain" }}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
       columns={[
-        { items: [{ label: "About", href: "#about" }, { label: "Menu", href: "#menu" }, { label: "Privacy Policy", href: "#" }] },
-        { items: [{ label: "Contact", href: "#contact" }, { label: "Careers", href: "#" }, { label: "Locations", href: "#" }] }
+        { items: [{ label: "About", href: "#about" }, { label: "Menu", href: "#menu" }, { label: "Pricing", href: "/pricing" }, { label: "Privacy Policy", href: "#" }] },
+        { items: [{ label: "Contact", href: "/contact" }, { label: "Careers", href: "#" }, { label: "Locations", href: "#" }] }
       ]}
       logoText="Cosmic Crust"
     />

src/app/pricing/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+
+export default function PricingPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="smallMedium"
+        sizing="medium"
+        background="blurBottom"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/#about" },
+              { name: "Menu", id: "/#menu" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="Cosmic Crust"
+          />
+        </div>
+
+        <div id="pricing" data-section="pricing">
+          <PricingCardTwo
+            title="Interstellar Membership Tiers"
+            description="Choose the flight path that best suits your caloric trajectory."
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            plans={[
+              { id: "1", badge: "Cadet", price: "12 Credits", subtitle: "Essential planetary fuel", buttons: [{ text: "Select Plan", href: "#" }], features: ["Standard Crust", "Basic Toppings", "Sub-orbital Delivery"] },
+              { id: "2", badge: "Captain", price: "35 Credits", subtitle: "Pro-level exploration", buttons: [{ text: "Select Plan", href: "#" }], features: ["Nebula-Infused Crust", "Premium Alien Ingredients", "Priority Drone Delivery", "Molecule Optimization"] },
+              { id: "3", badge: "Admiral", price: "75 Credits", subtitle: "Total cosmic control", buttons: [{ text: "Select Plan", href: "#" }], features: ["Infinite Customization", "Quantum-Speed Delivery", "Personalized Flavor Mapping", "Direct Link to Command"] }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[
+              { items: [{ label: "Home", href: "/" }, { label: "About", href: "/#about" }, { label: "Menu", href: "/#menu" }, { label: "Pricing", href: "/pricing" }] },
+              { items: [{ label: "Contact", href: "/#contact" }, { label: "Careers", href: "#" }, { label: "Locations", href: "#" }] }
+            ]}
+            logoText="Cosmic Crust"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background: #f7f6f7;
+  --card: #ffffff;
+  --foreground: #0c1325;
+  --primary-cta: #0798ff;
+  --primary-cta-text: #f7f6f7;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #0c1325;
+  --accent: #93c7ff;
+  --background-accent: #a8cde8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);