Merge version_5 into main

Merge version_5 into main

src/app/blog/page.tsx

@@ -28,12 +28,11 @@ export default function BlogPage() {
                     <NavbarStyleFullscreen
                         brandName="Beauty and the Beast"
                         navItems={[
-                            { name: "Home", id: "/" },
                             { name: "Shop", id: "products" },
                             { name: "About", id: "about" },
                             { name: "Collection", id: "features" },
                             { name: "Reviews", id: "testimonials" },
-                            { name: "Contact", id: "contact" }
+                            { name: "Contact", id: "/contact" }
                         ]}
                         bottomLeftText="Enchanted Drinkware"
                         bottomRightText="hello@beautyandthebeast.com"
@@ -82,7 +81,7 @@ export default function BlogPage() {
                             {
                                 items: [
                                     { label: "Customer Reviews", href: "testimonials" },
-                                    { label: "Contact Us", href: "contact" },
+                                    { label: "Contact Us", href: "/contact" },
                                     { label: "Shipping Info", href: "#" },
                                     { label: "Returns Policy", href: "#" }
                                 ]
@@ -109,4 +108,4 @@ export default function BlogPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/contact/page.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="largeSizeMediumTitles"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="layered"
+      headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            brandName="Beauty and the Beast"
+            navItems={[
+              { name: "Shop", id: "products" },
+              { name: "About", id: "about" },
+              { name: "Collection", id: "features" },
+              { name: "Reviews", id: "testimonials" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            bottomLeftText="Enchanted Drinkware"
+            bottomRightText="hello@beautyandthebeast.com"
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            tag="Get in Touch"
+            title="We'd Love to Hear From You"
+            description="Have questions about our enchanted drinkware? Reach out to us and our team will get back to you as soon as possible."
+            background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
+            imageSrc="https://img.b2bpic.net/free-photo/hands-working-pottery-wheel_181624-57055.jpg"
+            imageAlt="Artisan crafting"
+            mediaAnimation="slide-up"
+            mediaPosition="right"
+            inputPlaceholder="Enter your email"
+            buttonText="Send Message"
+            termsText="We'll respond to your inquiry within 24 business hours."
+            onSubmit={(email) => console.log('Contact inquiry from:', email)}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="Beauty and the Beast"
+            columns={[
+              {
+                items: [
+                  { label: "Shop Collections", href: "products" },
+                  { label: "Best Sellers", href: "products" },
+                  { label: "New Arrivals", href: "products" },
+                  { label: "Gift Sets", href: "products" }
+                ]
+              },
+              {
+                items: [
+                  { label: "About Us", href: "about" },
+                  { label: "Craftsmanship", href: "features" },
+                  { label: "Our Story", href: "about" },
+                  { label: "Sustainability", href: "about" }
+                ]
+              },
+              {
+                items: [
+                  { label: "Customer Reviews", href: "testimonials" },
+                  { label: "Contact Us", href: "/contact" },
+                  { label: "Shipping Info", href: "#" },
+                  { label: "Returns Policy", href: "#" }
+                ]
+              },
+              {
+                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                  { label: "Cookie Policy", href: "#" },
+                  { label: "Accessibility", href: "#" }
+                ]
+              },
+              {
+                items: [
+                  { label: "Instagram", href: "https://instagram.com" },
+                  { label: "Facebook", href: "https://facebook.com" },
+                  { label: "Pinterest", href: "https://pinterest.com" },
+                  { label: "Newsletter", href: "#" }
+                ]
+              }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,51 +1,26 @@
 import type { Metadata } from "next";
-import { Noto_Sans } from "next/font/google";
+import { Poppins } from "next/font/google";
-import { Inter } from "next/font/google";
+import "./styles/variables.css";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 
-const notoSans = Noto_Sans({
+const poppins = Poppins({
-  variable: "--font-noto-sans",  subsets: ["latin"],
+  variable: "--font-poppins",  subsets: ["latin"],
-});
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Beauty and the Beast | Luxury Handcrafted Cups & Mugs",  description: "Discover enchanted, handcrafted drinkware inspired by timeless elegance. Premium cups and mugs made with artisan excellence. Explore our collection today.",  keywords: "luxury cups, handcrafted mugs, premium drinkware, artisan cups, porcelain tea sets, elegant tableware",  metadataBase: new URL("asset://hero-banner"),
+  title: "Beauty and the Beast | Enchanted Drinkware",  description: "Discover exquisite handcrafted cups and mugs inspired by timeless elegance."};
-  alternates: {
-    canonical: "asset://hero-banner"
-  },
-  openGraph: {
-    title: "Beauty and the Beast | Enchanted Drinkware Collection",    description: "Explore exquisite handcrafted cups and mugs that bring magic to every moment.",    type: "website",    siteName: "Beauty and the Beast",    images: [{
-      url: "asset://hero-banner",      alt: "Beauty and the Beast luxury cup collection"
-    }]
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Beauty and the Beast | Premium Handcrafted Cups",    description: "Discover our enchanted collection of luxury drinkware.",    images: ["asset://hero-banner"]
-  },
-  robots: {
-    index: true,
-    follow: true
-  }
-};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en">
-      <ServiceWrapper>
+      <body className={poppins.variable}>
-        <body
+        {children}
-          className={`${notoSans.variable} ${inter.variable} antialiased`}
+      
-        >
-          <Tag />
-          {children}
-        
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1264,7 +1239,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -7,7 +7,7 @@ import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import { Award, CheckCircle, Eye, Heart, Leaf, Package, Palette, Shield, Sparkles, Zap } from "lucide-react";
 
@@ -33,7 +33,7 @@ export default function LandingPage() {
             { name: "About", id: "about" },
             { name: "Collection", id: "features" },
             { name: "Reviews", id: "testimonials" },
-            { name: "Contact", id: "contact" }
+            { name: "Contact", id: "/contact" }
           ]}
           bottomLeftText="Enchanted Drinkware"
           bottomRightText="hello@beautyandthebeast.com"
@@ -64,7 +64,7 @@ export default function LandingPage() {
           useInvertedBackground={false}
           products={[
             {
-              id: "1",              name: "Enchanted Rose Cup",              price: "$45.00",              variant: "Crimson  2 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/everyday-bath-utensils-dark-marble-background_58702-17743.jpg",              imageAlt: "Enchanted Rose Cup in crimson"
+              id: "1",              name: "Enchanted Rose Cup",              price: "$45.00",              variant: "Crimson  2 Colors",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_35vmIsFKiMtTSUSBP7nWGRgR0We/uploaded-1765899254134-9kbxyysg.jpg",              imageAlt: "Enchanted Rose Cup in crimson"
             },
             {
               id: "2",              name: "Belle's Tea Set",              price: "$89.00",              variant: "Gold Accents  3 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/everyday-bath-utensils-dark-marble-background_58702-17721.jpg",              imageAlt: "Belle's elegant tea set with gold accents"
@@ -73,7 +73,7 @@ export default function LandingPage() {
               id: "3",              name: "Lumière's Glow Mug",              price: "$38.00",              variant: "Clear Glass  2 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/black-coffee-mug-table-decorated-with-new-year-decor-new-year-eve-concept_132075-11326.jpg",              imageAlt: "Lumière's luminous glass mug"
             },
             {
-              id: "4",              name: "Enchanted Collection",              price: "$125.00",              variant: "Limited Edition  1 Color",              imageSrc: "https://img.b2bpic.net/free-photo/everyday-bath-utensils-dark-marble-background_58702-17743.jpg",              imageAlt: "Complete enchanted collection set"
+              id: "4",              name: "Enchanted Collection",              price: "$125.00",              variant: "Limited Edition  1 Color",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_35vmIsFKiMtTSUSBP7nWGRgR0We/uploaded-1765899254134-9kbxyysg.jpg",              imageAlt: "Complete enchanted collection set"
             }
           ]}
         />
@@ -163,15 +163,20 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactText
+        <ContactSplit
-          text="Ready to discover your perfect cup? Beauty and the Beast is dedicated to bringing timeless elegance and artisan craftsmanship into your home. Our enchanted drinkware collections are carefully curated to celebrate the beauty of handmade excellence. Whether you're looking for a personal treasure or the perfect gift, we're here to help you find something truly magical. Get in touch with our team or browse our full collection to experience the magic yourself."
+          tag="Newsletter"
-          animationType="entrance-slide"
+          title="Connect With Us"
-          background={{ variant: "plain" }}
+          description="Subscribe to stay updated with our latest collections and exclusive stories behind our enchanted drinkware."
+          background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
-          buttons={[
+          imageSrc="https://img.b2bpic.net/free-photo/hands-working-pottery-wheel_181624-57055.jpg"
-            { text: "Start Shopping", href: "#products" },
+          imageAlt="Artisan at pottery wheel"
-            { text: "Send Message", href: "#" }
+          mediaAnimation="slide-up"
-          ]}
+          mediaPosition="right"
+          inputPlaceholder="Enter your email"
+          buttonText="Subscribe"
+          termsText="By subscribing, you agree to receive updates about our latest collections and exclusive offers."
+          onSubmit={(email) => console.log('Email submitted:', email)}
         />
       </div>
 
@@ -198,7 +203,7 @@ export default function LandingPage() {
             {
               items: [
                 { label: "Customer Reviews", href: "testimonials" },
-                { label: "Contact Us", href: "contact" },
+                { label: "Contact Us", href: "/contact" },
                 { label: "Shipping Info", href: "#" },
                 { label: "Returns Policy", href: "#" }
               ]
@@ -224,4 +229,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

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

@@ -85,12 +85,11 @@ export default function ProductPage({ params }: ProductPageProps) {
                         <NavbarStyleFullscreen
                             brandName="Beauty and the Beast"
                             navItems={[
-                                { name: "Home", id: "/" },
+                                { name: "Shop", id: "products" },
-                                { name: "Shop", id: "/shop" },
                                 { name: "About", id: "about" },
                                 { name: "Collection", id: "features" },
                                 { name: "Reviews", id: "testimonials" },
-                                { name: "Contact", id: "contact" }
+                                { name: "Contact", id: "/contact" }
                             ]}
                             bottomLeftText="Enchanted Drinkware"
                             bottomRightText="hello@beautyandthebeast.com"
@@ -123,7 +122,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                                 {
                                     items: [
                                         { label: "Customer Reviews", href: "testimonials" },
-                                        { label: "Contact Us", href: "contact" }
+                                        { label: "Contact Us", href: "/contact" }
                                     ]
                                 },
                                 {
@@ -163,12 +162,11 @@ export default function ProductPage({ params }: ProductPageProps) {
                         <NavbarStyleFullscreen
                             brandName="Beauty and the Beast"
                             navItems={[
-                                { name: "Home", id: "/" },
+                                { name: "Shop", id: "products" },
-                                { name: "Shop", id: "/shop" },
                                 { name: "About", id: "about" },
                                 { name: "Collection", id: "features" },
                                 { name: "Reviews", id: "testimonials" },
-                                { name: "Contact", id: "contact" }
+                                { name: "Contact", id: "/contact" }
                             ]}
                             bottomLeftText="Enchanted Drinkware"
                             bottomRightText="hello@beautyandthebeast.com"
@@ -209,7 +207,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                                 {
                                     items: [
                                         { label: "Customer Reviews", href: "testimonials" },
-                                        { label: "Contact Us", href: "contact" }
+                                        { label: "Contact Us", href: "/contact" }
                                     ]
                                 },
                                 {
@@ -248,12 +246,11 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <NavbarStyleFullscreen
                         brandName="Beauty and the Beast"
                         navItems={[
-                            { name: "Home", id: "/" },
+                            { name: "Shop", id: "products" },
-                            { name: "Shop", id: "/shop" },
                             { name: "About", id: "about" },
                             { name: "Collection", id: "features" },
                             { name: "Reviews", id: "testimonials" },
-                            { name: "Contact", id: "contact" }
+                            { name: "Contact", id: "/contact" }
                         ]}
                         bottomLeftText="Enchanted Drinkware"
                         bottomRightText="hello@beautyandthebeast.com"
@@ -319,7 +316,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                             {
                                 items: [
                                     { label: "Customer Reviews", href: "testimonials" },
-                                    { label: "Contact Us", href: "contact" }
+                                    { label: "Contact Us", href: "/contact" }
                                 ]
                             },
                             {
@@ -338,4 +335,4 @@ export default function ProductPage({ params }: ProductPageProps) {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/shop/page.tsx

@@ -37,12 +37,11 @@ export default function ShopPage() {
                         <NavbarStyleFullscreen
                             brandName="Beauty and the Beast"
                             navItems={[
-                                { name: "Home", id: "/" },
+                                { name: "Shop", id: "products" },
-                                { name: "Shop", id: "/shop" },
                                 { name: "About", id: "about" },
                                 { name: "Collection", id: "features" },
                                 { name: "Reviews", id: "testimonials" },
-                                { name: "Contact", id: "contact" }
+                                { name: "Contact", id: "/contact" }
                             ]}
                             bottomLeftText="Enchanted Drinkware"
                             bottomRightText="hello@beautyandthebeast.com"
@@ -75,7 +74,7 @@ export default function ShopPage() {
                                 {
                                     items: [
                                         { label: "Customer Reviews", href: "testimonials" },
-                                        { label: "Contact Us", href: "contact" }
+                                        { label: "Contact Us", href: "/contact" }
                                     ]
                                 },
                                 {
@@ -114,12 +113,11 @@ export default function ShopPage() {
                     <NavbarStyleFullscreen
                         brandName="Beauty and the Beast"
                         navItems={[
-                            { name: "Home", id: "/" },
+                            { name: "Shop", id: "products" },
-                            { name: "Shop", id: "/shop" },
                             { name: "About", id: "about" },
                             { name: "Collection", id: "features" },
                             { name: "Reviews", id: "testimonials" },
-                            { name: "Contact", id: "contact" }
+                            { name: "Contact", id: "/contact" }
                         ]}
                         bottomLeftText="Enchanted Drinkware"
                         bottomRightText="hello@beautyandthebeast.com"
@@ -160,7 +158,7 @@ export default function ShopPage() {
                             {
                                 items: [
                                     { label: "Customer Reviews", href: "testimonials" },
-                                    { label: "Contact Us", href: "contact" }
+                                    { label: "Contact Us", href: "/contact" }
                                 ]
                             },
                             {
@@ -179,4 +177,4 @@ export default function ShopPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/styles/variables.css

@@ -2,21 +2,21 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f5f5f5;;
+  /* --background: #f7f6f7;;
   --card: #ffffff;;
-  --foreground: #1c1c1c;;
+  --foreground: #251a0c;;
-  --primary-cta: #1f3251;;
+  --primary-cta: #f4c408;;
   --secondary-cta: #ffffff;;
-  --accent: #15479c;;
+  --accent: #f4ca26;;
-  --background-accent: #a8cce8;; */
+  --background-accent: #e8daa8;; */
 
-  --background: #f5f5f5;;
+  --background: #f7f6f7;;
   --card: #ffffff;;
-  --foreground: #1c1c1c;;
+  --foreground: #251a0c;;
-  --primary-cta: #1f3251;;
+  --primary-cta: #f4c408;;
   --secondary-cta: #ffffff;;
-  --accent: #15479c;;
+  --accent: #f4ca26;;
-  --background-accent: #a8cce8;;
+  --background-accent: #e8daa8;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);