Merge version_5 into main

Update src/app/shop/page.tsx
2026-02-16 09:16:39 +00:00 · 2026-02-16 09:16:35 +00:00 · 2026-02-16 09:16:35 +00:00 · 2026-02-16 09:16:34 +00:00 · 2026-02-16 09:16:33 +00:00 · 2026-02-16 09:16:32 +00:00
7 changed files with 169 additions and 89 deletions
--- a/src/app/blog/page.tsx
+++ b/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>
    );
-}
+}
--- a/src/app/contact/page.tsx
+++ b/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>
+  );
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,51 +1,26 @@
 import type { Metadata } from "next";
-import { Noto_Sans } from "next/font/google";
-import { Inter } from "next/font/google";
+import { Poppins } 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({
-  variable: "--font-noto-sans",  subsets: ["latin"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
+const poppins = Poppins({
+  variable: "--font-poppins",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
 });

 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"),
-  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
-  }
-};
+  title: "Beauty and the Beast | Enchanted Drinkware",  description: "Discover exquisite handcrafted cups and mugs inspired by timeless elegance."};

 export default function RootLayout({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${notoSans.variable} ${inter.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body className={poppins.variable}>
+        {children}
+      
        <script
          dangerouslySetInnerHTML={{
            __html: `
@@ -1264,7 +1239,6 @@ export default function RootLayout({
          }}
        />
      </body>
-      </ServiceWrapper>
    </html>
  );
-}
+}
--- a/src/app/page.tsx
+++ b/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
-          text="Ready to discover your perfect cup? Get in touch with our team or browse our full collection."
-          animationType="entrance-slide"
-          background={{ variant: "plain" }}
+        <ContactSplit
+          tag="Newsletter"
+          title="Connect With Us"
+          description="Subscribe to stay updated with our latest collections and exclusive stories behind our enchanted drinkware."
+          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
-          buttons={[
-            { text: "Start Shopping", href: "#products" },
-            { text: "Send Message", href: "#" }
-          ]}
+          imageSrc="https://img.b2bpic.net/free-photo/hands-working-pottery-wheel_181624-57055.jpg"
+          imageAlt="Artisan at pottery wheel"
+          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>
  );
-}
+}
--- a/src/app/shop/[id]/page.tsx
+++ b/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: "/shop" },
+                                { 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"
@@ -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: "/shop" },
+                                { 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"
@@ -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: "/shop" },
+                            { 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"
@@ -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>
    );
-}
+}
--- a/src/app/shop/page.tsx
+++ b/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: "/shop" },
+                                { 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"
@@ -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: "/shop" },
+                            { 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"
@@ -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>
    );
-}
+}
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -2,21 +2,21 @@
  /* Base units */
  /* --vw is set by ThemeProvider */

-  /* --background: #f5f5f5;;
+  /* --background: #f7f6f7;;
  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #1f3251;;
+  --foreground: #251a0c;;
+  --primary-cta: #f4c408;;
  --secondary-cta: #ffffff;;
-  --accent: #15479c;;
-  --background-accent: #a8cce8;; */
+  --accent: #f4ca26;;
+  --background-accent: #e8daa8;; */

-  --background: #f5f5f5;;
+  --background: #f7f6f7;;
  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #1f3251;;
+  --foreground: #251a0c;;
+  --primary-cta: #f4c408;;
  --secondary-cta: #ffffff;;
-  --accent: #15479c;;
-  --background-accent: #a8cce8;;
+  --accent: #f4ca26;;
+  --background-accent: #e8daa8;;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	e7165ae2b8	Merge version_5 into main Merge version_5 into main	2026-02-16 09:16:39 +00:00
bender	94ccdb1243	Update src/app/shop/page.tsx	2026-02-16 09:16:35 +00:00
bender	09ab0e672a	Update src/app/shop/[id]/page.tsx	2026-02-16 09:16:35 +00:00
bender	698c1ce75b	Update src/app/page.tsx	2026-02-16 09:16:34 +00:00
bender	61f40c21c2	Add src/app/contact/page.tsx	2026-02-16 09:16:33 +00:00
bender	83b1999b5d	Update src/app/blog/page.tsx	2026-02-16 09:16:32 +00:00
bender	10898c48e6	Merge version_4 into main Merge version_4 into main	2026-02-16 09:13:40 +00:00
bender	6258ed2d06	Update src/app/page.tsx	2026-02-16 09:13:35 +00:00
bender	1c4b10230e	Merge version_4 into main Merge version_4 into main	2026-02-16 09:08:09 +00:00
bender	afad825230	Update src/app/page.tsx	2026-02-16 09:08:05 +00:00
bender	c34016dabe	Merge version_4 into main Merge version_4 into main	2026-02-16 09:05:05 +00:00
bender	052594d24f	Update src/app/styles/variables.css	2026-02-16 09:05:01 +00:00
bender	ccef6ed1c7	Merge version_3 into main Merge version_3 into main	2026-02-16 08:54:27 +00:00
bender	10d72e24eb	Update src/app/shop/page.tsx	2026-02-16 08:54:23 +00:00
bender	02aef3914d	Update src/app/shop/[id]/page.tsx	2026-02-16 08:54:22 +00:00
bender	7c2fc3fb72	Update src/app/page.tsx	2026-02-16 08:54:21 +00:00
bender	66594c3dd8	Update src/app/layout.tsx	2026-02-16 08:54:20 +00:00
bender	bc685d9878	Update src/app/blog/page.tsx	2026-02-16 08:54:19 +00:00
bender	2da23e3217	Merge version_2 into main Merge version_2 into main	2026-02-16 08:49:38 +00:00
bender	6a99a219dc	Update src/app/page.tsx	2026-02-16 08:49:33 +00:00