Update src/app/styles/variables.css

Merge version_17 into main

src/app/cart/page.tsx

@@ -1,43 +0,0 @@
-"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

@@ -1,44 +0,0 @@
-"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

@@ -1,64 +0,0 @@
-"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 ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactText from '@/components/sections/contact/ContactText';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
@@ -21,10 +21,10 @@ export default function LandingPage() {
         borderRadius="soft"
         contentWidth="smallMedium"
         sizing="medium"
-        background="blurBottom"
-        cardStyle="gradient-mesh"
-        primaryButtonStyle="radial-glow"
-        secondaryButtonStyle="layered"
+        background="none"
+        cardStyle="solid"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
         headingFontWeight="bold"
     >
       <ReactLenis root>
@@ -35,35 +35,26 @@ export default function LandingPage() {
         { name: "About", id: "#about" },
         { name: "Menu", id: "#menu" },
         { name: "Pricing", id: "/pricing" },
-        { name: "Contact", id: "/contact" },
+        { name: "Contact", id: "#contact" },
       ]}
-      brandName="Cosmic Crust"
+      brandName="Science Fiction Pizza"
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroSplitDoubleCarousel
-      background={{ variant: "downward-rays-animated" }}
-      title="Pizza from the Edge of the Galaxy"
-      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" }
-      ]}
-      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" }
-      ]}
-      buttons={[{ text: "Order Interstellar", href: "#menu" }]}
+      background={{ variant: "plain" }}
+      title="Science Fiction Pizza"
+      description="Quantum-leavened crusts and nebula-infused ingredients delivered from the stars to your plate."
+      buttons={[{ text: "Order Now", href: "#menu" }]}
     />
   </div>
 
   <div id="about" data-section="about">
       <InlineImageSplitTextAbout
-      useInvertedBackground={true}
+      useInvertedBackground={false}
       heading={[
         { type: "text", content: "Crafting the Future of " },
-        { type: "image", src: "http://img.b2bpic.net/free-photo/close-up-anthropomorphic-robot-cooking_23-2150865943.jpg", alt: "robot chef cooking" },
         { type: "text", content: " Gastronomy" }
       ]}
     />
@@ -74,11 +65,7 @@ export default function LandingPage() {
       animationType="blur-reveal"
       textboxLayout="split"
       gridVariant="asymmetric-60-wide-40-narrow"
-      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" }
-      ]}
+      useInvertedBackground={true}
       title="Galactic Specials"
       description="Our signature pizzas from the deepest sectors of the culinary universe."
     />
@@ -89,11 +76,7 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
-      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" }
-      ]}
+      useInvertedBackground={false}
       title="Quantum Culinary Tech"
       description="Technological advancements that ensure every slice reaches peak cosmic flavor."
     />
@@ -102,11 +85,7 @@ export default function LandingPage() {
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardTen
       textboxLayout="split"
-      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" }
-      ]}
+      useInvertedBackground={true}
       title="Interstellar Feedback"
       description="Don't just take our word for it—listen to our planetary pioneers."
     />
@@ -116,11 +95,7 @@ export default function LandingPage() {
       <MetricCardEleven
       animationType="slide-up"
       textboxLayout="default"
-      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" }
-      ]}
+      useInvertedBackground={false}
       title="Space-Age Stats"
       description="Quantifying our journey through the culinary cosmos."
     />
@@ -129,13 +104,7 @@ export default function LandingPage() {
   <div id="faq" data-section="faq">
       <FaqSplitMedia
       textboxLayout="split"
-      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." }
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038903.jpg"
-      mediaAnimation="slide-up"
+      useInvertedBackground={true}
       faqsAnimation="blur-reveal"
       title="Quantum Inquiries"
       description="Frequently asked questions about cosmic cuisine."
@@ -143,12 +112,11 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <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" }]}
+      <ContactText
+      useInvertedBackground={false}
       background={{ variant: "plain" }}
+      text="Ready to launch your appetite into orbit? Signal our command center for reservations or delivery orders."
+      buttons={[{ text: "Contact Command", href: "mailto:orders@sciencefictionpizza.space" }]}
     />
   </div>
 
@@ -156,12 +124,12 @@ export default function LandingPage() {
       <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: "#" }] }
+        { items: [{ label: "Contact", href: "#contact" }, { label: "Careers", href: "#" }, { label: "Locations", href: "#" }] }
       ]}
-      logoText="Cosmic Crust"
+      logoText="Science Fiction Pizza"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

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