Merge version_1 into main #2
406
src/app/page.tsx
406
src/app/page.tsx
@@ -25,303 +25,127 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Experience",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Flatcap Coffee Co."
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Experience", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Flatcap Coffee Co."
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="A Hidden Garden in the Heart of London"
|
||||
description="Escape the city bustle and find your sanctuary. At Flatcap Coffee Co., we serve perfectly brewed artisanal coffee amongst lush greenery and peaceful botanical corners."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Mary McRobbins",
|
||||
handle: "@mary",
|
||||
testimonial: "Absolutely stunning business! The coffee is delicious and the general quality of the atmosphere was equally as pleasant!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-coffee-cup-close-up_23-2148973385.jpg?_wi=1",
|
||||
imageAlt: "cozy coffee shop garden aesthetic",
|
||||
},
|
||||
{
|
||||
name: "Karina Kharchenko",
|
||||
handle: "@karina",
|
||||
testimonial: "This is the most beautiful place I’ve ever seen to relax and enjoy a cup of coffee or tea, the atmosphere is simply gorgeous 🫶",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tool-used-coffee-machine-coffee-making-process_23-2150187556.jpg",
|
||||
imageAlt: "artisanal coffee brewing process closeup",
|
||||
},
|
||||
{
|
||||
name: "Emily",
|
||||
handle: "@emily",
|
||||
testimonial: "Beautiful, magical, calm, perfect place to read a book or meet a friend for the best (and spiciest) chai latte.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-10281.jpg?_wi=1",
|
||||
imageAlt: "happy coffee shop customer portrait",
|
||||
},
|
||||
{
|
||||
name: "Nina Beilby",
|
||||
handle: "@nina",
|
||||
testimonial: "Awesome coffee which is difficult to find around here. A lovely spot to sit amongst the plants and flowers of the nursery.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-10275.jpg?_wi=1",
|
||||
imageAlt: "young woman enjoying matcha latte",
|
||||
},
|
||||
{
|
||||
name: "Yonatan Baharev",
|
||||
handle: "@yonatan",
|
||||
testimonial: "The atmosphere is perfect, not too noisy and peaceful. The staff is very nice and the food is not pricy and very high quality and tasty!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/back-view-man-drinking-coffee-restaurant_23-2147775827.jpg?_wi=1",
|
||||
imageAlt: "professional drinking espresso at cafe",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Visit Us",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hands-holding-coffee-cup-close-up_23-2148973385.jpg?_wi=2"
|
||||
imageAlt="Coffee shop garden interior"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-10281.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-10275.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/back-view-man-drinking-coffee-restaurant_23-2147775827.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-woman-reading-book-home-while-drinking-tea_23-2148391976.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-woman-enjoying-coffee-cup_23-2148756305.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 500+ happy coffee lovers"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Artisanal Brews",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Botanical Vibe",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "London's Best Kept Secret",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Locally Sourced Beans",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Freshly Baked Treats",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="A Hidden Garden in the Heart of London"
|
||||
description="Escape the city bustle and find your sanctuary. At Flatcap Coffee Co., we serve perfectly brewed artisanal coffee amongst lush greenery and peaceful botanical corners."
|
||||
testimonials={[
|
||||
{ name: "Mary McRobbins", handle: "@mary", testimonial: "Absolutely stunning business! The coffee is delicious and the general quality of the atmosphere was equally as pleasant!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-coffee-cup-close-up_23-2148973385.jpg", imageAlt: "cozy coffee shop garden aesthetic" },
|
||||
{ name: "Karina Kharchenko", handle: "@karina", testimonial: "This is the most beautiful place I’ve ever seen to relax and enjoy a cup of coffee or tea, the atmosphere is simply gorgeous 🫶", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/tool-used-coffee-machine-coffee-making-process_23-2150187556.jpg", imageAlt: "artisanal coffee brewing process closeup" },
|
||||
{ name: "Emily", handle: "@emily", testimonial: "Beautiful, magical, calm, perfect place to read a book or meet a friend for the best (and spiciest) chai latte.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-10281.jpg", imageAlt: "happy coffee shop customer portrait" },
|
||||
{ name: "Nina Beilby", handle: "@nina", testimonial: "Awesome coffee which is difficult to find around here. A lovely spot to sit amongst the plants and flowers of the nursery.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-10275.jpg", imageAlt: "young woman enjoying matcha latte" },
|
||||
{ name: "Yonatan Baharev", handle: "@yonatan", testimonial: "The atmosphere is perfect, not too noisy and peaceful. The staff is very nice and the food is not pricy and very high quality and tasty!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/back-view-man-drinking-coffee-restaurant_23-2147775827.jpg", imageAlt: "professional drinking espresso at cafe" }
|
||||
]}
|
||||
buttons={[{ text: "Visit Us", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hands-holding-coffee-cup-close-up_23-2148973385.jpg"
|
||||
imageAlt="Coffee shop garden interior"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-10281.jpg", alt: "Customer 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-10275.jpg", alt: "Customer 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/back-view-man-drinking-coffee-restaurant_23-2147775827.jpg", alt: "Customer 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-woman-reading-book-home-while-drinking-tea_23-2148391976.jpg", alt: "Customer 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-woman-enjoying-coffee-cup_23-2148756305.jpg", alt: "Customer 5" }
|
||||
]}
|
||||
avatarText="Join 500+ happy coffee lovers"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Artisanal Brews" },
|
||||
{ type: "text", text: "Botanical Vibe" },
|
||||
{ type: "text", text: "London's Best Kept Secret" },
|
||||
{ type: "text", text: "Locally Sourced Beans" },
|
||||
{ type: "text", text: "Freshly Baked Treats" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Artisanal Coffee & botanical bliss"
|
||||
buttons={[
|
||||
{
|
||||
text: "Our Story",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout useInvertedBackground={false} title="Artisanal Coffee & botanical bliss" buttons={[{ text: "Our Story", href: "#" }]} />
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Botanical Haven",
|
||||
subtitle: "A slice of nature in the city",
|
||||
category: "Ambiance",
|
||||
value: "Relaxing greenery",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Expertly Brewed",
|
||||
subtitle: "Perfectly crafted espresso",
|
||||
category: "Coffee",
|
||||
value: "Artisanal quality",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Peaceful Nooks",
|
||||
subtitle: "Calm spots for reading or meetings",
|
||||
category: "Service",
|
||||
value: "Hidden gem",
|
||||
},
|
||||
]}
|
||||
title="The Flatcap Experience"
|
||||
description="More than just a coffee shop, we are your neighborhood haven."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "1", title: "Botanical Haven", subtitle: "A slice of nature in the city", category: "Ambiance", value: "Relaxing greenery" },
|
||||
{ id: "2", title: "Expertly Brewed", subtitle: "Perfectly crafted espresso", category: "Coffee", value: "Artisanal quality" },
|
||||
{ id: "3", title: "Peaceful Nooks", subtitle: "Calm spots for reading or meetings", category: "Service", value: "Hidden gem" }
|
||||
]}
|
||||
title="The Flatcap Experience"
|
||||
description="More than just a coffee shop, we are your neighborhood haven."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Mary McRobbins",
|
||||
handle: "@mary",
|
||||
testimonial: "Absolutely stunning business! The coffee is delicious and the general quality of the atmosphere was equally as pleasant!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-10281.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "zulq hulk",
|
||||
handle: "@zulq",
|
||||
testimonial: "Amazed by the nature and design of this café. Ordered me a latte and it was perfect. Definitely coming here again!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-10275.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Karina Kharchenko",
|
||||
handle: "@karina",
|
||||
testimonial: "This is the most beautiful place I’ve ever seen to relax and enjoy a cup of coffee or tea, the atmosphere is simply gorgeous.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/back-view-man-drinking-coffee-restaurant_23-2147775827.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Nina Beilby",
|
||||
handle: "@nina",
|
||||
testimonial: "Awesome coffee which is difficult to find around here. A lovely spot to sit amongst the plants and flowers of the nursery.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-reading-book-home-while-drinking-tea_23-2148391976.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Yonatan Baharev",
|
||||
handle: "@yonatan",
|
||||
testimonial: "The atmosphere is perfect, not too noisy and peaceful. The staff is very nice and the food is not pricy and very high quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-enjoying-coffee-cup_23-2148756305.jpg",
|
||||
},
|
||||
]}
|
||||
title="Loved by our Community"
|
||||
description="What our guests say about their experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{ id: "1", name: "Mary McRobbins", handle: "@mary", testimonial: "Absolutely stunning business! The coffee is delicious and the general quality of the atmosphere was equally as pleasant!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-10281.jpg" },
|
||||
{ id: "2", name: "zulq hulk", handle: "@zulq", testimonial: "Amazed by the nature and design of this café. Ordered me a latte and it was perfect. Definitely coming here again!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-10275.jpg" },
|
||||
{ id: "3", name: "Karina Kharchenko", handle: "@karina", testimonial: "This is the most beautiful place I’ve ever seen to relax and enjoy a cup of coffee or tea, the atmosphere is simply gorgeous.", imageSrc: "http://img.b2bpic.net/free-photo/back-view-man-drinking-coffee-restaurant_23-2147775827.jpg" },
|
||||
{ id: "4", name: "Nina Beilby", handle: "@nina", testimonial: "Awesome coffee which is difficult to find around here. A lovely spot to sit amongst the plants and flowers of the nursery.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-reading-book-home-while-drinking-tea_23-2148391976.jpg" },
|
||||
{ id: "5", name: "Yonatan Baharev", handle: "@yonatan", testimonial: "The atmosphere is perfect, not too noisy and peaceful. The staff is very nice and the food is not pricy and very high quality.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-enjoying-coffee-cup_23-2148756305.jpg" }
|
||||
]}
|
||||
title="Loved by our Community"
|
||||
description="What our guests say about their experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Visit Flatcap Coffee Co."
|
||||
description="Find your new favorite local spot in London. Send us a message if you're planning a visit with a large group!"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your message or question",
|
||||
rows: 4,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/charming-balcony-scene-with-roses-outdoor-dining_23-2151986094.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Visit Flatcap Coffee Co."
|
||||
description="Find your new favorite local spot in London. Send us a message if you're planning a visit with a large group!"
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Your message or question", rows: 4 }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/charming-balcony-scene-with-roses-outdoor-dining_23-2151986094.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Menu",
|
||||
items: [
|
||||
{
|
||||
label: "Coffee",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Tea",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Food",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "About",
|
||||
items: [
|
||||
{
|
||||
label: "Our Garden",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Our Story",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Flatcap Coffee Co. London"
|
||||
bottomRightText="Hidden gem in the city."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Menu", items: [
|
||||
{ label: "Coffee", href: "#" },
|
||||
{ label: "Tea", href: "#" },
|
||||
{ label: "Food", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "About", items: [
|
||||
{ label: "Our Garden", href: "#" },
|
||||
{ label: "Our Story", href: "#" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2024 Flatcap Coffee Co. London"
|
||||
bottomRightText="Hidden gem in the city."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user