Merge version_1 into main #2
373
src/app/page.tsx
373
src/app/page.tsx
@@ -9,6 +9,7 @@ import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import { ShoppingBasket, CalendarDays, Truck, Flame } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -16,281 +17,119 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "reviews",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="The Crab Connect"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="The Crab Connect"
|
||||
button={{ text: "Order Online", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="The best crabs Delaware has to offer!"
|
||||
description="Online ordering available now for local pickup! Serving Lewes, DE and surrounding areas with top-quality, local seafood."
|
||||
kpis={[
|
||||
{
|
||||
value: "Est. 2019",
|
||||
label: "Local Business",
|
||||
},
|
||||
{
|
||||
value: "Fresh",
|
||||
label: "Quality Catch",
|
||||
},
|
||||
{
|
||||
value: "Daily",
|
||||
label: "Support",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Place your Order",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Leave a Review",
|
||||
href: "#reviews",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/single-crab-animal-with-copy-space_1194-638740.jpg?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-supermarket-beautiful-young-woman-holding-salmon-fish-her-hands-concept-healthy-eating-seafood_169016-4496.jpg",
|
||||
alt: "Local Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-food_23-2149536952.jpg",
|
||||
alt: "Local Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hands-holding-basket-purple-figs-white-with-blue-tablecloth_114579-29538.jpg",
|
||||
alt: "Local Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/tom-yum-mixed-seafood-thick-soup-hot-pot-spicy-thai-food_1150-26553.jpg",
|
||||
alt: "Local Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-young-female-holding-basket-with-chips-light-blue-surface_140725-69485.jpg",
|
||||
alt: "Local Customer",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 500+ locals"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Locally Sourced",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Delaware Pride",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Fresh Catch Daily",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Sustainable Fishing",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Family Owned",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "plain" }}
|
||||
title="The best crabs Delaware has to offer!"
|
||||
description="Online ordering available now for local pickup! Serving Lewes, DE and surrounding areas with top-quality, local seafood."
|
||||
kpis={[
|
||||
{ value: "Est. 2019", label: "Local Business" },
|
||||
{ value: "Fresh", label: "Quality Catch" },
|
||||
{ value: "Daily", label: "Support" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{ text: "Place your Order", href: "#contact" },
|
||||
{ text: "Leave a Review", href: "#reviews" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/single-crab-animal-with-copy-space_1194-638740.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Story"
|
||||
description="Growing up in the small town of Lewes, DE, with a family of local water-men, Bryan Stewart's destiny was set before he was born. A dream became reality in 2019 when he created The Crab Connect to share his passion for the ocean with friends and family."
|
||||
metrics={[
|
||||
{
|
||||
value: "5+",
|
||||
title: "Years Serving",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
title: "Freshness",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-wedding-couple-sailing-boat_7502-4948.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Story"
|
||||
description="Growing up in the small town of Lewes, DE, with a family of local water-men, Bryan Stewart's destiny was set before he was born. A dream became reality in 2019 when he created The Crab Connect to share his passion for the ocean with friends and family."
|
||||
metrics={[
|
||||
{ value: "5+", title: "Years Serving" },
|
||||
{ value: "100%", title: "Freshness" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-wedding-couple-sailing-boat_7502-4948.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Local Pickup",
|
||||
description: "Order online and pick up at our Lewes, DE location.",
|
||||
buttonIcon: "ShoppingBasket",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/single-crab-animal-with-copy-space_1194-638740.jpg?_wi=2",
|
||||
imageAlt: "fresh blue crabs top view",
|
||||
},
|
||||
{
|
||||
title: "Event Booking",
|
||||
description: "Book our steam trailer for your next special event.",
|
||||
buttonIcon: "CalendarDays",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-wedding-couple-sailing-boat_7502-4948.jpg?_wi=2",
|
||||
imageAlt: "waterman on boat lewes delaware",
|
||||
},
|
||||
{
|
||||
title: "Wholesale Seafood",
|
||||
description: "High-quality seafood solutions for local businesses.",
|
||||
buttonIcon: "Truck",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-view-salmon-fish-brown-wooden-cutting-board-with-green-pepper-fir-branches-cutlery-set-fallen-oil-bottle-tomato-salt-pepper-dark-table_140725-143816.jpg",
|
||||
imageAlt: "steaming hot crabs trailer",
|
||||
},
|
||||
{
|
||||
title: "Fresh Steaming",
|
||||
description: "We steam your crabs on-site so they're ready to eat.",
|
||||
buttonIcon: "Flame",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-supermarket-beautiful-young-woman-holding-salmon-fish-her-hands-concept-healthy-eating-seafood_169016-4496.jpg?_wi=1",
|
||||
imageAlt: "happy customer seafood market",
|
||||
},
|
||||
]}
|
||||
title="What We Do"
|
||||
description="From local pickups to event wholesale, we bring the best seafood straight to you. Don't feel like cooking? Use our mobile steam trailer!"
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="What We Do"
|
||||
description="From local pickups to event wholesale, we bring the best seafood straight to you. Don't feel like cooking? Use our mobile steam trailer!"
|
||||
features={[
|
||||
{ title: "Local Pickup", description: "Order online and pick up at our Lewes, DE location.", buttonIcon: ShoppingBasket, imageSrc: "http://img.b2bpic.net/free-photo/single-crab-animal-with-copy-space_1194-638740.jpg" },
|
||||
{ title: "Event Booking", description: "Book our steam trailer for your next special event.", buttonIcon: CalendarDays, imageSrc: "http://img.b2bpic.net/free-photo/young-wedding-couple-sailing-boat_7502-4948.jpg" },
|
||||
{ title: "Wholesale Seafood", description: "High-quality seafood solutions for local businesses.", buttonIcon: Truck, imageSrc: "http://img.b2bpic.net/free-photo/vertical-view-salmon-fish-brown-wooden-cutting-board-with-green-pepper-fir-branches-cutlery-set-fallen-oil-bottle-tomato-salt-pepper-dark-table_140725-143816.jpg" },
|
||||
{ title: "Fresh Steaming", description: "We steam your crabs on-site so they're ready to eat.", buttonIcon: Flame, imageSrc: "http://img.b2bpic.net/free-photo/woman-supermarket-beautiful-young-woman-holding-salmon-fish-her-hands-concept-healthy-eating-seafood_169016-4496.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Faith Hauger",
|
||||
handle: "@faith",
|
||||
testimonial: "Friendly, knowledgeable and helpful staff. Great prices and convenient location.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-supermarket-beautiful-young-woman-holding-salmon-fish-her-hands-concept-healthy-eating-seafood_169016-4496.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jill Greenleigh",
|
||||
handle: "@jill",
|
||||
testimonial: "The best place in the area to get your crabs! They were large and heavy!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-food_23-2149536952.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Local Patron",
|
||||
handle: "@crablover",
|
||||
testimonial: "Excellent service and always fresh. Highly recommended!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-basket-purple-figs-white-with-blue-tablecloth_114579-29538.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Family Gatherer",
|
||||
handle: "@bbq",
|
||||
testimonial: "Crab Connect is amazing. The staff is so helpful.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tom-yum-mixed-seafood-thick-soup-hot-pot-spicy-thai-food_1150-26553.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Happy Camper",
|
||||
handle: "@lewedes",
|
||||
testimonial: "We love the convenience of the local pickup location.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-holding-basket-with-chips-light-blue-surface_140725-69485.jpg",
|
||||
},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Customer Reviews"
|
||||
description="See why our customers keep coming back for more."
|
||||
/>
|
||||
</div>
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
showRating={true}
|
||||
title="Customer Reviews"
|
||||
description="See why our customers keep coming back for more."
|
||||
testimonials={[
|
||||
{ id: "1", name: "Faith Hauger", handle: "@faith", testimonial: "Friendly, knowledgeable and helpful staff. Great prices and convenient location.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-supermarket-beautiful-young-woman-holding-salmon-fish-her-hands-concept-healthy-eating-seafood_169016-4496.jpg" },
|
||||
{ id: "2", name: "Jill Greenleigh", handle: "@jill", testimonial: "The best place in the area to get your crabs! They were large and heavy!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-food_23-2149536952.jpg" },
|
||||
{ id: "3", name: "Local Patron", handle: "@crablover", testimonial: "Excellent service and always fresh. Highly recommended!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-basket-purple-figs-white-with-blue-tablecloth_114579-29538.jpg" },
|
||||
{ id: "4", name: "Family Gatherer", handle: "@bbq", testimonial: "Crab Connect is amazing. The staff is so helpful.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/tom-yum-mixed-seafood-thick-soup-hot-pot-spicy-thai-food_1150-26553.jpg" },
|
||||
{ id: "5", name: "Happy Camper", handle: "@lewedes", testimonial: "We love the convenience of the local pickup location.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-holding-basket-with-chips-light-blue-surface_140725-69485.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Get in Touch"
|
||||
title="Location & Contact"
|
||||
description="Questions? Visit us at 17580 Coastal Highway, Lewes, DE 19958. Give us a call at (302)-396-4041."
|
||||
inputPlaceholder="Enter your email for updates"
|
||||
buttonText="Subscribe"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get in Touch"
|
||||
title="Location & Contact"
|
||||
description="Questions? Visit us at 17580 Coastal Highway, Lewes, DE 19958. Give us a call at (302)-396-4041."
|
||||
inputPlaceholder="Enter your email for updates"
|
||||
buttonText="Subscribe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Reviews",
|
||||
href: "#reviews",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "https://facebook.com",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="The Crab Connect"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="The Crab Connect"
|
||||
columns={[
|
||||
{ items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }, { label: "Reviews", href: "#reviews" }] },
|
||||
{ items: [{ label: "Facebook", href: "https://facebook.com" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user