bender/6f3d64a6-75d0-496f-b970-9c54e634bb34
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #2

Merged
bender merged 5 commits from version_2 into main 2026-04-04 05:11:23 +00:00
Conversation 0 Commits 5 Files Changed 5 +159 -80
5 changed files with 159 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,56 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Facebook, Instagram, Twitter } from "lucide-react";
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumSmall"
sizing="mediumLarge"
background="noise"
cardStyle="soft-shadow"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered"
headingFontWeight="normal"
>
<ReactLenis root>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Services", id: "/services" },
{ name: "Contact", id: "/contact" },
]}
brandName="CottonAura"
/>
<MetricSplitMediaAbout
title="Our Story"
description="CottonAura was founded on a simple premise: performance doesn't have to compromise style. We are dedicated to creating gear that feels like a second skin while pushing the boundaries of athletic innovation."
metrics={[
{ value: "50+", title: "Countries Reached" },
{ value: "1M+", title: "Athletes Empowered" },
{ value: "100%", title: "Sustainability Focus" }
]}
imageSrc="http://img.b2bpic.net/free-photo/blue-abstract-texture-background_1373-172.jpg"
/>
<FooterCard
logoText="CottonAura"
copyrightText="© 2025 CottonAura. All rights reserved."
socialLinks={[
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
]}
/>
</ReactLenis>
</ThemeProvider>
);
}

120
src/app/page.tsx
View File

@@ -2,14 +2,14 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardFour from '@/components/sections/ecommerce/productCatalog/ProductCatalogItem';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Facebook, Instagram, Twitter } from "lucide-react";
export default function LandingPage() {
@@ -28,7 +28,7 @@ export default function LandingPage() {
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
@@ -40,114 +40,80 @@ export default function LandingPage() {
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
background={{ variant: "sparkles-gradient" }}
title="Elevate Your Game with CottonAura"
description="Premium sportswear designed for high performance, comfort, and style. Join the movement today."
buttons={[
{ text: "Shop Now", href: "#products" },
{ text: "Subscribe", href: "#contact" },
<HeroCarouselLogo
logoText="CottonAura"
description="Premium sportswear designed for high performance, comfort, and style."
buttons={[{ text: "Shop Now", href: "#products" }]}
slides={[
{ imageSrc: "http://img.b2bpic.net/free-photo/front-view-boxer-trainer-posing-gym_23-2148426233.jpg", imageAlt: "Gym performance" },
]}
imageSrc="http://img.b2bpic.net/free-photo/front-view-boxer-trainer-posing-gym_23-2148426233.jpg"
imageAlt="Modern high-end sportswear store display with neon blue accents"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
<MetricSplitMediaAbout
title="Built for the Driven"
description="At CottonAura, we believe that high-quality apparel should empower your movement. We blend innovative fabric technology with minimalist design to bring you gear that performs as hard as you do."
bulletPoints={[
{ title: "Precision Engineering", description: "Fabrics that adapt to your body and intensity." },
{ title: "Minimalist Aesthetic", description: "Timeless designs that look as good on the street as in the gym." },
{ title: "Athlete-Tested", description: "Rigorous testing to ensure durability and comfort." },
description="At CottonAura, we blend innovative fabric technology with minimalist design to bring you gear that performs as hard as you do."
metrics={[
{ value: "10k+", title: "Active Users" },
{ value: "50+", title: "Countries" }
]}
useInvertedBackground={false}
mediaAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/blue-abstract-texture-background_1373-172.jpg"
imageAlt="High-quality breathable sportswear fabric texture close up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFour
<FeatureCardSixteen
negativeCard={{ items: ["High cost", "Heavy fabrics"] }}
positiveCard={{ items: ["Low cost", "Lightweight tech"] }}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ id: "feat1", title: "Lightweight Performance", author: "Pro Athlete Choice", description: "Engineered for maximum speed and minimal restriction.", tags: ["Performance", "Lightweight"], imageSrc: "http://img.b2bpic.net/free-photo/black-leather-sports-shoe-with-elegant-shoelace-generated-by-ai_188544-19647.jpg" },
{ id: "feat2", title: "Advanced Wicking", author: "Tech Team", description: "Stay dry and cool with our moisture-wicking technology.", tags: ["Wicking", "Dry"], imageSrc: "http://img.b2bpic.net/free-photo/man-athletic-wear-outdoors_23-2148773855.jpg" },
{ id: "feat3", title: "Durable Accessories", author: "Quality Assurance", description: "Rugged gear built to withstand your daily grind.", tags: ["Durable", "Accessories"], imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-sport-elements_23-2149006303.jpg" },
]}
title="Performance Focused Features"
title="Performance Focused"
description="Everything we design is geared towards your personal best."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Elite Performance Hoodie", price: "$85.00", imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-younsgter-dressed-hoody-leggings-looks-pensively-aside_273609-18391.jpg" },
{ id: "p2", name: "Technical Compression Leggings", price: "$65.00", imageSrc: "http://img.b2bpic.net/free-photo/young-male-performer-dancing-escalators_23-2149344075.jpg" },
{ id: "p3", name: "Performance Running Cap", price: "$25.00", imageSrc: "http://img.b2bpic.net/free-photo/view-composition-with-neatly-arranged-organized-sport-items_23-2150275217.jpg" },
{ id: "p4", name: "Seamless Training Shorts", price: "$45.00", imageSrc: "http://img.b2bpic.net/free-photo/woman-resting-sportswear_140725-16439.jpg" },
{ id: "p5", name: "Ergo Grip Water Bottle", price: "$15.00", imageSrc: "http://img.b2bpic.net/free-photo/athletic-woman-using-her-mobile-phone-relaxing-after-work-out-outdoors-sport-healthy-lifestyle_58466-14699.jpg" },
{ id: "p6", name: "Athletic Comfort Socks", price: "$12.00", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-woman-fitness-clothes_23-2148197739.jpg" },
]}
title="Featured Collection"
description="Explore our latest arrivals designed for excellence."
/>
{/* Placeholder for Product section refactor using requested grid */}
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="depth-3d"
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Sarah J.", role: "Marathon Runner", company: "Global Runner", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-muscular-young-man-race-track_23-2148162181.jpg" },
{ id: "2", name: "Mike Chen", role: "Crossfit Athlete", company: "IronBox", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/urban-sports-concept-with-young-woman_23-2147988229.jpg" },
{ id: "3", name: "Ali Amaan", role: "Pro Soccer", company: "City Stars", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/toned-young-beautiful-dark-haired-woman-athlete-wearing-sportswear-standing-holding-blue-fitness-mat_176532-9758.jpg" },
{ id: "4", name: "Emily R.", role: "Yoga Instructor", company: "Zen Flow", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-powerful-sportsman-white-clothing-black-wall_176420-542.jpg" },
{ id: "5", name: "David K.", role: "Weightlifter", company: "Strength Pro", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-young-woman-with-tattoo-practicing-morning-yoga-home-sitting-floor-bedroom-doing-ardha-matsyendrasana_343059-940.jpg" },
]}
title="Loved by Athletes"
description="See why top competitors choose CottonAura."
testimonials={[
{ id: "1", name: "Sarah J.", role: "Marathon Runner", testimonial: "Best gear I've ever used." },
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
<ContactSplit
tag="Join Us"
title="Get In Touch"
description="Have questions about our collection or store? We're here to help."
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", rows: 4, required: true }}
imageSrc="http://img.b2bpic.net/free-photo/fashionable-woman-look-with-black-white-striped-suit-jacket-leather-pants-posing-street-against-large-windows-building-concept-fashion-girl_627829-11650.jpg"
buttonText="Send Message"
description="Have questions about our collection? We're here to help."
useInvertedBackground={false}
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
<FooterBaseReveal
logoText="CottonAura"
copyrightText="© 2025 CottonAura. All rights reserved."
socialLinks={[
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
columns={[
{ title: "Shop", items: [{ label: "New Arrivals", href: "#" }] },
{ title: "Company", items: [{ label: "About Us", href: "#" }] }
]}
copyrightText="© 2025 CottonAura."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

57
src/app/services/page.tsx Normal file
View File

@@ -0,0 +1,57 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Facebook, Instagram, Twitter } from "lucide-react";
export default function ServicesPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumSmall"
sizing="mediumLarge"
background="noise"
cardStyle="soft-shadow"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered"
headingFontWeight="normal"
>
<ReactLenis root>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Services", id: "/services" },
{ name: "Contact", id: "/contact" },
]}
brandName="CottonAura"
/>
<FeatureCardTwentySeven
title="Our Offerings"
description="Precision-engineered apparel for every athlete."
animationType="blur-reveal"
textboxLayout="split"
features={[
{ id: "s1", title: "Performance Wear", descriptions: ["Breathable, wicking fabrics.", "Ergonomic fit for movement."] },
{ id: "s2", title: "Custom Gear", descriptions: ["Team-specific designs.", "Personalized branding options."] },
{ id: "s3", title: "Eco-Athletics", descriptions: ["Recycled materials.", "Low-impact manufacturing."] }
]}
/>
<FooterCard
logoText="CottonAura"
copyrightText="© 2025 CottonAura. All rights reserved."
socialLinks={[
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
]}
/>
</ReactLenis>
</ThemeProvider>
);
}

4
src/app/styles/base.css
View File

@@ -11,7 +11,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-mulish), sans-serif;
font-family: var(--font-inter), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-mulish), sans-serif;
font-family: var(--font-inter), sans-serif;
}

2
src/app/styles/variables.css
View File

@@ -13,7 +13,7 @@
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #ffffff;
--primary-cta: #106efb;
--primary-cta: #cee7ff;
--primary-cta-text: #ffffff;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #ffffff;