Merge version_6 into main #9

Merged
bender merged 9 commits from version_6 into main 2026-04-24 04:34:39 +00:00
9 changed files with 376 additions and 121 deletions

56
src/app/about/page.tsx Normal file
View File

@@ -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>
);
}

55
src/app/contact/page.tsx Normal file
View File

@@ -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>
);
}

60
src/app/faq/page.tsx Normal file
View File

@@ -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>
);
}

27
src/app/inquiry/page.tsx Normal file
View File

@@ -0,0 +1,27 @@
"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>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Retail", id: "/retail" },
{ name: "Inquiry", id: "/inquiry" },
{ name: "Team", id: "/team" },
]}
brandName="BUTTER"
/>
<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" }]}
/>
</ThemeProvider>
);
}

55
src/app/menu/page.tsx Normal file
View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -2,18 +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 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';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ContactCTA from '@/components/sections/contact/ContactCTA';
export default function LandingPage() {
return (
@@ -33,12 +25,12 @@ export default function LandingPage() {
<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" },
{ 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"
/>
@@ -50,7 +42,7 @@ export default function LandingPage() {
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" }]}
buttons={[{ text: "Visit Us", href: "/contact" }]}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777001305072-w5axp7rr.png?_wi=1", imageAlt: "Butter Cafe Scene"},
@@ -63,86 +55,6 @@ export default function LandingPage() {
/>
</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/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777001305073-pqacv5i8.png?_wi=1"
/>
</div>
<div id="our-story" data-section="our-story">
<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>
<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="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ClWbrS92bXmt7LmjB3TsGBCnuR/uploaded-1777001305073-l08q8oy3.png?_wi=1"
/>
</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: "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" },
]}
title="Curated Lifestyle"
description="Discover a selection of lifestyle goods, beauty, and accessories."
/>
</div>
<div id="inquiry" data-section="inquiry">
<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" }]}
useInvertedBackground={false}
background={{ variant: "plain" }}
/>
</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: "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" },
]}
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"
@@ -153,36 +65,11 @@ export default function LandingPage() {
/>
</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. Follow us on Instagram @butterfortlauderdale or email us at 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: "mailto:butterfortlauderdale@gmail.com" }}
rightLink={{ text: "Contact", href: "/contact" }}
/>
</div>
</ReactLenis>

33
src/app/retail/page.tsx Normal file
View File

@@ -0,0 +1,33 @@
"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>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Retail", id: "/retail" },
{ name: "Inquiry", id: "/inquiry" },
{ name: "Team", id: "/team" },
]}
brandName="BUTTER"
/>
<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."
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" },
]}
/>
</ThemeProvider>
);
}

32
src/app/team/page.tsx Normal file
View File

@@ -0,0 +1,32 @@
"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>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Retail", id: "/retail" },
{ name: "Inquiry", id: "/inquiry" },
{ name: "Team", id: "/team" },
]}
brandName="BUTTER"
/>
<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."
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" },
]}
/>
</ThemeProvider>
);
}