Merge version_2 into main #2

Merged
bender merged 4 commits from version_2 into main 2026-05-08 19:41:48 +00:00
4 changed files with 272 additions and 224 deletions

View File

@@ -6,44 +6,66 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
import AboutMetric from "@/components/sections/about/AboutMetric";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Zap, Users, Award, TrendingUp } from "lucide-react";
import { Zap, Users, Award } from "lucide-react";
export default function AboutPage() {
return (
<ThemeProvider>
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Work", id: "work" },
{ name: "Services", id: "services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Get Started", href: "/contact" }}
/>
<AboutMetric
title="About Our Agency"
metrics={[
{ icon: Award, label: "Industry Experience", value: "8+ Years" },
{ icon: Users, label: "Happy Clients", value: "100+" },
{ icon: Zap, label: "Projects Completed", value: "250+" },
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
<ContactCTA
tag="Work With Us"
title="Let's Create Something Great"
description="We are always looking for new challenges. Contact us to start your next project."
buttons={[{ text: "Get in Touch", href: "/contact" }]}
/>
<FooterBase
logoText="Webild"
columns={[
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }
]}
/>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Get Started", href: "/contact" }}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
title="About Our Agency"
metrics={[
{ id: "1", icon: Award, label: "Industry Experience", value: "8+ Years" },
{ id: "2", icon: Users, label: "Happy Clients", value: "100+" },
{ id: "3", icon: Zap, label: "Projects Completed", value: "250+" },
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="cta" data-section="cta">
<ContactCTA
tag="Work With Us"
title="Let's Create Something Great"
description="We are always looking for new challenges. Contact us to start your next project."
buttons={[{ text: "Get in Touch", href: "/contact" }]}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="Webild"
columns={[
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }
]}
copyrightText="© 2026 | Webild"
/>
</div>
</ReactLenis>
</ThemeProvider>
);

View File

@@ -8,33 +8,52 @@ import FooterBase from "@/components/sections/footer/FooterBase";
export default function ContactPage() {
return (
<ThemeProvider>
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Work", id: "work" },
{ name: "Services", id: "services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Get Started", href: "/contact" }}
/>
<ContactSplitForm
title="Contact Us"
description="Have a project in mind? We'd love to hear from you."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email", required: true }
]}
textarea={{ name: "message", placeholder: "Tell us about your project" }}
/>
<FooterBase
logoText="Webild"
columns={[
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }
]}
/>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Get Started", href: "/contact" }}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Contact Us"
description="Have a project in mind? We'd love to hear from you."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email", required: true }
]}
textarea={{ name: "message", placeholder: "Tell us about your project" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="Webild"
columns={[
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }
]}
copyrightText="© 2026 | Webild"
/>
</div>
</ReactLenis>
</ThemeProvider>
);

View File

@@ -6,14 +6,10 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TeamCardFive from "@/components/sections/team/TeamCardFive";
import FaqBase from "@/components/sections/faq/FaqBase";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, MessageCircle, BookOpen, Tv, Camera, Music, Settings, Award, Users } from "lucide-react";
import { Sparkles, Search, ArrowUpRight } from "lucide-react";
export default function ShoeStorePage() {
return (
@@ -23,138 +19,142 @@ export default function ShoeStorePage() {
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="none"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="metallic"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
headingFontWeight="normal"
>
<ReactLenis root>
<NavbarLayoutFloatingOverlay
brandName="SoleStride"
navItems={[
{ name: "Home", id: "hero" },
{ name: "Products", id: "products" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" },
]}
button={{ text: "Shop Now", href: "#products" }}
/>
<HeroSplitDoubleCarousel
title="Step Into the Future"
description="Premium footwear designed for performance, comfort, and unmatched style. Elevate every step with SoleStride."
tag="New Collection 2026"
tagIcon={Sparkles}
tagAnimation="slide-up"
background={{ variant: "canvas-reveal" }}
buttons={[
{ text: "Explore Collection", href: "#products" },
{ text: "Contact Us", href: "#contact" },
]}
buttonAnimation="slide-up"
carouselPosition="right"
leftCarouselItems={[
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Running Shoes" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "Lifestyle Sneakers" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "Performance Trainers" },
]}
rightCarouselItems={[
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Casual Loafers" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp", imageAlt: "High-top Boots" },
]}
carouselItemClassName="!aspect-[4/5]"
/>
<FeatureBento
title="Why SoleStride?"
description="Experience the perfect blend of innovation and craftsmanship."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
buttons={[{ text: "Learn More", href: "#about" }]}
buttonAnimation="slide-up"
features={[
{
title: "Eco-Friendly Materials", description: "Crafted from sustainable, high-quality recycled materials for the planet.", bentoComponent: "marquee", centerIcon: Search,
variant: "text", texts: ["Organic", "Recycled", "Durable", "Lightweight", "Sustainable", "Breathable", "Vegan", "Ethical"],
},
{
title: "Ergonomic Design", description: "Designed to provide ultimate support for long-distance wear.", bentoComponent: "media-stack", items: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "Ergonomic soul" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Arch support" },
],
},
{
title: "Global Delivery", description: "Fast shipping to over 50 countries worldwide.", bentoComponent: "media-stack", items: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Global reach" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Fast shipping" },
],
},
]}
/>
<FeatureCardTwentySix
title="Top Picks"
description="Our best-selling collection for this season."
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "View Store", href: "#products" }]}
buttonAnimation="slide-up"
cardClassName="!h-auto aspect-video"
features={[
{
title: "Urban Runner", description: "Perfect for daily city life", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp", imageAlt: "Urban Runner", buttonIcon: ArrowUpRight,
buttonHref: "#"},
{
title: "Summit Trekker", description: "Conquer every mountain", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp", imageAlt: "Summit Trekker", buttonIcon: ArrowUpRight,
buttonHref: "#"},
{
title: "Elite Court", description: "Performance tennis gear", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp", imageAlt: "Elite Court", buttonIcon: ArrowUpRight,
buttonHref: "#"},
]}
/>
<TestimonialCardFifteen
testimonial="SoleStride sneakers are the most comfortable pair I've ever owned. Perfect for both office wear and weekend adventures."
rating={5}
author="— Alex Johnson, Avid Runner"
avatars={[
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", alt: "Alex" },
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
useInvertedBackground={false}
/>
<ContactCTA
tag="Contact"
title="Got Questions?"
description="We're here to help you find the perfect pair. Send us a message today."
background={{ variant: "rotated-rays-animated" }}
buttons={[
{ text: "Get in touch", href: "#contact" },
]}
buttonAnimation="slide-up"
useInvertedBackground={false}
/>
<FooterBase
logoText="SoleStride"
copyrightText="© 2026 | SoleStride"
columns={[
{
title: "Menu", items: [
{ label: "Home", href: "#hero" },
{ label: "Products", href: "#products" },
{ label: "About", href: "#about" },
{ label: "Contact", href: "#contact" },
],
},
{
title: "Shop", items: [
{ label: "Running", href: "#" },
{ label: "Casual", href: "#" },
{ label: "Formal", href: "#" },
],
},
]}
/>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="SoleStride"
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Shop Now", href: "/shop" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
title="Step Into the Future"
description="Premium footwear designed for performance, comfort, and unmatched style. Elevate every step with SoleStride."
tag="New Collection 2026"
tagIcon={Sparkles}
tagAnimation="slide-up"
background={{ variant: "canvas-reveal" }}
buttons={[
{ text: "Explore Collection", href: "/shop" },
{ text: "Contact Us", href: "/contact" },
]}
buttonAnimation="slide-up"
carouselPosition="right"
leftCarouselItems={[
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Running Shoes" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "Lifestyle Sneakers" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "Performance Trainers" },
]}
rightCarouselItems={[
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Casual Loafers" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp", imageAlt: "High-top Boots" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Extra Item 3" },
]}
carouselItemClassName="!aspect-[4/5]"
/>
</div>
<div id="features" data-section="features">
<FeatureBento
title="Why SoleStride?"
description="Experience the perfect blend of innovation and craftsmanship."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
buttons={[{ text: "Learn More", href: "/about" }]}
buttonAnimation="slide-up"
features={[
{
title: "Eco-Friendly Materials", description: "Crafted from sustainable, high-quality recycled materials for the planet.", bentoComponent: "marquee", centerIcon: Search,
variant: "text", texts: ["Organic", "Recycled", "Durable", "Lightweight", "Sustainable", "Breathable", "Vegan", "Ethical"],
},
{
title: "Ergonomic Design", description: "Designed to provide ultimate support for long-distance wear.", bentoComponent: "media-stack", items: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "Ergonomic soul" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Arch support" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "Extra Item 3" },
],
},
{
title: "Global Delivery", description: "Fast shipping to over 50 countries worldwide.", bentoComponent: "media-stack", items: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Global reach" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Fast shipping" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Extra Item 3" },
],
},
]}
/>
</div>
<div id="picks" data-section="picks">
<FeatureCardTwentySix
title="Top Picks"
description="Our best-selling collection for this season."
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "View Store", href: "/shop" }]}
buttonAnimation="slide-up"
cardClassName="!h-auto aspect-video"
features={[
{
title: "Urban Runner", description: "Perfect for daily city life", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp", imageAlt: "Urban Runner", buttonIcon: ArrowUpRight,
buttonHref: "/shop"},
{
title: "Summit Trekker", description: "Conquer every mountain", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp", imageAlt: "Summit Trekker", buttonIcon: ArrowUpRight,
buttonHref: "/shop"},
{
title: "Elite Court", description: "Performance tennis gear", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp", imageAlt: "Elite Court", buttonIcon: ArrowUpRight,
buttonHref: "/shop"},
]}
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardFifteen
testimonial="SoleStride sneakers are the most comfortable pair I've ever owned. Perfect for both office wear and weekend adventures."
rating={5}
author="— Alex Johnson, Avid Runner"
avatars={[
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", alt: "Alex" },
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="SoleStride"
copyrightText="© 2026 | SoleStride"
columns={[
{
title: "Menu", items: [
{ label: "Home", href: "/" },
{ label: "Shop", href: "/shop" },
{ label: "About", href: "/about" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Shop", items: [
{ label: "Running", href: "/shop" },
{ label: "Casual", href: "/shop" },
{ label: "Formal", href: "/shop" },
],
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

View File

@@ -14,40 +14,47 @@ export default function ShopPage() {
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="none"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="metallic"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
headingFontWeight="normal"
>
<ReactLenis root>
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Work", id: "work" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Shop", id: "shop" },
{ name: "Contact", id: "contact" },
]}
button={{ text: "Get Started", href: "/#contact" }}
/>
<ProductCardThree
title="Our Products"
description="Explore our curated collection of digital assets and tools."
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
products={[
{ id: "1", name: "Design System Kit", price: "$99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
{ id: "2", name: "UI Components Pack", price: "$49", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp" },
{ id: "3", name: "Agency Template", price: "$129", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp" },
]}
/>
<FooterBase
logoText="Webild"
copyrightText="© 2026 | Webild"
/>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Get Started", href: "/contact" }}
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
title="Our Products"
description="Explore our curated collection of digital assets and tools."
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
useInvertedBackground={false}
products={[
{ id: "1", name: "Design System Kit", price: "$99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
{ id: "2", name: "UI Components Pack", price: "$49", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp" },
{ id: "3", name: "Agency Template", price: "$129", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="Webild"
columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
copyrightText="© 2026 | Webild"
/>
</div>
</ReactLenis>
</ThemeProvider>
);