Update src/app/page.tsx

Merge version_12 into main

src/app/about/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="large"
+        background="circleGradient"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "About", id: "/about" },
+            { name: "Our Story", id: "/our-story" },
+            { name: "Menu", id: "/menu" },
+            { name: "Retail", id: "/" },
+            { name: "Contact", id: "/" },
+          ]}
+          brandName="BUTTER"
+        />
+        <div className="pt-32">
+          <SplitAbout
+            textboxLayout="split"
+            useInvertedBackground={false}
+            title="Designed for Culture."
+            description="Butter is more than a coffee shop. It is a modern café, retail platform, and community space created for Fort Lauderdale. Inspired by the cafe culture of Los Angeles and New York."
+            bulletPoints={[
+              { title: "Coffee", description: "High-quality espresso, classic drinks, and seasonal specials." },
+              { title: "Matcha", description: "Premium matcha designed to be clean and smooth." },
+              { title: "Curated Retail", description: "A rotating selection of emerging lifestyle brands." },
+            ]}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777001305073-pqacv5i8.png?_wi=1"
+          />
+        </div>
+        <FooterLogoReveal
+          logoText="BUTTER"
+          leftLink={{ text: "Instagram", href: "https://instagram.com/butterfortlauderdale" }}
+          rightLink={{ text: "Contact", href: "mailto:butterfortlauderdale@gmail.com" }}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="large"
+        background="circleGradient"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "About", id: "/#about" },
+            { name: "Our Story", id: "/#our-story" },
+            { name: "Menu", id: "/#menu" },
+            { name: "Retail", id: "/#retail" },
+            { name: "Inquiry", id: "/#inquiry" },
+            { name: "FAQ", id: "/faq" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="BUTTER"
+        />
+
+        <div className="pt-32 pb-20">
+            <ContactCenter
+            useInvertedBackground={false}
+            background={{ variant: "gradient-bars" }}
+            tag="Newsletter"
+            title="Stay in the loop."
+            description="Get updates on opening, brand drops, and location announcements. Follow us on Instagram @butterfortlauderdale or email us at butterfortlauderdale@gmail.com."
+            />
+        </div>
+
+        <FooterLogoReveal
+            logoText="BUTTER"
+            leftLink={{ text: "Instagram", href: "https://instagram.com/butterfortlauderdale" }}
+            rightLink={{ text: "Contact", href: "/contact" }}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/faq/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function FaqPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="large"
+        background="circleGradient"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "About", id: "/#about" },
+            { name: "Our Story", id: "/#our-story" },
+            { name: "Menu", id: "/#menu" },
+            { name: "Retail", id: "/#retail" },
+            { name: "Inquiry", id: "/#inquiry" },
+            { name: "FAQ", id: "/faq" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="BUTTER"
+        />
+        
+        <div className="pt-32 pb-20">
+            <FaqDouble
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqs={[
+                { id: "f1", title: "When is Butter opening?", content: "We are currently in development. Follow us on Instagram for opening updates." },
+                { id: "f2", title: "Where is the shop?", content: "Located in the heart of Fort Lauderdale. Specific address coming soon." },
+                { id: "f3", title: "How can I collaborate?", content: "Reach out to butterfortlauderdale@gmail.com for partnerships." },
+            ]}
+            title="Frequently Asked"
+            description="Everything you need to know about Butter."
+            faqsAnimation="slide-up"
+            />
+        </div>
+
+        <FooterLogoReveal
+            logoText="BUTTER"
+            leftLink={{ text: "Instagram", href: "https://instagram.com/butterfortlauderdale" }}
+            rightLink={{ text: "Contact", href: "/contact" }}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/inquiry/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function InquiryPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" 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">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Retail", id: "/retail" },
+            { name: "Inquiry", id: "/inquiry" },
+            { name: "Team", id: "/team" },
+          ]}
+          brandName="BUTTER"
+        />
+      </div>
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactCTA
+          tag="Retail Partnership"
+          title="Sell With Us"
+          description="We are always scouting unique lifestyle brands to feature in our retail space. If you are a maker or a brand owner, we'd love to hear from you."
+          buttons={[{ text: "Submit Inquiry", href: "mailto:butterfortlauderdale@gmail.com" }]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -19,7 +19,11 @@ export const metadata: Metadata = {
   },
 };
 
-const dmSans = DM_Sans({ variable: "--font-dm-sans", subsets: ["latin"] });
+
+const halant = Halant({
+  variable: "--font-halant",  subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
+});
 
 export default function RootLayout({
   children,
@@ -29,7 +33,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
-        <body className={`${dmSans.variable} antialiased`}>
+        <body className={`${halant.variable} antialiased`}>
           
           {children}
           <script

src/app/menu/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function MenuPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="large"
+        background="circleGradient"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "About", id: "/about" },
+            { name: "Our Story", id: "/our-story" },
+            { name: "Menu", id: "/menu" },
+            { name: "Retail", id: "/" },
+            { name: "Contact", id: "/" },
+          ]}
+          brandName="BUTTER"
+        />
+        <div className="pt-32">
+          <FeatureCardTwentyOne
+            useInvertedBackground={false}
+            title="What We Serve"
+            description="Good coffee, good taste, good things."
+            accordionItems={[
+              { id: "c", title: "Coffee", content: "High-quality espresso, classic coffee drinks, cold brew, and seasonal specials." },
+              { id: "m", title: "Matcha", content: "Premium matcha made with care, designed to be clean, smooth, and craveable." },
+              { id: "p", title: "Pastries", content: "Locally sourced pastries from trusted bakeries to keep quality high." },
+            ]}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777001305073-l08q8oy3.png?_wi=1"
+          />
+        </div>
+        <FooterLogoReveal
+          logoText="BUTTER"
+          leftLink={{ text: "Instagram", href: "https://instagram.com/butterfortlauderdale" }}
+          rightLink={{ text: "Contact", href: "mailto:butterfortlauderdale@gmail.com" }}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/our-story/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function OurStoryPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="large"
+        background="circleGradient"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "About", id: "/about" },
+            { name: "Our Story", id: "/our-story" },
+            { name: "Menu", id: "/menu" },
+            { name: "Retail", id: "/" },
+            { name: "Contact", id: "/" },
+          ]}
+          brandName="BUTTER"
+        />
+        <div className="pt-32">
+          <MediaAbout
+            title="Our Story"
+            description="Founded on the belief that everyday rituals deserve elevated design, Butter bridges the gap between premium coffee culture and lifestyle curation."
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777001305073-l08q8oy3.png?_wi=1"
+            useInvertedBackground={true}
+          />
+        </div>
+        <FooterLogoReveal
+          logoText="BUTTER"
+          leftLink={{ text: "Instagram", href: "https://instagram.com/butterfortlauderdale" }}
+          rightLink={{ text: "Contact", href: "mailto:butterfortlauderdale@gmail.com" }}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,16 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import SplitAbout from '@/components/sections/about/SplitAbout';
-import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
 
 export default function LandingPage() {
   return (
@@ -28,140 +22,47 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        { name: "About", id: "#about" },
-        { name: "Menu", id: "#menu" },
-        { name: "Retail", id: "#retail" },
-        { name: "Contact", id: "#contact" },
-      ]}
-      brandName="BUTTER"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "About", id: "/about" },
+              { name: "Our Story", id: "/our-story" },
+              { name: "Menu", id: "/menu" },
+              { name: "Retail", id: "/retail" },
+              { name: "Inquiry", id: "/inquiry" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="BUTTER"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplitDualMedia
-      background={{ variant: "gradient-bars" }}
-      title="Fort Lauderdale, buttered."
-      description="A design-forward coffee, matcha, and retail platform for everyday ritual."
-      tag="Coming Soon"
-      buttons={[{ text: "Visit Us", href: "#contact" }]}
-      mediaItems={[
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777000839604-p966s1oj.png",          imageAlt: "Butter Cafe Scene"},
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777000839605-mb9pbmgv.png",          imageAlt: "Butter Branding Concept"}
-      ]}
-      mediaAnimation="slide-up"
-      rating={5}
-      ratingText="Join the waitlist"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroOverlay
+            title="BUTTER"
+            description="A design-forward coffee, matcha, and retail platform for everyday ritual."
+            buttons={[{ text: "Visit Us", href: "/contact" }]}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777006144782-qd7km8ip.jpg"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <SplitAbout
-      textboxLayout="split"
-      useInvertedBackground={false}
-      title="Designed for Culture."
-      description="Butter is more than a coffee shop. It is a modern café, retail platform, and community space created for Fort Lauderdale. Inspired by the cafe culture of Los Angeles and New York."
-      bulletPoints={[
-        { title: "Coffee", description: "High-quality espresso, classic drinks, and seasonal specials." },
-        { title: "Matcha", description: "Premium matcha designed to be clean and smooth." },
-        { title: "Curated Retail", description: "A rotating selection of emerging lifestyle brands." },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yrihy8"
-    />
-  </div>
+        <div id="social" data-section="social">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={false}
+            names={["Bakery One", "Market Two", "Roaster Three", "Design House", "Studio Five", "Creative Labs", "Local Coffee Co"]}
+            title="Community Partners"
+            description="Local favorites and partners."
+          />
+        </div>
 
-  <div id="menu" data-section="menu">
-      <FeatureCardTwentyOne
-      useInvertedBackground={false}
-      title="What We Serve"
-      description="Good coffee, good taste, good things."
-      accordionItems={[
-        { id: "c", title: "Coffee", content: "High-quality espresso, classic coffee drinks, cold brew, and seasonal specials." },
-        { id: "m", title: "Matcha", content: "Premium matcha made with care, designed to be clean, smooth, and craveable." },
-        { id: "p", title: "Pastries", content: "Locally sourced pastries from trusted bakeries to keep quality high." },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/five-different-grades-roasting-coffee-beans-aromatic-from-raw-fully-roasted-isolated-white-plate-top-view_346278-609.jpg"
-    />
-  </div>
-
-  <div id="retail" data-section="retail">
-      <ProductCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        { id: "r1", name: "Lifestyle Goods", price: "Various", imageSrc: "http://img.b2bpic.net/free-photo/person-holding-baskets-fresh-pastries-bread-bakery_1170-597.jpg" },
-        { id: "r2", name: "Local Finds", price: "Various", imageSrc: "http://img.b2bpic.net/free-photo/woman-sticks-head-through-roasted-beans-enjoys-pleasant-scent-has-mysterious-expression-spends-free-time-coffeehouse_273609-51463.jpg" },
-        { id: "r3", name: "Daily Rituals", price: "Various", imageSrc: "http://img.b2bpic.net/free-photo/closeup-cup-coffee_181624-11554.jpg" },
-      ]}
-      title="Curated Lifestyle"
-      description="Discover a selection of lifestyle goods, beauty, and accessories."
-    />
-  </div>
-
-  <div id="team" data-section="team">
-      <TeamCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="two-columns-alternating-heights"
-      useInvertedBackground={false}
-      members={[
-        { id: "t1", name: "Sophia Chugranis", role: "Co-Founder", description: "Content creator and sociologist bringing cultural insight and brand awareness.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-flannel-suit-glasses-standing-against-brick-wall_613910-6746.jpg" },
-        { id: "t2", name: "Olivia Lallouz", role: "Co-Founder", description: "Speech-Language Pathologist bringing operational experience and community connection.", imageSrc: "http://img.b2bpic.net/free-photo/empty-doctors-office-with-medical-instruments-facility_482257-14089.jpg" },
-      ]}
-      title="The Founders"
-      description="Bringing a science-backed and culture-first perspective to the community."
-    />
-  </div>
-
-  <div id="social" data-section="social">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={["Bakery One", "Market Two", "Roaster Three", "Design House", "Studio Five", "Creative Labs", "Local Coffee Co"]}
-      title="Community Partners"
-      description="Local favorites and partners."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        { id: "f1", title: "When is Butter opening?", content: "We are currently in development. Follow us on Instagram for opening updates." },
-        { id: "f2", title: "Where is the shop?", content: "Located in the heart of Fort Lauderdale. Specific address coming soon." },
-        { id: "f3", title: "How can I collaborate?", content: "Reach out to butterfortlauderdale@gmail.com for partnerships." },
-      ]}
-      title="Frequently Asked"
-      description="Everything you need to know about Butter."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{ variant: "gradient-bars" }}
-      tag="Newsletter"
-      title="Stay in the loop."
-      description="Get updates on opening, brand drops, and location announcements."
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="BUTTER"
-      leftLink={{ text: "Instagram", href: "https://instagram.com/butterfortlauderdale" }}
-      rightLink={{ text: "Contact", href: "mailto:butterfortlauderdale@gmail.com" }}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="BUTTER"
+            leftLink={{ text: "Instagram", href: "https://instagram.com/butterfortlauderdale" }}
+            rightLink={{ text: "Contact", href: "/contact" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/retail/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function RetailPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" 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">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Retail", id: "/retail" },
+            { name: "Inquiry", id: "/inquiry" },
+            { name: "Team", id: "/team" },
+          ]}
+          brandName="BUTTER"
+        />
+      </div>
+      <div id="product-card-three" data-section="product-card-three">
+        <ProductCardThree
+          animationType="slide-up"
+          textboxLayout="default"
+          gridVariant="three-columns-all-equal-width"
+          title="Curated Lifestyle"
+          description="Discover a selection of lifestyle goods, beauty, and accessories."
+          useInvertedBackground={false}
+          products={[
+            { id: "r1", name: "Lifestyle Goods", price: "Various", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777001305072-w5axp7rr.png?_wi=2" },
+            { id: "r2", name: "Local Finds", price: "Various", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777001305073-83c73fzj.png?_wi=2" },
+            { id: "r3", name: "Daily Rituals", price: "Various", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777001305073-pqacv5i8.png?_wi=2" },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-halant), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-halant), sans-serif;
 }

src/app/team/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function TeamPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" 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">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Retail", id: "/retail" },
+            { name: "Inquiry", id: "/inquiry" },
+            { name: "Team", id: "/team" },
+          ]}
+          brandName="BUTTER"
+        />
+      </div>
+      <div id="team-card-two" data-section="team-card-two">
+        <TeamCardTwo
+          animationType="slide-up"
+          textboxLayout="split"
+          gridVariant="two-columns-alternating-heights"
+          title="The Founders"
+          description="Bringing a science-backed and culture-first perspective to the community."
+          useInvertedBackground={false}
+          members={[
+            { id: "t1", name: "Sophia Chugranis", role: "Co-Founder", description: "Content creator and sociologist bringing cultural insight and brand awareness.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777001305073-l08q8oy3.png?_wi=2" },
+            { id: "t2", name: "Olivia Lallouz", role: "Co-Founder", description: "Speech-Language Pathologist bringing operational experience and community connection.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777001305073-83c73fzj.png?_wi=3" },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}