Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 40de523b3c | |||
| 835b3c6735 | |||
| 5a8900d8e0 |
@@ -47,6 +47,25 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<head>
|
||||
<script>
|
||||
{`
|
||||
(function() {
|
||||
const logoImage = new Image();
|
||||
logoImage.onload = function() {
|
||||
window.logoImageReady = true;
|
||||
if (window.shopOpenedCallback) {
|
||||
window.shopOpenedCallback();
|
||||
}
|
||||
};
|
||||
logoImage.onerror = function() {
|
||||
console.error('Failed to preload logo image');
|
||||
};
|
||||
logoImage.src = 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-l0j1upvq.jpg';
|
||||
})();
|
||||
`}
|
||||
</script>
|
||||
</head>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${mulish.variable} ${halant.variable} ${inter.variable} antialiased`}
|
||||
|
||||
670
src/app/page.tsx
670
src/app/page.tsx
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
@@ -12,6 +13,287 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import { Zap, Star, Sparkles, TrendingUp, Heart, Award, Twitter, Instagram, Facebook } from 'lucide-react';
|
||||
|
||||
const DirtBike3DBackground = () => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
let animationFrameId: number;
|
||||
let time = 0;
|
||||
let logoDisplayed = false;
|
||||
let logoImage: HTMLImageElement | null = null;
|
||||
|
||||
const resizeCanvas = () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
};
|
||||
|
||||
resizeCanvas();
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
|
||||
// Preload logo
|
||||
const preloadLogo = () => {
|
||||
logoImage = new Image();
|
||||
logoImage.onload = () => {
|
||||
logoDisplayed = true;
|
||||
};
|
||||
logoImage.src = 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-l0j1upvq.jpg';
|
||||
};
|
||||
|
||||
preloadLogo();
|
||||
|
||||
// Bike parameters
|
||||
interface Bike {
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
wheelY: number;
|
||||
wheelRotation: number;
|
||||
performanceType: 'burnout' | 'wheelie' | 'jump';
|
||||
performanceProgress: number;
|
||||
performanceDuration: number;
|
||||
wheelRotationSpeed: number;
|
||||
}
|
||||
|
||||
const bikes: Bike[] = [
|
||||
{
|
||||
x: 100,
|
||||
y: 300,
|
||||
vx: 3,
|
||||
vy: 0,
|
||||
wheelY: 0,
|
||||
wheelRotation: 0,
|
||||
performanceType: 'burnout',
|
||||
performanceProgress: 0,
|
||||
performanceDuration: 100,
|
||||
wheelRotationSpeed: 0.2,
|
||||
},
|
||||
{
|
||||
x: 400,
|
||||
y: 250,
|
||||
vx: 2.5,
|
||||
vy: 0,
|
||||
wheelY: 0,
|
||||
wheelRotation: 0,
|
||||
performanceType: 'wheelie',
|
||||
performanceProgress: 0,
|
||||
performanceDuration: 120,
|
||||
wheelRotationSpeed: 0.15,
|
||||
},
|
||||
{
|
||||
x: 700,
|
||||
y: 200,
|
||||
vx: 3.5,
|
||||
vy: 0,
|
||||
wheelY: 0,
|
||||
wheelRotation: 0,
|
||||
performanceType: 'jump',
|
||||
performanceProgress: 0,
|
||||
performanceDuration: 80,
|
||||
wheelRotationSpeed: 0.25,
|
||||
},
|
||||
];
|
||||
|
||||
const drawBike = (bike: Bike) => {
|
||||
const { x, y, wheelRotation, performanceType, performanceProgress } = bike;
|
||||
|
||||
// Apply performance effects
|
||||
let bikeY = y;
|
||||
let bikeRotation = 0;
|
||||
let opacity = 1;
|
||||
|
||||
if (performanceType === 'wheelie' && performanceProgress > 0) {
|
||||
const progress = performanceProgress / bike.performanceDuration;
|
||||
bikeRotation = Math.sin(progress * Math.PI) * 0.3;
|
||||
} else if (performanceType === 'jump' && performanceProgress > 0) {
|
||||
const progress = performanceProgress / bike.performanceDuration;
|
||||
bikeY -= Math.sin(progress * Math.PI) * 80;
|
||||
} else if (performanceType === 'burnout') {
|
||||
opacity = 0.8 + Math.sin(time * 0.1) * 0.2;
|
||||
}
|
||||
|
||||
ctx!.save();
|
||||
ctx!.translate(x, bikeY);
|
||||
ctx!.rotate(bikeRotation);
|
||||
|
||||
// Main frame (simplified)
|
||||
ctx!.strokeStyle = '#FF006E';
|
||||
ctx!.lineWidth = 3;
|
||||
ctx!.beginPath();
|
||||
ctx!.moveTo(0, 0);
|
||||
ctx!.lineTo(50, 10);
|
||||
ctx!.stroke();
|
||||
|
||||
// Front wheel
|
||||
ctx!.save();
|
||||
ctx!.translate(50, 10);
|
||||
ctx!.rotate(wheelRotation);
|
||||
ctx!.strokeStyle = '#00D9FF';
|
||||
ctx!.lineWidth = 2;
|
||||
ctx!.beginPath();
|
||||
ctx!.arc(0, 0, 12, 0, Math.PI * 2);
|
||||
ctx!.stroke();
|
||||
ctx!.strokeStyle = '#00D9FF';
|
||||
ctx!.lineWidth = 1;
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const angle = (i / 8) * Math.PI * 2;
|
||||
ctx!.beginPath();
|
||||
ctx!.moveTo(0, 0);
|
||||
ctx!.lineTo(Math.cos(angle) * 12, Math.sin(angle) * 12);
|
||||
ctx!.stroke();
|
||||
}
|
||||
ctx!.restore();
|
||||
|
||||
// Rear wheel
|
||||
ctx!.save();
|
||||
ctx!.translate(0, 0);
|
||||
ctx!.rotate(wheelRotation * 1.1);
|
||||
ctx!.strokeStyle = '#FFB81C';
|
||||
ctx!.lineWidth = 2;
|
||||
ctx!.beginPath();
|
||||
ctx!.arc(0, 0, 14, 0, Math.PI * 2);
|
||||
ctx!.stroke();
|
||||
ctx!.strokeStyle = '#FFB81C';
|
||||
ctx!.lineWidth = 1;
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const angle = (i / 8) * Math.PI * 2;
|
||||
ctx!.beginPath();
|
||||
ctx!.moveTo(0, 0);
|
||||
ctx!.lineTo(Math.cos(angle) * 14, Math.sin(angle) * 14);
|
||||
ctx!.stroke();
|
||||
}
|
||||
ctx!.restore();
|
||||
|
||||
// Seat/rider (simplified)
|
||||
ctx!.fillStyle = '#FF006E';
|
||||
ctx!.fillRect(15, -8, 20, 8);
|
||||
|
||||
// Burnout smoke effect
|
||||
if (performanceType === 'burnout' && performanceProgress > 0) {
|
||||
ctx!.fillStyle = `rgba(255, 107, 107, ${0.5 * (1 - performanceProgress / bike.performanceDuration)})`;
|
||||
ctx!.beginPath();
|
||||
ctx!.arc(-5, 2, 15 + Math.random() * 10, 0, Math.PI * 2);
|
||||
ctx!.fill();
|
||||
}
|
||||
|
||||
ctx!.restore();
|
||||
};
|
||||
|
||||
const drawGround = () => {
|
||||
ctx!.strokeStyle = '#00D9FF';
|
||||
ctx!.lineWidth = 2;
|
||||
ctx!.setLineDash([10, 10]);
|
||||
ctx!.beginPath();
|
||||
ctx!.moveTo(0, canvas.height - 40);
|
||||
ctx!.lineTo(canvas.width, canvas.height - 40);
|
||||
ctx!.stroke();
|
||||
ctx!.setLineDash([]);
|
||||
};
|
||||
|
||||
const drawObstacles = () => {
|
||||
const obstacleX = ((time * 2) % canvas.width) - 50;
|
||||
ctx!.fillStyle = '#FFB81C';
|
||||
ctx!.fillRect(obstacleX, canvas.height - 80, 40, 40);
|
||||
ctx!.fillStyle = '#FF006E';
|
||||
ctx!.fillRect(obstacleX + 50, canvas.height - 60, 30, 30);
|
||||
};
|
||||
|
||||
const drawLogo = () => {
|
||||
if (logoDisplayed && logoImage) {
|
||||
ctx!.save();
|
||||
ctx!.globalAlpha = 0.3 + Math.sin(time * 0.02) * 0.1;
|
||||
ctx!.drawImage(
|
||||
logoImage,
|
||||
canvas.width / 2 - 60,
|
||||
canvas.height / 2 - 60,
|
||||
120,
|
||||
120
|
||||
);
|
||||
ctx!.restore();
|
||||
}
|
||||
};
|
||||
|
||||
const animate = () => {
|
||||
// Clear canvas with semi-transparent background for trail effect
|
||||
ctx!.fillStyle = 'rgba(10, 10, 10, 0.1)';
|
||||
ctx!.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Grid background
|
||||
ctx!.strokeStyle = 'rgba(0, 217, 255, 0.1)';
|
||||
ctx!.lineWidth = 1;
|
||||
const gridSize = 50;
|
||||
for (let i = 0; i < canvas.width; i += gridSize) {
|
||||
ctx!.beginPath();
|
||||
ctx!.moveTo(i, 0);
|
||||
ctx!.lineTo(i, canvas.height);
|
||||
ctx!.stroke();
|
||||
}
|
||||
for (let i = 0; i < canvas.height; i += gridSize) {
|
||||
ctx!.beginPath();
|
||||
ctx!.moveTo(0, i);
|
||||
ctx!.lineTo(canvas.width, i);
|
||||
ctx!.stroke();
|
||||
}
|
||||
|
||||
drawGround();
|
||||
drawObstacles();
|
||||
|
||||
// Update and draw bikes
|
||||
bikes.forEach((bike) => {
|
||||
bike.x += bike.vx;
|
||||
bike.wheelRotation += bike.wheelRotationSpeed;
|
||||
|
||||
// Reset position when off screen
|
||||
if (bike.x > canvas.width) {
|
||||
bike.x = -50;
|
||||
bike.performanceProgress = 0;
|
||||
}
|
||||
|
||||
// Update performance progress
|
||||
bike.performanceProgress++;
|
||||
if (bike.performanceProgress > bike.performanceDuration) {
|
||||
bike.performanceProgress = 0;
|
||||
}
|
||||
|
||||
drawBike(bike);
|
||||
});
|
||||
|
||||
drawLogo();
|
||||
|
||||
time++;
|
||||
animationFrameId = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animate();
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
window.removeEventListener('resize', resizeCanvas);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: 0,
|
||||
background: 'linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 50%, #16213e 100%)',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -26,206 +308,210 @@ export default function LandingPage() {
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "Collections", id: "features" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Cart", id: "https://cart.example.com" }
|
||||
]}
|
||||
brandName="ONEWAY"
|
||||
bottomLeftText="Next Gen Fashion"
|
||||
bottomRightText="shop@oneway.com"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ position: 'relative', zIndex: 1 }}>
|
||||
<DirtBike3DBackground />
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Electric Fashion Redefined"
|
||||
description="Step into the next dimension of streetwear. 3D designs, cutting-edge styles, and neon aesthetics that push the boundaries of fashion."
|
||||
tag="Next Gen Collection"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-l0j1upvq.jpg?_wi=1"
|
||||
imageAlt="3D clothing fashion model"
|
||||
textPosition="bottom-left"
|
||||
showBlur={true}
|
||||
showDimOverlay={true}
|
||||
buttons={[
|
||||
{ text: "Shop Now", href: "#products" },
|
||||
{ text: "Explore Collection", href: "#features" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Hero section featuring electric fashion collection"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "Collections", id: "features" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Cart", id: "https://cart.example.com" }
|
||||
]}
|
||||
brandName="ONEWAY"
|
||||
bottomLeftText="Next Gen Fashion"
|
||||
bottomRightText="shop@oneway.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
title="Featured Collection"
|
||||
description="Curated selection of 3D-inspired pieces with electric aesthetics and premium quality"
|
||||
tag="Best Sellers"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
carouselMode="buttons"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "ONEWAY", name: "Electric Volt T-Shirt", price: "$49.99", rating: 5,
|
||||
reviewCount: "342", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-1ntv1a1w.jpg?_wi=1", imageAlt: "Electric Volt T-Shirt"
|
||||
},
|
||||
{
|
||||
id: "2", brand: "ONEWAY", name: "Neon Pulse Hoodie", price: "$89.99", rating: 5,
|
||||
reviewCount: "218", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-jzfsyezd.jpg?_wi=1", imageAlt: "Neon Pulse Hoodie"
|
||||
},
|
||||
{
|
||||
id: "3", brand: "ONEWAY", name: "Cyber Street Jeans", price: "$79.99", rating: 5,
|
||||
reviewCount: "156", imageSrc: "http://img.b2bpic.net/free-photo/blue-jeans-fabric-details_150588-48.jpg?_wi=1", imageAlt: "Cyber Street Jeans"
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "View All Products", href: "#" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Featured clothing products collection"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Electric Fashion Redefined"
|
||||
description="Step into the next dimension of streetwear. 3D designs, cutting-edge styles, and neon aesthetics that push the boundaries of fashion."
|
||||
tag="Next Gen Collection"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-l0j1upvq.jpg?_wi=1"
|
||||
imageAlt="3D clothing fashion model"
|
||||
textPosition="bottom-left"
|
||||
showBlur={true}
|
||||
showDimOverlay={true}
|
||||
buttons={[
|
||||
{ text: "Shop Now", href: "#products" },
|
||||
{ text: "Explore Collection", href: "#features" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Hero section featuring electric fashion collection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
title="Why Choose ONEWAY"
|
||||
description="Experience fashion engineered for the future with cutting-edge 3D design technology"
|
||||
tag="Premium Features"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
carouselMode="buttons"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "3D Design Innovation", description: "Every piece crafted with advanced 3D modeling for perfect fit and futuristic aesthetics", imageSrc: "http://img.b2bpic.net/free-photo/upset-european-man-white-shirt-with-tattooed-arms-sitting-outdoors_181624-59916.jpg", imageAlt: "3D designed jacket"
|
||||
},
|
||||
{
|
||||
title: "Premium Materials", description: "Sustainable, high-quality fabrics that blend comfort with cutting-edge style", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-curly-hair-poses-bridge-wears-blue-sweatshirt-trousers-listens-motivational-music-via-wireless-headphones-focused-into-distance-people-leisure-hobby-concept_273609-55980.jpg", imageAlt: "Premium neon hoodie"
|
||||
},
|
||||
{
|
||||
title: "Electric Aesthetics", description: "Bold neon-inspired designs and colors that make your wardrobe stand out", imageSrc: "http://img.b2bpic.net/free-photo/blue-jeans-fabric-details_150588-48.jpg?_wi=2", imageAlt: "Electric aesthetic pants"
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "#about" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Feature highlights section"
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
title="Featured Collection"
|
||||
description="Curated selection of 3D-inspired pieces with electric aesthetics and premium quality"
|
||||
tag="Best Sellers"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
carouselMode="buttons"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "ONEWAY", name: "Electric Volt T-Shirt", price: "$49.99", rating: 5,
|
||||
reviewCount: "342", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-1ntv1a1w.jpg?_wi=1", imageAlt: "Electric Volt T-Shirt"
|
||||
},
|
||||
{
|
||||
id: "2", brand: "ONEWAY", name: "Neon Pulse Hoodie", price: "$89.99", rating: 5,
|
||||
reviewCount: "218", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-jzfsyezd.jpg?_wi=1", imageAlt: "Neon Pulse Hoodie"
|
||||
},
|
||||
{
|
||||
id: "3", brand: "ONEWAY", name: "Cyber Street Jeans", price: "$79.99", rating: 5,
|
||||
reviewCount: "156", imageSrc: "http://img.b2bpic.net/free-photo/blue-jeans-fabric-details_150588-48.jpg?_wi=1", imageAlt: "Cyber Street Jeans"
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "View All Products", href: "#" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Featured clothing products collection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
title="Our Impact"
|
||||
description="Trusted by fashion enthusiasts worldwide"
|
||||
tag="By The Numbers"
|
||||
tagIcon={TrendingUp}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "50K+", title: "Active Customers", description: "Growing community of fashion pioneers", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-1ntv1a1w.jpg?_wi=2", imageAlt: "Customer community"
|
||||
},
|
||||
{
|
||||
id: "2", value: "1200+", title: "Designs Launched", description: "Innovative pieces released monthly", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-jzfsyezd.jpg?_wi=2", imageAlt: "Design collection"
|
||||
}
|
||||
]}
|
||||
ariaLabel="Metrics and statistics section"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
title="Why Choose ONEWAY"
|
||||
description="Experience fashion engineered for the future with cutting-edge 3D design technology"
|
||||
tag="Premium Features"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
carouselMode="buttons"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "3D Design Innovation", description: "Every piece crafted with advanced 3D modeling for perfect fit and futuristic aesthetics", imageSrc: "http://img.b2bpic.net/free-photo/upset-european-man-white-shirt-with-tattooed-arms-sitting-outdoors_181624-59916.jpg", imageAlt: "3D designed jacket"
|
||||
},
|
||||
{
|
||||
title: "Premium Materials", description: "Sustainable, high-quality fabrics that blend comfort with cutting-edge style", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-curly-hair-poses-bridge-wears-blue-sweatshirt-trousers-listens-motivational-music-via-wireless-headphones-focused-into-distance-people-leisure-hobby-concept_273609-55980.jpg", imageAlt: "Premium neon hoodie"
|
||||
},
|
||||
{
|
||||
title: "Electric Aesthetics", description: "Bold neon-inspired designs and colors that make your wardrobe stand out", imageSrc: "http://img.b2bpic.net/free-photo/blue-jeans-fabric-details_150588-48.jpg?_wi=2", imageAlt: "Electric aesthetic pants"
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "#about" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Feature highlights section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
cardTitle="Join 50,000+ fashion enthusiasts who trust ONEWAY for premium 3D-inspired streetwear"
|
||||
cardTag="Customer Loved"
|
||||
cardTagIcon={Heart}
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Alex Chen", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=1", imageAlt: "Alex Chen"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Jordan Rivera", imageSrc: "http://img.b2bpic.net/free-photo/real-professional-smiling-businesswoman-looking-confident-determined-face-expression-standing-suit-white-background_1258-123234.jpg?_wi=1", imageAlt: "Jordan Rivera"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Sam Taylor", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=2", imageAlt: "Sam Taylor"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Casey Morgan", imageSrc: "http://img.b2bpic.net/free-photo/real-professional-smiling-businesswoman-looking-confident-determined-face-expression-standing-suit-white-background_1258-123234.jpg?_wi=2", imageAlt: "Casey Morgan"
|
||||
}
|
||||
]}
|
||||
ariaLabel="Customer testimonials section"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
title="Our Impact"
|
||||
description="Trusted by fashion enthusiasts worldwide"
|
||||
tag="By The Numbers"
|
||||
tagIcon={TrendingUp}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "50K+", title: "Active Customers", description: "Growing community of fashion pioneers", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-1ntv1a1w.jpg?_wi=2", imageAlt: "Customer community"
|
||||
},
|
||||
{
|
||||
id: "2", value: "1200+", title: "Designs Launched", description: "Innovative pieces released monthly", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-jzfsyezd.jpg?_wi=2", imageAlt: "Design collection"
|
||||
}
|
||||
]}
|
||||
ariaLabel="Metrics and statistics section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
title="Featured In"
|
||||
description="Trusted by leading fashion platforms and influencers worldwide"
|
||||
tag="Media & Partnerships"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Nike", "Adidas", "Puma", "Gucci", "Zara", "H&M", "Forever 21", "Uniqlo"]}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-vector/soccer-logo-template_23-2149588679.jpg", "http://img.b2bpic.net/free-vector/soccer-logo-template_23-2149588679.jpg", "http://img.b2bpic.net/free-vector/cougar-branding-logo-template_23-2149210175.jpg", "http://img.b2bpic.net/free-vector/elegant-capital-letters-logos-with-ornamental-circles_23-2147558070.jpg", "http://img.b2bpic.net/free-vector/typography-logo-template_23-2150529505.jpg", "http://img.b2bpic.net/free-vector/flat-design-hh-monogram-logo-set_23-2151078014.jpg", "http://img.b2bpic.net/free-vector/colorful-wedding-monograms-concept_23-2148457782.jpg", "http://img.b2bpic.net/free-vector/flat-design-outlet-stamp-collection_23-2149753026.jpg"
|
||||
]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
ariaLabel="Partner logos section"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
cardTitle="Join 50,000+ fashion enthusiasts who trust ONEWAY for premium 3D-inspired streetwear"
|
||||
cardTag="Customer Loved"
|
||||
cardTagIcon={Heart}
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Alex Chen", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=1", imageAlt: "Alex Chen"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Jordan Rivera", imageSrc: "http://img.b2bpic.net/free-photo/real-professional-smiling-businesswoman-looking-confident-determined-face-expression-standing-suit-white-background_1258-123234.jpg?_wi=1", imageAlt: "Jordan Rivera"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Sam Taylor", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=2", imageAlt: "Sam Taylor"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Casey Morgan", imageSrc: "http://img.b2bpic.net/free-photo/real-professional-smiling-businesswoman-looking-confident-determined-face-expression-standing-suit-white-background_1258-123234.jpg?_wi=2", imageAlt: "Casey Morgan"
|
||||
}
|
||||
]}
|
||||
ariaLabel="Customer testimonials section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get in Touch"
|
||||
description="Have questions about our 3D-designed collections? Reach out to our team and we'll help you find the perfect piece."
|
||||
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 fashion interests...", rows: 5,
|
||||
required: true
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-l0j1upvq.jpg?_wi=2"
|
||||
imageAlt="Contact us"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
buttonText="Send Message"
|
||||
ariaLabel="Contact form section"
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
title="Featured In"
|
||||
description="Trusted by leading fashion platforms and influencers worldwide"
|
||||
tag="Media & Partnerships"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Nike", "Adidas", "Puma", "Gucci", "Zara", "H&M", "Forever 21", "Uniqlo"]}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-vector/soccer-logo-template_23-2149588679.jpg", "http://img.b2bpic.net/free-vector/soccer-logo-template_23-2149588679.jpg", "http://img.b2bpic.net/free-vector/cougar-branding-logo-template_23-2149210175.jpg", "http://img.b2bpic.net/free-vector/elegant-capital-letters-logos-with-ornamental-circles_23-2147558070.jpg", "http://img.b2bpic.net/free-vector/typography-logo-template_23-2150529505.jpg", "http://img.b2bpic.net/free-vector/flat-design-hh-monogram-logo-set_23-2151078014.jpg", "http://img.b2bpic.net/free-vector/colorful-wedding-monograms-concept_23-2148457782.jpg", "http://img.b2bpic.net/free-vector/flat-design-outlet-stamp-collection_23-2149753026.jpg"
|
||||
]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
ariaLabel="Partner logos section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="ONEWAY"
|
||||
copyrightText="© 2025 ONEWAY | Redefining Fashion with 3D Innovation"
|
||||
socialLinks={[
|
||||
{ icon: Twitter, href: "https://twitter.com/oneway", ariaLabel: "Twitter" },
|
||||
{ icon: Instagram, href: "https://instagram.com/oneway", ariaLabel: "Instagram" },
|
||||
{ icon: Facebook, href: "https://facebook.com/oneway", ariaLabel: "Facebook" }
|
||||
]}
|
||||
ariaLabel="Site footer"
|
||||
/>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get in Touch"
|
||||
description="Have questions about our 3D-designed collections? Reach out to our team and we'll help you find the perfect piece."
|
||||
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 fashion interests...", rows: 5,
|
||||
required: true
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AT3OQAGjNifXrM4yFIwrMJit83/uploaded-1772602766355-l0j1upvq.jpg?_wi=2"
|
||||
imageAlt="Contact us"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
buttonText="Send Message"
|
||||
ariaLabel="Contact form section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="ONEWAY"
|
||||
copyrightText="© 2025 ONEWAY | Redefining Fashion with 3D Innovation"
|
||||
socialLinks={[
|
||||
{ icon: Twitter, href: "https://twitter.com/oneway", ariaLabel: "Twitter" },
|
||||
{ icon: Instagram, href: "https://instagram.com/oneway", ariaLabel: "Instagram" },
|
||||
{ icon: Facebook, href: "https://facebook.com/oneway", ariaLabel: "Facebook" }
|
||||
]}
|
||||
ariaLabel="Site footer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user