Update src/app/page.tsx
This commit is contained in:
451
src/app/page.tsx
451
src/app/page.tsx
@@ -28,334 +28,145 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Mystic Salad Co."
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Menu", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Mystic Salad Co."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
imagePosition="right"
|
||||
title="Mystic's Freshest, Custom-Made Salads"
|
||||
description="Experience the ultimate lunch experience. Build your own massive salad with unlimited toppings, fresh proteins, and homemade dressings. Perfectly situated by the river."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/assortment-picnic-goodies-blanket_23-2148921032.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/easy-flexitarian-diet-food-composition_23-2148955514.jpg",
|
||||
alt: "Fresh ingredient bowl",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/creative-assortment-delicious-breakfast-meal_23-2148878801.jpg",
|
||||
alt: "Healthy breakfast meal",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/flat-lay-plate-with-keto-diet-food-nuts_23-2149260311.jpg",
|
||||
alt: "Keto diet plate",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/top-view-organic-oranges-with-salad_23-2148538618.jpg",
|
||||
alt: "Oranges with salad",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/top-view-bowls-with-spices-cut-yellow-bell-pepper-cauliflower-cut-red-cabbage-cut-green-tomatoes-wooden-table_140725-63058.jpg",
|
||||
alt: "Spices and vegetables",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 10k+ salad lovers"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Locally Sourced",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Farm to Bowl",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "100% Organic",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Artisanal Dressings",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Fresh Daily",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{ variant: "plain" }}
|
||||
imagePosition="right"
|
||||
title="Mystic's Freshest, Custom-Made Salads"
|
||||
description="Experience the ultimate lunch experience. Build your own massive salad with unlimited toppings, fresh proteins, and homemade dressings. Perfectly situated by the river."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/assortment-picnic-goodies-blanket_23-2148921032.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/easy-flexitarian-diet-food-composition_23-2148955514.jpg", alt: "Fresh ingredient bowl" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/creative-assortment-delicious-breakfast-meal_23-2148878801.jpg", alt: "Healthy breakfast meal" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/flat-lay-plate-with-keto-diet-food-nuts_23-2149260311.jpg", alt: "Keto diet plate" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/top-view-organic-oranges-with-salad_23-2148538618.jpg", alt: "Oranges with salad" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/top-view-bowls-with-spices-cut-yellow-bell-pepper-cauliflower-cut-red-cabbage-cut-green-tomatoes-wooden-table_140725-63058.jpg", alt: "Spices and vegetables" },
|
||||
]}
|
||||
avatarText="Join 10k+ salad lovers"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Locally Sourced" },
|
||||
{ type: "text", text: "Farm to Bowl" },
|
||||
{ type: "text", text: "100% Organic" },
|
||||
{ type: "text", text: "Artisanal Dressings" },
|
||||
{ type: "text", text: "Fresh Daily" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Why Locals Love Us"
|
||||
metrics={[
|
||||
{
|
||||
icon: Leaf,
|
||||
label: "Fresh Daily",
|
||||
value: "100%",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
label: "Satisfied Guests",
|
||||
value: "10k+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Local Favorite",
|
||||
value: "Top Rated",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Why Locals Love Us"
|
||||
metrics={[
|
||||
{ icon: Leaf, label: "Fresh Daily", value: "100%" },
|
||||
{ icon: Users, label: "Satisfied Guests", value: "10k+" },
|
||||
{ icon: Award, label: "Local Favorite", value: "Top Rated" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Unlimited Toppings",
|
||||
description: "Choose from a plethora of veggies, fruits, seeds, and nuts.",
|
||||
bentoComponent: {
|
||||
reveal-icon: {
|
||||
icon: PlusCircle,
|
||||
},
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-fresh-vegetables-with-copy-space_23-2148495778.jpg",
|
||||
imageAlt: "fresh kitchen prep vegetables",
|
||||
},
|
||||
{
|
||||
title: "Premium Proteins",
|
||||
description: "Add grilled chicken, tuna, or our famous chicken salad.",
|
||||
bentoComponent: {
|
||||
reveal-icon: {
|
||||
icon: Fish,
|
||||
},
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/assortment-picnic-goodies-blanket_23-2148921032.jpg?_wi=2",
|
||||
imageAlt: "fresh kitchen prep vegetables",
|
||||
},
|
||||
{
|
||||
title: "Homemade Dressings",
|
||||
description: "Dozens of choices including our signature Thai Peanut.",
|
||||
bentoComponent: {
|
||||
reveal-icon: {
|
||||
icon: Droplets,
|
||||
},
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-person-s-hand-slicing-red-tomato-chopping-board_23-2147944239.jpg",
|
||||
imageAlt: "fresh kitchen prep vegetables",
|
||||
},
|
||||
]}
|
||||
title="Crafted Your Way"
|
||||
description="From farm-fresh greens to artisanal dressings, create your perfect meal. Every bowl is chopped, tossed, and made to order."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Unlimited Toppings", description: "Choose from a plethora of veggies, fruits, seeds, and nuts.", bentoComponent: { icon: PlusCircle }, imageSrc: "http://img.b2bpic.net/free-photo/top-view-fresh-vegetables-with-copy-space_23-2148495778.jpg", imageAlt: "fresh kitchen prep vegetables" },
|
||||
{ title: "Premium Proteins", description: "Add grilled chicken, tuna, or our famous chicken salad.", bentoComponent: { icon: Fish }, imageSrc: "http://img.b2bpic.net/free-photo/assortment-picnic-goodies-blanket_23-2148921032.jpg", imageAlt: "fresh kitchen prep vegetables" },
|
||||
{ title: "Homemade Dressings", description: "Dozens of choices including our signature Thai Peanut.", bentoComponent: { icon: Droplets }, imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-person-s-hand-slicing-red-tomato-chopping-board_23-2147944239.jpg", imageAlt: "fresh kitchen prep vegetables" },
|
||||
]}
|
||||
title="Crafted Your Way"
|
||||
description="From farm-fresh greens to artisanal dressings, create your perfect meal. Every bowl is chopped, tossed, and made to order."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Emy Uhlig",
|
||||
role: "Local Guide",
|
||||
company: "Mystic",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-woman-seaside_23-2149137140.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Douglas",
|
||||
role: "Local Guide",
|
||||
company: "Mystic",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashionable-handsome-male-student-with-thick-beard-sitting-wooden-table-with-mug-drinking-coffee-having-happy-cheerful-face-expression_273609-1763.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Zachary Spicer",
|
||||
role: "Regular",
|
||||
company: "Mystic",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-cooking-holding-fresh-parsley-adding-herbs-while-making-salad-healthy_1258-198062.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Elizabeth Funk",
|
||||
role: "Local Guide",
|
||||
company: "Mystic",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5051.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Richard Webb",
|
||||
role: "Local Guide",
|
||||
company: "Mystic",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-female-student-taking-break-from-classes-drinking-grapefruit-lemonade-smiling_197531-22600.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "5/5",
|
||||
label: "Avg Rating",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Freshness",
|
||||
},
|
||||
{
|
||||
value: "Huge",
|
||||
label: "Portion Size",
|
||||
},
|
||||
]}
|
||||
title="Hear From Our Community"
|
||||
description="Don't just take our word for it—see why locals and visitors alike make us their go-to lunch spot."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Emy Uhlig", role: "Local Guide", company: "Mystic", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-woman-seaside_23-2149137140.jpg" },
|
||||
{ id: "2", name: "Douglas", role: "Local Guide", company: "Mystic", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fashionable-handsome-male-student-with-thick-beard-sitting-wooden-table-with-mug-drinking-coffee-having-happy-cheerful-face-expression_273609-1763.jpg" },
|
||||
{ id: "3", name: "Zachary Spicer", role: "Regular", company: "Mystic", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-cooking-holding-fresh-parsley-adding-herbs-while-making-salad-healthy_1258-198062.jpg" },
|
||||
{ id: "4", name: "Elizabeth Funk", role: "Local Guide", company: "Mystic", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5051.jpg" },
|
||||
{ id: "5", name: "Richard Webb", role: "Local Guide", company: "Mystic", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-female-student-taking-break-from-classes-drinking-grapefruit-lemonade-smiling_197531-22600.jpg" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "5/5", label: "Avg Rating" },
|
||||
{ value: "100%", label: "Freshness" },
|
||||
{ value: "Huge", label: "Portion Size" },
|
||||
]}
|
||||
title="Hear From Our Community"
|
||||
description="Don't just take our word for it—see why locals and visitors alike make us their go-to lunch spot."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={true}
|
||||
title="By The Numbers"
|
||||
tag="Our Impact"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "20+",
|
||||
description: "Fresh Ingredients",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "10+",
|
||||
description: "Custom Dressings",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Daily",
|
||||
description: "Soup Specials",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={true}
|
||||
title="By The Numbers"
|
||||
tag="Our Impact"
|
||||
metrics={[
|
||||
{ id: "m1", value: "20+", description: "Fresh Ingredients" },
|
||||
{ id: "m2", value: "10+", description: "Custom Dressings" },
|
||||
{ id: "m3", value: "Daily", description: "Soup Specials" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you offer indoor seating?",
|
||||
content: "We are a takeout-only establishment. However, we are located right next to the beautiful Mystic River park with plenty of benches to enjoy your meal.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Are there vegan options?",
|
||||
content: "Yes, we have a vast array of fresh vegetables, seeds, and nuts, along with several vegan-friendly dressing options.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Do you accept custom salad requests?",
|
||||
content: "Absolutely! Everything we do is made-to-order, so you can pick your exact greens, veggies, toppings, and dressing.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you offer indoor seating?", content: "We are a takeout-only establishment. However, we are located right next to the beautiful Mystic River park with plenty of benches to enjoy your meal." },
|
||||
{ id: "f2", title: "Are there vegan options?", content: "Yes, we have a vast array of fresh vegetables, seeds, and nuts, along with several vegan-friendly dressing options." },
|
||||
{ id: "f3", title: "Do you accept custom salad requests?", content: "Absolutely! Everything we do is made-to-order, so you can pick your exact greens, veggies, toppings, and dressing." },
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Visit Us in Mystic"
|
||||
description="Ready for the best salad of your life? Swing by downtown Mystic and grab lunch by the water."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-greenery_53876-147903.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Visit Us in Mystic"
|
||||
description="Ready for the best salad of your life? Swing by downtown Mystic and grab lunch by the water."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name" },
|
||||
{ name: "email", type: "email", placeholder: "Your Email" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-greenery_53876-147903.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-vegetables-as-whole-sliced-peppers-whole-tomatoes-with-grater-garlic-crusher-melted-butter-wood-with-copy-space_141793-12944.jpg"
|
||||
logoText="Mystic Salad Co."
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Menu",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Testimonials",
|
||||
href: "#testimonials",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-vegetables-as-whole-sliced-peppers-whole-tomatoes-with-grater-garlic-crusher-melted-butter-wood-with-copy-space_141793-12944.jpg"
|
||||
logoText="Mystic Salad Co."
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Menu", href: "#features" }, { label: "Testimonials", href: "#testimonials" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user