Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9b849fad6e | |||
| e0acaf2b23 | |||
| a10124c50f | |||
| 2a08075af9 | |||
| 2a1dd34d8b | |||
| 8d37a81efb | |||
| 3b2a0cbfff |
301
src/app/page.tsx
301
src/app/page.tsx
@@ -2,15 +2,15 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import { Coffee } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
@@ -31,22 +31,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Our Story",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Our Story", id: "about" },
|
||||
{ name: "Menu", id: "products" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Molly Bubble Tea"
|
||||
/>
|
||||
@@ -54,78 +43,18 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Artisanal Bubble Tea, Elevated."
|
||||
description="Experience the perfect balance of premium tea leaves, fresh milk, and handcrafted tapioca pearls. Molly Bubble Tea is redefining your daily indulgence."
|
||||
kpis={[
|
||||
{
|
||||
value: "100%",
|
||||
label: "Organic Ingredients",
|
||||
},
|
||||
{
|
||||
value: "24h",
|
||||
label: "Fresh Pearl Prep",
|
||||
},
|
||||
{
|
||||
value: "50+",
|
||||
label: "Flavor Combinations",
|
||||
},
|
||||
{ value: "100%", label: "Organic Ingredients" },
|
||||
{ value: "24h", label: "Fresh Pearl Prep" },
|
||||
{ value: "50+", label: "Flavor Combinations" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "View Menu",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "View Menu", href: "#products" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/glass-coffee-drink-with-ice-garnished-with-toasted-marshmallow_140725-6028.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-delicious-bubble-tea-drink_23-2149870676.jpg",
|
||||
alt: "High angle delicious bubble tea drink",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/composition-with-delicious-thai-tea-beverage_23-2148994340.jpg",
|
||||
alt: "Composition with delicious thai tea beverage",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-assortment-healthy-breakfast-meal-with-yogurt_23-2148894681.jpg",
|
||||
alt: "Front view assortment of healthy breakfast meal with yogurt",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-assortment-healthy-breakfast-meal-with-yogurt_23-2148894680.jpg",
|
||||
alt: "Front view assortment of healthy breakfast meal with yogurt",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/assorted-dried-herbs-glass-bowls-plaster-surface-flat-lay_176474-6285.jpg",
|
||||
alt: "Assorted dried herbs in glass bowls on a plaster surface flat lay.",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Freshly Brewed",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Hand-Crafted",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Quality",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Authentic Taste",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Eco-Friendly",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -149,42 +78,10 @@ export default function LandingPage() {
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Classic Brown Sugar",
|
||||
price: "$6.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pomegranate-juice-filled-with-pomegranate-ice_140725-2826.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Ceremonial Matcha",
|
||||
price: "$7.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/iced-matcha-latte-plastic-cup-hands-woman_169016-43898.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Roasted Taro Milk",
|
||||
price: "$6.75",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/healthy-breakfast-meal-with-yogurt_23-2148894699.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Jasmine Milk Cloud",
|
||||
price: "$6.25",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-still-life-asian-tea_23-2149709065.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Earl Grey Infusion",
|
||||
price: "$6.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-asian-tea-beverage-table_23-2148296701.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Strawberry Refresher",
|
||||
price: "$7.25",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/composition-with-delicious-thai-tea_23-2148994317.jpg",
|
||||
},
|
||||
{ id: "1", name: "Classic Brown Sugar", price: "$6.50", imageSrc: "http://img.b2bpic.net/free-photo/pomegranate-juice-filled-with-pomegranate-ice_140725-2826.jpg" },
|
||||
{ id: "2", name: "Ceremonial Matcha", price: "$7.00", imageSrc: "http://img.b2bpic.net/iced-matcha-latte-plastic-cup-hands-woman_169016-43898.jpg" },
|
||||
{ id: "3", name: "Roasted Taro Milk", price: "$6.75", imageSrc: "http://img.b2bpic.net/free-photo/healthy-breakfast-meal-with-yogurt_23-2148894699.jpg" },
|
||||
{ id: "4", name: "Jasmine Milk Cloud", price: "$6.25", imageSrc: "http://img.b2bpic.net/free-photo/minimalist-still-life-asian-tea_23-2149709065.jpg" },
|
||||
]}
|
||||
title="Signature Collection"
|
||||
description="Indulge in our carefully curated menu of premium blends."
|
||||
@@ -197,21 +94,9 @@ export default function LandingPage() {
|
||||
title="Why Choose Molly?"
|
||||
description="We take quality seriously so you can enjoy every sip guilt-free."
|
||||
accordionItems={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Freshness Guaranteed",
|
||||
content: "Our tapioca pearls are prepared every 4 hours to ensure the perfect chewy texture.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Premium Ingredients",
|
||||
content: "We source high-grade tea leaves from sustainable farms and use locally sourced fresh milk.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Customizable Sweetness",
|
||||
content: "Adjust your sugar levels from 0% to 100% to create your ideal taste profile.",
|
||||
},
|
||||
{ id: "f1", title: "Freshness Guaranteed", content: "Our tapioca pearls are prepared every 4 hours to ensure the perfect chewy texture." },
|
||||
{ id: "f2", title: "Premium Ingredients", content: "We source high-grade tea leaves from sustainable farms and use locally sourced fresh milk." },
|
||||
{ id: "f3", title: "Customizable Sweetness", content: "Adjust your sugar levels from 0% to 100% to create your ideal taste profile." },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/delicious-bubble-tea-drink_23-2149870659.jpg"
|
||||
@@ -219,136 +104,56 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={true}
|
||||
showRating={true}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Tea Enthusiasts Agree"
|
||||
description="Hear from our community about their favorite flavors and experiences."
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice Wang",
|
||||
handle: "@alicew",
|
||||
testimonial: "Best boba in town, the pearls are perfectly chewy!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleasant-looking-brunette-young-woman-with-eastern-appearance-touches-cheek-smiles-happily-wears-nightgown-sleeping-costume-holds-yellow-takeaway-cup-coffee_273609-33312.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Bob Chen",
|
||||
handle: "@bobchen",
|
||||
testimonial: "I love the jasmine milk tea, so refreshing and not overly sweet.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-young-woman-sitting-modern-cafe_171337-17123.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Charlie D.",
|
||||
handle: "@charlied",
|
||||
testimonial: "The staff are so friendly and the quality is unmatched.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/red-hair-woman-holds-armudu-glass-with-black-tea-restaurant_141793-2094.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Diana Ross",
|
||||
handle: "@diana",
|
||||
testimonial: "A regular spot for me now, try the matcha!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-looking-shopping-bag_23-2148339175.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Evan Wright",
|
||||
handle: "@evanw",
|
||||
testimonial: "Absolutely the most premium experience I've had at a tea shop.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-with-tablet_23-2149927583.jpg",
|
||||
},
|
||||
{
|
||||
id: "t6",
|
||||
name: "Fiona Lee",
|
||||
handle: "@fionalee",
|
||||
testimonial: "High quality leaves make all the difference, simply incredible.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-charming-woman-is-stirring-coffee-outdoor-cafe-thinking_231208-13170.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Sarah J.", handle: "@sarahj", rating: 5, testimonial: "The Brown Sugar boba is life changing, perfectly chewy pearls!" },
|
||||
{ id: "t2", name: "Mark L.", handle: "@markl", rating: 5, testimonial: "Finally a shop that understands matcha quality. Simply incredible." },
|
||||
{ id: "t3", name: "Elena R.", handle: "@elenar", rating: 4, testimonial: "Love the customizable sweetness options. Jasmine tea is my go-to." },
|
||||
]}
|
||||
title="Loved By Tea Lovers"
|
||||
description="Discover why Molly Bubble Tea is becoming a local favorite."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
<FaqSplitMedia
|
||||
title="Common Questions"
|
||||
description="Curious about our boba process? Here are some answers."
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Are your teas organic?",
|
||||
content: "Yes, we prioritize organic and ethically sourced leaves.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you offer vegan options?",
|
||||
content: "Absolutely, we provide almond and oat milk alternatives.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Where are you located?",
|
||||
content: "Find our stores throughout the city, check our store locator.",
|
||||
},
|
||||
{ id: "q1", title: "How do I customize my boba?", content: "You can choose your preferred sweetness level (0-100%), ice level, and topping type for any drink." },
|
||||
{ id: "q2", title: "Are your pearls vegan?", content: "Yes, our standard tapioca pearls are made from high-quality starch, water, and brown sugar—completely plant-based." },
|
||||
{ id: "q3", title: "What makes your milk tea different?", content: "We steep our premium tea leaves at precise temperatures to lock in flavor, mixed with fresh, locally sourced milk." },
|
||||
]}
|
||||
sideTitle="Questions? We have answers."
|
||||
sideDescription="Everything you need to know about our tea and sourcing."
|
||||
faqsAnimation="blur-reveal"
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-delicious-bubble-tea-drink_23-2149870676.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Stay Updated"
|
||||
title="Join the Molly Club"
|
||||
description="Sign up for updates on new flavors and exclusive seasonal offers."
|
||||
<ContactSplit
|
||||
tag="Contact Us"
|
||||
title="Get in touch"
|
||||
description="Have questions or want to host an event with us? We'd love to hear from you."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/composition-with-delicious-thai-tea-beverage_23-2148994340.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Locations",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
<FooterLogoEmphasis
|
||||
logoText="Molly Bubble Tea"
|
||||
columns={[
|
||||
{ items: [{ label: "Order Online", href: "#products" }, { label: "Our Story", href: "#about" }] },
|
||||
{ items: [{ label: "Find a Store", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ items: [{ label: "hello@mollyboba.com" }, { label: "(555) 123-4567" }, { label: "123 Tea St, Boba City" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f4ef;
|
||||
--card: #dad6cd;
|
||||
--foreground: #2a2928;
|
||||
--primary-cta: #2a2928;
|
||||
--background: #fbfaff;
|
||||
--card: #f7f5ff;
|
||||
--foreground: #0f0022;
|
||||
--primary-cta: #8b5cf6;
|
||||
--primary-cta-text: #f5f4ef;
|
||||
--secondary-cta: #ecebea;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #2a2928;
|
||||
--accent: #ffffff;
|
||||
--background-accent: #c6b180;
|
||||
--accent: #d8cef5;
|
||||
--background-accent: #c4a8f9;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user