Merge version_1 into main #4
248
src/app/page.tsx
248
src/app/page.tsx
@@ -26,161 +26,111 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Products", id: "products"},
|
||||
{
|
||||
name: "Features", id: "features"},
|
||||
{
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
]}
|
||||
brandName="PROCISE"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
]}
|
||||
brandName="PROCISE"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
title="Engineered for Every Terrain"
|
||||
description="Procise Trailblazers blend rugged durability with high-performance materials to keep you moving further on any path."
|
||||
tag="New Collection"
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now", href: "#products"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CGojgg2IKSXIV5K89aiFUqh6lp/uploaded-1776021728510-d9w1jm1z.png", imageAlt: "Procise Trailblazer Side View"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CGojgg2IKSXIV5K89aiFUqh6lp/uploaded-1776021728511-6bhihwoe.png", imageAlt: "Procise Brand Logo Mark"}
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Top rated hiking footwear"
|
||||
tagIcon={Sparkles}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Engineered for Every Terrain"
|
||||
description="Procise Trailblazers blend rugged durability with high-performance materials to keep you moving further on any path."
|
||||
tag="New Collection"
|
||||
tagIcon={Sparkles}
|
||||
buttons={[{ text: "Shop Now", href: "#products" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CGojgg2IKSXIV5K89aiFUqh6lp/uploaded-1776021728510-d9w1jm1z.png", imageAlt: "Procise Trailblazer Side View" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CGojgg2IKSXIV5K89aiFUqh6lp/uploaded-1776021728511-6bhihwoe.png", imageAlt: "Procise Brand Logo Mark" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Top rated hiking footwear"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "Trailblazer Classic", price: "$120", variant: "Olive/Brown", imageSrc: "http://img.b2bpic.net/free-photo/crop-man-tying-laces_23-2147814026.jpg"},
|
||||
{
|
||||
id: "p2", name: "Trailblazer Pro", price: "$150", variant: "Black/Grey", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cool-teenage-boy-posing-chair_23-2149085899.jpg"},
|
||||
{
|
||||
id: "p3", name: "Mountain Tech", price: "$180", variant: "Deep Forest", imageSrc: "http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894550.jpg"},
|
||||
{
|
||||
id: "p4", name: "Summit Explorer", price: "$135", variant: "Sand/Stone", imageSrc: "http://img.b2bpic.net/free-photo/leather-boots_1203-8143.jpg"},
|
||||
{
|
||||
id: "p5", name: "Valley Walker", price: "$110", variant: "Tan/Brown", imageSrc: "http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers-presentation_23-2151005715.jpg"},
|
||||
{
|
||||
id: "p6", name: "Urban Trail", price: "$125", variant: "Dark Olive", imageSrc: "http://img.b2bpic.net/free-photo/close-up-purple-texture-fabric-with-small-pattern-small-squares_91008-489.jpg"},
|
||||
]}
|
||||
title="Shop Procise"
|
||||
description="Explore our curated range of technical footwear."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Trailblazer Classic", price: "$120", variant: "Olive/Brown", imageSrc: "http://img.b2bpic.net/free-photo/crop-man-tying-laces_23-2147814026.jpg" },
|
||||
{ id: "p2", name: "Trailblazer Pro", price: "$150", variant: "Black/Grey", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cool-teenage-boy-posing-chair_23-2149085899.jpg" },
|
||||
{ id: "p3", name: "Mountain Tech", price: "$180", variant: "Deep Forest", imageSrc: "http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894550.jpg" },
|
||||
{ id: "p4", name: "Summit Explorer", price: "$135", variant: "Sand/Stone", imageSrc: "http://img.b2bpic.net/free-photo/leather-boots_1203-8143.jpg" },
|
||||
{ id: "p5", name: "Valley Walker", price: "$110", variant: "Tan/Brown", imageSrc: "http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers-presentation_23-2151005715.jpg" },
|
||||
{ id: "p6", name: "Urban Trail", price: "$125", variant: "Dark Olive", imageSrc: "http://img.b2bpic.net/free-photo/close-up-purple-texture-fabric-with-small-pattern-small-squares_91008-489.jpg" },
|
||||
]}
|
||||
title="Shop Procise"
|
||||
description="Explore our curated range of technical footwear."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Weather-Proof", description: "Constructed with advanced water-resistant membranes."},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Energy Return", description: "High-rebound midsoles for all-day comfort."},
|
||||
{
|
||||
icon: Star,
|
||||
title: "All-Terrain Grip", description: "Proprietary outsoles designed for varied surfaces."},
|
||||
]}
|
||||
title="Built to Perform"
|
||||
description="Every element of Procise footwear is designed for maximum endurance and comfort."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Shield, title: "Weather-Proof", description: "Constructed with advanced water-resistant membranes." },
|
||||
{ icon: Zap, title: "Energy Return", description: "High-rebound midsoles for all-day comfort." },
|
||||
{ icon: Star, title: "All-Terrain Grip", description: "Proprietary outsoles designed for varied surfaces." },
|
||||
]}
|
||||
title="Built to Perform"
|
||||
description="Every element of Procise footwear is designed for maximum endurance and comfort."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", name: "Alex Rivers", date: "Oct 2023", title: "Avid Hiker", quote: "The most comfortable and reliable shoe I've ever worn on the trails.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/young-man-smiling-confident-looking-side-park_839833-20591.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CGojgg2IKSXIV5K89aiFUqh6lp/uploaded-1776021728510-d9w1jm1z.png", imageAlt: "man outdoor portrait"},
|
||||
{
|
||||
id: "t2", name: "Jordan P.", date: "Nov 2023", title: "Backpacker", quote: "Sturdy yet lightweight, handled 15 miles a day perfectly.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-male-tourist-walking-with-backpack-pink-wall-color-emotions-tourist_140725-122599.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CGojgg2IKSXIV5K89aiFUqh6lp/uploaded-1776021728511-6bhihwoe.png", imageAlt: "man outdoor portrait"},
|
||||
{
|
||||
id: "t3", name: "Sam K.", date: "Dec 2023", title: "Trail Runner", quote: "Fantastic grip on muddy terrain and great support.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/happy-man-with-earphones-smiling-camera_23-2148322120.jpg", imageSrc: "http://img.b2bpic.net/free-photo/crop-man-tying-laces_23-2147814026.jpg", imageAlt: "man outdoor portrait"},
|
||||
{
|
||||
id: "t4", name: "Casey W.", date: "Jan 2024", title: "Nature Photographer", quote: "Procise shoes are my go-to for all my photography expeditions.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-young-male-with-his-yellow-bag-preparing-trip-blue-wall_140725-89707.jpg", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cool-teenage-boy-posing-chair_23-2149085899.jpg", imageAlt: "man outdoor portrait"},
|
||||
{
|
||||
id: "t5", name: "Riley T.", date: "Feb 2024", title: "Outdoor Enthusiast", quote: "Beautiful design, even better function. Highly recommended.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/lonely-young-man-hiking-with-backpack-outdoors_651396-1946.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894550.jpg", imageAlt: "man outdoor portrait"},
|
||||
]}
|
||||
title="Loved by Explorers", description="See why adventurers choose Procise for their journeys."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alex Rivers", date: "Oct 2023", title: "Avid Hiker", quote: "The most comfortable and reliable shoe I've ever worn on the trails.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/young-man-smiling-confident-looking-side-park_839833-20591.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CGojgg2IKSXIV5K89aiFUqh6lp/uploaded-1776021728510-d9w1jm1z.png", imageAlt: "man outdoor portrait" },
|
||||
{ id: "t2", name: "Jordan P.", date: "Nov 2023", title: "Backpacker", quote: "Sturdy yet lightweight, handled 15 miles a day perfectly.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-male-tourist-walking-with-backpack-pink-wall-color-emotions-tourist_140725-122599.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CGojgg2IKSXIV5K89aiFUqh6lp/uploaded-1776021728511-6bhihwoe.png", imageAlt: "man outdoor portrait" },
|
||||
{ id: "t3", name: "Sam K.", date: "Dec 2023", title: "Trail Runner", quote: "Fantastic grip on muddy terrain and great support.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/happy-man-with-earphones-smiling-camera_23-2148322120.jpg", imageSrc: "http://img.b2bpic.net/free-photo/crop-man-tying-laces_23-2147814026.jpg", imageAlt: "man outdoor portrait" },
|
||||
{ id: "t4", name: "Casey W.", date: "Jan 2024", title: "Nature Photographer", quote: "Procise shoes are my go-to for all my photography expeditions.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-young-male-with-his-yellow-bag-preparing-trip-blue-wall_140725-89707.jpg", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cool-teenage-boy-posing-chair_23-2149085899.jpg", imageAlt: "man outdoor portrait" },
|
||||
{ id: "t5", name: "Riley T.", date: "Feb 2024", title: "Outdoor Enthusiast", quote: "Beautiful design, even better function. Highly recommended.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/lonely-young-man-hiking-with-backpack-outdoors_651396-1946.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894550.jpg", imageAlt: "man outdoor portrait" },
|
||||
]}
|
||||
title="Loved by Explorers"
|
||||
description="See why adventurers choose Procise for their journeys."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
title="By The Numbers"
|
||||
description="Proven performance for the modern explorer."
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "15K+", title: "Happy Hikers", description: "Trailblazers across the globe.", icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m2", value: "4.9", title: "Avg. Rating", description: "Based on 5,000+ customer reviews.", icon: Star,
|
||||
},
|
||||
{
|
||||
id: "m3", value: "500", title: "Terrain Types", description: "Tested in all major environments.", icon: Mountain,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
title="By The Numbers"
|
||||
description="Proven performance for the modern explorer."
|
||||
metrics={[
|
||||
{ id: "m1", value: "15K+", title: "Happy Hikers", description: "Trailblazers across the globe.", icon: Users },
|
||||
{ id: "m2", value: "4.9", title: "Avg. Rating", description: "Based on 5,000+ customer reviews.", icon: Star },
|
||||
{ id: "m3", value: "500", title: "Terrain Types", description: "Tested in all major environments.", icon: Mountain },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About Us", href: "#"},
|
||||
{
|
||||
label: "Shop", href: "#products"},
|
||||
{
|
||||
label: "Support", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Shipping", href: "#"},
|
||||
{
|
||||
label: "Returns", href: "#"},
|
||||
{
|
||||
label: "FAQ", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="PROCISE"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "About Us", href: "#" }, { label: "Shop", href: "#products" }, { label: "Support", href: "#" }] },
|
||||
{ items: [{ label: "Shipping", href: "#" }, { label: "Returns", href: "#" }, { label: "FAQ", href: "#" }] },
|
||||
]}
|
||||
logoText="PROCISE"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user