Update src/app/page.tsx
This commit is contained in:
110
src/app/page.tsx
110
src/app/page.tsx
@@ -10,9 +10,39 @@ import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { Award, Activity, CheckCircle, Mail, RefreshCw, Shield, Sparkles, Star, Truck, Zap } from "lucide-react";
|
||||
import { Award, Activity, CheckCircle, Mail, RefreshCw, Shield, Sparkles, Star, Truck, Zap, Filter } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [selectedBrand, setSelectedBrand] = useState<string | null>(null);
|
||||
|
||||
const allProducts = [
|
||||
{
|
||||
id: "1", name: "Nike Air Max Pro", price: "$189.99", imageSrc: "http://img.b2bpic.net/free-photo/mans-shoe-used-formal-events_1194-638978.jpg", imageAlt: "Nike Air Max shoe product photography", brand: "Nike"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Jogger Essential Hoodie", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-posing-with-sunglasses_23-2149409747.jpg", imageAlt: "Jogger brand hoodie sweatshirt mockup", brand: "Jogger"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Ralph Lauren Classic Polo", price: "$98.99", imageSrc: "http://img.b2bpic.net/free-photo/fashion-polo-shirt-men_74190-4858.jpg", imageAlt: "Ralph Lauren classic polo shirt product", brand: "Ralph Lauren"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Nike Running Shorts", price: "$54.99", imageSrc: "http://img.b2bpic.net/free-photo/fit-tennis-players-stretching-full-shot_23-2148439886.jpg", imageAlt: "Nike athletic shorts running product", brand: "Nike"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Jogger Track Jacket", price: "$129.99", imageSrc: "http://img.b2bpic.net/free-photo/blonde-lady-tracksuit-mask-posing-while-stretching-arms-looking-relaxed-front-view_176474-60154.jpg", imageAlt: "Jogger track jacket athletic wear", brand: "Jogger"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Ralph Lauren Training Tee", price: "$64.99", imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-model-man-stylish-summer-clothes-posing-sunglasses_158538-14650.jpg", imageAlt: "Ralph Lauren t-shirt athletic wear", brand: "Ralph Lauren"
|
||||
}
|
||||
];
|
||||
|
||||
const filteredProducts = selectedBrand
|
||||
? allProducts.filter((product: any) => product.brand === selectedBrand)
|
||||
: allProducts;
|
||||
|
||||
const brands = ["Nike", "Jogger", "Ralph Lauren"];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
@@ -61,9 +91,46 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<div className="w-full px-4 md:px-8 py-12 md:py-20">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Brand Filter */}
|
||||
<div className="flex flex-col gap-4 mb-8">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Filter className="w-5 h-5" />
|
||||
<h3 className="text-lg font-semibold">Filter by Brand</h3>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
onClick={() => setSelectedBrand(null)}
|
||||
className={`px-4 py-2 rounded-full transition-all ${
|
||||
selectedBrand === null
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'bg-card border border-foreground/20 hover:border-foreground/40'
|
||||
}`}
|
||||
>
|
||||
All Brands
|
||||
</button>
|
||||
{brands.map((brand) => (
|
||||
<button
|
||||
key={brand}
|
||||
onClick={() => setSelectedBrand(brand)}
|
||||
className={`px-4 py-2 rounded-full transition-all ${
|
||||
selectedBrand === brand
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'bg-card border border-foreground/20 hover:border-foreground/40'
|
||||
}`}
|
||||
>
|
||||
{brand}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProductCardOne
|
||||
title="Featured Products"
|
||||
description="Handpicked athletic essentials from the world's most trusted brands"
|
||||
title="Jogger Clothing Collection"
|
||||
description="Premium jogger clothing and athletic essentials. Handpicked items from Nike, Jogger, and Ralph Lauren brands."
|
||||
tag="Best Sellers"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
@@ -71,20 +138,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Nike Air Max Pro", price: "$189.99", imageSrc: "http://img.b2bpic.net/free-photo/mans-shoe-used-formal-events_1194-638978.jpg", imageAlt: "Nike Air Max shoe product photography"},
|
||||
{
|
||||
id: "2", name: "Jogger Essential Hoodie", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-posing-with-sunglasses_23-2149409747.jpg", imageAlt: "Jogger brand hoodie sweatshirt mockup"},
|
||||
{
|
||||
id: "3", name: "Ralph Lauren Classic Polo", price: "$98.99", imageSrc: "http://img.b2bpic.net/free-photo/fashion-polo-shirt-men_74190-4858.jpg", imageAlt: "Ralph Lauren classic polo shirt product"},
|
||||
{
|
||||
id: "4", name: "Nike Running Shorts", price: "$54.99", imageSrc: "http://img.b2bpic.net/free-photo/fit-tennis-players-stretching-full-shot_23-2148439886.jpg", imageAlt: "Nike athletic shorts running product"},
|
||||
{
|
||||
id: "5", name: "Jogger Track Jacket", price: "$129.99", imageSrc: "http://img.b2bpic.net/free-photo/blonde-lady-tracksuit-mask-posing-while-stretching-arms-looking-relaxed-front-view_176474-60154.jpg", imageAlt: "Jogger track jacket athletic wear"},
|
||||
{
|
||||
id: "6", name: "Ralph Lauren Training Tee", price: "$64.99", imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-model-man-stylish-summer-clothes-posing-sunglasses_158538-14650.jpg", imageAlt: "Ralph Lauren t-shirt athletic wear"},
|
||||
]}
|
||||
products={filteredProducts.map((product: any) => ({
|
||||
id: product.id,
|
||||
name: product.name,
|
||||
price: product.price,
|
||||
imageSrc: product.imageSrc,
|
||||
imageAlt: product.imageAlt
|
||||
}))}
|
||||
buttons={[{ text: "Shop All", href: "#products" }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
@@ -192,8 +252,8 @@ export default function LandingPage() {
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
title="What Our Customers Say"
|
||||
description="Real experiences from athletes and fashion enthusiasts who trust Klamitten"
|
||||
title="What Jogger Clothing Customers Say"
|
||||
description="Real experiences from athletes and fashion enthusiasts who love our jogger clothing collection and premium brands"
|
||||
tag="Customer Reviews"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
@@ -203,22 +263,22 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Marcus Johnson", handle: "@marcusfit", testimonial: "Best place to find authentic Nike and Jogger gear. Fast shipping and excellent quality. Highly recommended!", rating: 5,
|
||||
id: "1", name: "Marcus Johnson", handle: "@marcusfit", testimonial: "The jogger clothing here is absolutely top-notch! Love the quality and variety. Best place to find authentic Nike and Jogger gear.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-fitness-girl-black-sportswear-smiling-with-crossed-arms-standing-white-wall_141793-56634.jpg", imageAlt: "professional man athlete portrait headshot"},
|
||||
{
|
||||
id: "2", name: "Sarah Chen", handle: "@sarahactive", testimonial: "Love the curated selection! Everything I've ordered has been genuine and exactly as described. Great customer service.", rating: 5,
|
||||
id: "2", name: "Sarah Chen", handle: "@sarahactive", testimonial: "Amazing jogger collection! Everything fits perfectly and feels premium. The customer service is exceptional too.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-woman-with-tattooes-dreadlocks-is-driving-electro-scooter-street_613910-17124.jpg", imageAlt: "professional woman athlete portrait photo"},
|
||||
{
|
||||
id: "3", name: "James Rodriguez", handle: "@jamesStyle", testimonial: "Finally found a reliable source for Ralph Lauren athletic wear. The prices are fair and the quality is unmatched.", rating: 5,
|
||||
id: "3", name: "James Rodriguez", handle: "@jamesStyle", testimonial: "Finally found authentic joggers and athletic wear in one place. Ralph Lauren collection is fantastic!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-training-outdoors_23-2150975441.jpg", imageAlt: "mature professional man portrait headshot"},
|
||||
{
|
||||
id: "4", name: "Emma Williams", handle: "@emmaathlete", testimonial: "Impressed with the authenticity guarantee and the range of brands available. This is my go-to store now.", rating: 5,
|
||||
id: "4", name: "Emma Williams", handle: "@emmaathlete", testimonial: "The jogger wear is so comfortable and stylish! Best purchase I've made in ages. Highly recommend!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-warming-up-pier_23-2148235832.jpg", imageAlt: "young woman athletic portrait photo"},
|
||||
{
|
||||
id: "5", name: "David Kim", handle: "@davidwear", testimonial: "Premium selection, authentic products, and exceptional service. Klamitten sets the standard for athletic wear shopping.", rating: 5,
|
||||
id: "5", name: "David Kim", handle: "@davidwear", testimonial: "Premium selection of joggers and athletic brands. The quality is unmatched and service is exceptional!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/athletic-man-running-black-background_1301-6600.jpg", imageAlt: "professional man fitness model portrait"},
|
||||
{
|
||||
id: "6", name: "Lisa Thompson", handle: "@lisafitlife", testimonial: "The attention to detail and curation of brands is outstanding. Every purchase has been a success.", rating: 5,
|
||||
id: "6", name: "Lisa Thompson", handle: "@lisafitlife", testimonial: "Best place for authentic jogger clothing! Every purchase has been perfect. Love the brand curation!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-crossed-arms_23-2148285877.jpg", imageAlt: "active woman lifestyle portrait photo"},
|
||||
]}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user