Update src/app/contact/page.tsx

Merge version_1 into main

src/app/about/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+              { name: "Checkout", id: "/checkout" }
+            ]}
+            brandName="EbookVerse"
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterCard logoText="EbookVerse" />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/checkout/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
+            { name: "Checkout", id: "/checkout" }
+          ]}
+          brandName="EbookVerse"
+        />
+      </div>
+      <main className="container mx-auto py-24 min-h-screen">
+        <h1 className="text-4xl font-bold mb-8">Secure Checkout</h1>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+          <div className="p-6 border rounded-lg">
+            <h2 className="text-2xl font-semibold mb-4">Shopping Cart</h2>
+            <p>Your cart is empty.</p>
+          </div>
+          <div className="p-6 border rounded-lg">
+            <h2 className="text-2xl font-semibold mb-4">Payment Information</h2>
+            <p>Secure payment portal placeholder.</p>
+          </div>
+        </div>
+      </main>
+      <div id="footer" data-section="footer">
+        <FooterCard logoText="EbookVerse" copyrightText="© 2025 | EbookVerse Inc." />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+              { name: "Checkout", id: "/checkout" }
+            ]}
+            brandName="EbookVerse"
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter 
+            tag="Contact Us"
+            title="Get in touch"
+            description="We're here to help. Send us a message and we'll get back to you as soon as possible."
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterCard logoText="EbookVerse" />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -18,24 +18,20 @@ export default function LandingPage() {
         borderRadius="soft"
         contentWidth="mediumSmall"
         sizing="mediumLargeSizeMediumTitles"
-        background="noiseDiagonalGradient"
+        background="none"
-        cardStyle="inset"
+        cardStyle="subtle-shadow"
-        primaryButtonStyle="shadow"
+        primaryButtonStyle="flat"
-        secondaryButtonStyle="layered"
+        secondaryButtonStyle="glass"
         headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Home", id: "#hero" },
-          name: "Home",          id: "#hero"},
+        { name: "Collection", id: "#products" },
-        {
+        { name: "About", id: "#features" },
-          name: "Collection",          id: "#products"},
+        { name: "FAQ", id: "#faq" },
-        {
-          name: "About",          id: "#about"},
-        {
-          name: "FAQ",          id: "#faq"},
       ]}
       brandName="EbookVerse"
     />
@@ -45,7 +41,7 @@ export default function LandingPage() {
       <HeroCentered
       title="Read Anywhere, Any Time"
       description="Discover a vast collection of high-quality ebooks curated for every reader, available instantly for your favorite device."
-      background={{ variant: "gradient-bars" }}
+      background={{ variant: "radial-gradient" }}
       avatars={[
         { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUstwkrF0ql2ythS5TOyi0xKOC/a-professional-portrait-of-a-female-read-1774555255430-8f753030.png", alt: "Reader" },
         { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUstwkrF0ql2ythS5TOyi0xKOC/a-professional-portrait-of-a-male-reader-1774555255536-d6185b9d.png", alt: "Reader" },
@@ -55,7 +51,7 @@ export default function LandingPage() {
       avatarText="Join 10,000+ happy readers"
       buttons={[
         { text: "Browse Collection", href: "#products" },
-        { text: "Learn More", href: "#about" }
+        { text: "Learn More", href: "#features" }
       ]}
     />
   </div>
@@ -65,7 +61,7 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={true}
+      useInvertedBackground={false}
       features={[
         { id: "f1", title: "Instant Delivery", description: "Get your favorite books delivered to your device the moment you click purchase.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUstwkrF0ql2ythS5TOyi0xKOC/a-flat-icon-illustration-of-a-digital-do-1774555255307-16f476da.png" },
         { id: "f2", title: "Smart Bookmarks", description: "Seamlessly track your progress across all your devices, never lose your spot again.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUstwkrF0ql2ythS5TOyi0xKOC/a-flat-icon-illustration-of-a-high-quali-1774555254876-62237f10.png" },
@@ -80,7 +76,7 @@ export default function LandingPage() {
       <ProductCardOne
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       animationType="blur-reveal"
       products={[
         { id: "p1", name: "Modern Minimalism", price: "$12.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUstwkrF0ql2ythS5TOyi0xKOC/a-high-quality-3d-render-of-an-ebook-cov-1774555257052-c4180af8.png" },
@@ -96,7 +92,7 @@ export default function LandingPage() {
       <TestimonialCardSixteen
       animationType="slide-up"
       textboxLayout="default"
-      useInvertedBackground={true}
+      useInvertedBackground={false}
       testimonials={[
         { id: "t1", name: "Alice M.", role: "Avid Reader", company: "BookClub Member", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUstwkrF0ql2ythS5TOyi0xKOC/a-close-up-aesthetic-photo-of-a-cozy-hom-1774555257694-1f71b5fe.png" },
         { id: "t2", name: "Bob K.", role: "Student", company: "University", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUstwkrF0ql2ythS5TOyi0xKOC/a-close-up-aesthetic-photo-of-a-cup-of-c-1774555255571-1b30b19d.png" },
@@ -116,7 +112,7 @@ export default function LandingPage() {
   <div id="faq" data-section="faq">
       <FaqSplitMedia
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       faqs={[
         { id: "q1", title: "How do I access my ebooks?", content: "Once purchased, your books are instantly available in your library on your user account dashboard." },
         { id: "q2", title: "Which devices are supported?", content: "Our platform supports all modern e-reader apps, tablets, and mobile browsers." },
@@ -139,4 +135,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/product/[id]/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import FooterCard from '@/components/sections/footer/FooterCard';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
+
+export default function ProductDetailPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="mediumSmall"
+        sizing="mediumLargeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="inset"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Catalog", id: "/catalog" }
+            ]}
+            brandName="EbookVerse"
+          />
+        </div>
+
+        <div className="py-20">
+            <ProductDetailCard
+                layout="page"
+                name="Modern Minimalism"
+                price="$12.99"
+                description="A guide to simplifying your life and design."
+                images={[{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUstwkrF0ql2ythS5TOyi0xKOC/a-high-quality-3d-render-of-an-ebook-cov-1774555257052-c4180af8.png", alt: "Ebook Cover" }]}
+                buttons={[{ text: "Add to Cart" }]}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="EbookVerse"
+            copyrightText="© 2025 | EbookVerse Inc."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
+  --background: #f5f5f5;
-  --card: #dad6cd;
+  --card: #ffffff;
-  --foreground: #2a2928;
+  --foreground: #1c1c1c;
-  --primary-cta: #2a2928;
+  --primary-cta: #1c1c1c;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
+  --accent: #15479c;
-  --background-accent: #c6b180;
+  --background-accent: #a8cce8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);