Added products page.
This commit is contained in:
parent
8b9721bc5f
commit
de7e321d85
|
|
@ -0,0 +1,681 @@
|
|||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import Navigation from "../components/Navigation";
|
||||
import Footer from "../components/Footer";
|
||||
import AnimatedButton from "../components/AnimatedButton";
|
||||
import FadeIn, { StaggerContainer, StaggerItem } from "../components/FadeIn";
|
||||
import {
|
||||
ArrowRightIcon,
|
||||
UsersIcon,
|
||||
TargetIcon,
|
||||
CheckIcon,
|
||||
TruckIcon,
|
||||
SparklesIcon,
|
||||
PackageIcon,
|
||||
BuildingIcon,
|
||||
} from "../components/Icons";
|
||||
|
||||
const distributorServices = [
|
||||
{
|
||||
icon: PackageIcon,
|
||||
title: "Product Samples",
|
||||
description:
|
||||
"We provide comprehensive product samples to help your sales team demonstrate value to customers.",
|
||||
},
|
||||
{
|
||||
icon: SparklesIcon,
|
||||
title: "Point of Sale Materials",
|
||||
description:
|
||||
"Custom-designed marketing materials that simplify the selling process for your team.",
|
||||
},
|
||||
{
|
||||
icon: UsersIcon,
|
||||
title: "Product Training",
|
||||
description:
|
||||
"In-depth product knowledge sessions to make your sales force confident and effective.",
|
||||
},
|
||||
{
|
||||
icon: BuildingIcon,
|
||||
title: "Marketing Support",
|
||||
description:
|
||||
"Our in-house graphics team develops customized sales pieces tailored to your needs.",
|
||||
},
|
||||
];
|
||||
|
||||
const operatorBenefits = [
|
||||
"Comprehensive packaging consultation",
|
||||
"Operations review and optimization",
|
||||
"Best-fit product recommendations",
|
||||
"Cost-effective solutions",
|
||||
"Sustainability options guidance",
|
||||
"Ongoing support and service",
|
||||
];
|
||||
|
||||
const processSteps = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Discovery",
|
||||
description:
|
||||
"We begin by understanding your unique business needs, current challenges, and growth objectives.",
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Analysis",
|
||||
description:
|
||||
"Our team reviews your operations and identifies opportunities for improvement and cost savings.",
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Solutions",
|
||||
description:
|
||||
"We recommend the best products and strategies tailored to your specific requirements.",
|
||||
},
|
||||
{
|
||||
step: "04",
|
||||
title: "Partnership",
|
||||
description:
|
||||
"We maintain ongoing support, ensuring your continued success and adapting to your evolving needs.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function WhatWeDoPage() {
|
||||
return (
|
||||
<main className="relative">
|
||||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[70vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-neutral-900 via-neutral-900 to-neutral-800">
|
||||
{/* Animated background */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<motion.div
|
||||
className="absolute top-1/4 -left-32 w-[500px] h-[500px] bg-[hsl(0,100%,40%)] rounded-full filter blur-[150px] opacity-20"
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
x: [0, 50, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration: 10,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-[hsl(0,100%,50%)] rounded-full filter blur-[180px] opacity-10"
|
||||
animate={{
|
||||
scale: [1.2, 1, 1.2],
|
||||
y: [0, -50, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration: 12,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Grid pattern */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.03]"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 border border-white/10 mb-8"
|
||||
>
|
||||
<TargetIcon size={16} className="text-[hsl(0,100%,60%)]" />
|
||||
<span className="text-sm font-medium text-white/80">
|
||||
Our Approach
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.1 }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6"
|
||||
>
|
||||
What We{" "}
|
||||
<span className="bg-gradient-to-r from-[hsl(0,100%,50%)] to-[hsl(0,100%,65%)] bg-clip-text text-transparent">
|
||||
Do
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="max-w-2xl mx-auto text-lg sm:text-xl text-neutral-300 leading-relaxed"
|
||||
>
|
||||
We bridge the gap between manufacturers and end-users through
|
||||
strategic partnerships, innovative solutions, and dedicated support.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1 }}
|
||||
className="absolute bottom-8 left-1/2 -translate-x-1/2"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, 10, 0] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
className="w-6 h-10 rounded-full border-2 border-white/30 flex items-start justify-center p-2"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, 12, 0] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
className="w-1.5 h-1.5 rounded-full bg-[hsl(0,100%,50%)]"
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Pull-Through Selling Section */}
|
||||
<section className="section-padding bg-white dark:bg-neutral-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
<div>
|
||||
<FadeIn>
|
||||
<span className="inline-block px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
|
||||
Our Strategy
|
||||
</span>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6 leading-tight">
|
||||
The Power of{" "}
|
||||
<span className="text-[hsl(0,100%,40%)]">
|
||||
Pull-Through Selling
|
||||
</span>
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.2}>
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400 mb-6 leading-relaxed">
|
||||
We focus on key operators and use a pull-through selling
|
||||
approach, working closely with our distribution partners to
|
||||
grow sales organically and sustainably.
|
||||
</p>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.3}>
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
|
||||
By establishing strong relationships with end-users, we create
|
||||
demand that naturally flows through the distribution channel,
|
||||
benefiting everyone in the supply chain.
|
||||
</p>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.4}>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<AnimatedButton
|
||||
href="/contact"
|
||||
icon={<ArrowRightIcon size={18} />}
|
||||
>
|
||||
Partner With Us
|
||||
</AnimatedButton>
|
||||
<AnimatedButton href="/products" variant="outline">
|
||||
View Products
|
||||
</AnimatedButton>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Visual */}
|
||||
<FadeIn direction="right" delay={0.2}>
|
||||
<div className="relative">
|
||||
<div className="relative aspect-square">
|
||||
{/* Animated flow diagram */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
{/* Outer ring */}
|
||||
<motion.div
|
||||
className="absolute w-full h-full rounded-full border-2 border-dashed border-neutral-200 dark:border-neutral-700"
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{
|
||||
duration: 30,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
/>
|
||||
{/* Middle ring */}
|
||||
<motion.div
|
||||
className="absolute w-3/4 h-3/4 rounded-full border-2 border-dashed border-[hsl(0,100%,40%)]/30"
|
||||
animate={{ rotate: -360 }}
|
||||
transition={{
|
||||
duration: 20,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
/>
|
||||
{/* Inner ring */}
|
||||
<motion.div
|
||||
className="absolute w-1/2 h-1/2 rounded-full border-2 border-[hsl(0,100%,40%)]/50"
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{
|
||||
duration: 15,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Center logo */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1, rotate: 10 }}
|
||||
className="relative z-10 bg-white dark:bg-neutral-800 p-6 rounded-2xl shadow-2xl"
|
||||
>
|
||||
<Image
|
||||
src="/assets/brand-logo.png"
|
||||
alt="TCM Sales"
|
||||
width={80}
|
||||
height={80}
|
||||
className="w-20 h-20 object-contain"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Orbiting elements */}
|
||||
{[
|
||||
{ icon: TruckIcon, label: "Distribution", angle: 0 },
|
||||
{ icon: UsersIcon, label: "Operators", angle: 120 },
|
||||
{ icon: PackageIcon, label: "Products", angle: 240 },
|
||||
].map((item, i) => (
|
||||
<motion.div
|
||||
key={item.label}
|
||||
className="absolute"
|
||||
style={{
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
}}
|
||||
animate={{
|
||||
rotate: [item.angle, item.angle + 360],
|
||||
}}
|
||||
transition={{
|
||||
duration: 30,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
className="relative -translate-x-1/2 -translate-y-1/2"
|
||||
style={{
|
||||
transform: `translateY(-140px)`,
|
||||
}}
|
||||
whileHover={{ scale: 1.2 }}
|
||||
>
|
||||
<motion.div
|
||||
animate={{ rotate: [-item.angle, -(item.angle + 360)] }}
|
||||
transition={{
|
||||
duration: 30,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
className="bg-white dark:bg-neutral-800 p-3 rounded-xl shadow-lg border border-neutral-100 dark:border-neutral-700"
|
||||
>
|
||||
<item.icon
|
||||
size={24}
|
||||
className="text-[hsl(0,100%,40%)]"
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Distribution Partners Section */}
|
||||
<section className="section-padding bg-neutral-50 dark:bg-neutral-950">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<FadeIn>
|
||||
<span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
|
||||
<TruckIcon size={16} />
|
||||
Distribution Partners
|
||||
</span>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6">
|
||||
Supporting Your{" "}
|
||||
<span className="text-[hsl(0,100%,40%)]">Sales Success</span>
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.2}>
|
||||
<p className="max-w-3xl mx-auto text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
||||
We work closely with our distribution partners to provide the
|
||||
tools, training, and materials needed to succeed in today's
|
||||
ever-changing foodservice industry.
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<StaggerContainer className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{distributorServices.map((service) => (
|
||||
<StaggerItem key={service.title}>
|
||||
<motion.div
|
||||
whileHover={{ y: -10, scale: 1.02 }}
|
||||
className="group relative bg-white dark:bg-neutral-900 p-8 rounded-3xl shadow-lg shadow-black/5 hover:shadow-xl transition-all duration-500 h-full border border-neutral-100 dark:border-neutral-800"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360, scale: 1.1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center text-white mb-6"
|
||||
>
|
||||
<service.icon size={24} />
|
||||
</motion.div>
|
||||
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3 group-hover:text-[hsl(0,100%,40%)] transition-colors">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] rounded-b-3xl origin-left"
|
||||
initial={{ scaleX: 0 }}
|
||||
whileHover={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
</StaggerItem>
|
||||
))}
|
||||
</StaggerContainer>
|
||||
|
||||
{/* Additional info */}
|
||||
<FadeIn delay={0.4}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.01 }}
|
||||
className="mt-12 bg-gradient-to-br from-neutral-900 to-neutral-800 dark:from-neutral-800 dark:to-neutral-900 p-8 md:p-12 rounded-3xl text-white"
|
||||
>
|
||||
<div className="grid md:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-4">
|
||||
In-House Marketing Team
|
||||
</h3>
|
||||
<p className="text-neutral-300 leading-relaxed">
|
||||
Our dedicated graphics and marketing team develops customized
|
||||
sales pieces specific to your needs. We work with district
|
||||
sales managers and marketing specialists to create tools that
|
||||
simplify the selling process.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center md:justify-end">
|
||||
<motion.div
|
||||
whileHover={{ rotate: 5, scale: 1.05 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="absolute inset-0 bg-[hsl(0,100%,40%)] rounded-2xl blur-xl opacity-30" />
|
||||
<div className="relative bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] p-8 rounded-2xl">
|
||||
<SparklesIcon size={64} className="text-white" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Key Operators Section */}
|
||||
<section className="section-padding bg-white dark:bg-neutral-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
{/* Benefits List */}
|
||||
<FadeIn>
|
||||
<div className="order-2 lg:order-1">
|
||||
<span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
|
||||
<TargetIcon size={16} />
|
||||
Key Operators
|
||||
</span>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6 leading-tight">
|
||||
Tailored Solutions for{" "}
|
||||
<span className="text-[hsl(0,100%,40%)]">Your Operations</span>
|
||||
</h2>
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
|
||||
We offer comprehensive consultation of your packaging and
|
||||
disposable needs. Our team reviews your operations to help you
|
||||
find the best products for your specific applications.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
{operatorBenefits.map((benefit, index) => (
|
||||
<motion.div
|
||||
key={benefit}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
whileHover={{ x: 10 }}
|
||||
className="flex items-center gap-4 group cursor-default"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.2, rotate: 360 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="w-8 h-8 rounded-full bg-[hsl(0,100%,40%)]/10 flex items-center justify-center group-hover:bg-[hsl(0,100%,40%)] transition-colors"
|
||||
>
|
||||
<CheckIcon
|
||||
size={16}
|
||||
className="text-[hsl(0,100%,40%)] group-hover:text-white transition-colors"
|
||||
/>
|
||||
</motion.div>
|
||||
<span className="text-neutral-700 dark:text-neutral-300 font-medium group-hover:text-[hsl(0,100%,40%)] transition-colors">
|
||||
{benefit}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="mt-8"
|
||||
>
|
||||
<AnimatedButton
|
||||
href="/contact"
|
||||
icon={<ArrowRightIcon size={18} />}
|
||||
>
|
||||
Schedule a Consultation
|
||||
</AnimatedButton>
|
||||
</motion.div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* Visual */}
|
||||
<FadeIn direction="right" delay={0.2}>
|
||||
<div className="order-1 lg:order-2 relative">
|
||||
<div className="relative aspect-square rounded-3xl overflow-hidden bg-gradient-to-br from-[hsl(0,100%,40%)]/5 to-[hsl(0,100%,40%)]/10 dark:from-[hsl(0,100%,40%)]/10 dark:to-[hsl(0,100%,40%)]/5">
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.1, 1] }}
|
||||
transition={{
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="w-64 h-64 rounded-full bg-[hsl(0,100%,40%)]/10 flex items-center justify-center"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ scale: [1.1, 1, 1.1] }}
|
||||
transition={{
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="w-48 h-48 rounded-full bg-[hsl(0,100%,40%)]/15 flex items-center justify-center"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-32 h-32 rounded-full bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center shadow-xl"
|
||||
>
|
||||
<TargetIcon size={48} className="text-white" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Floating cards */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ scale: 1.05, rotate: 2 }}
|
||||
className="absolute top-8 right-8 bg-white dark:bg-neutral-800 p-4 rounded-xl shadow-lg"
|
||||
>
|
||||
<p className="text-sm font-medium text-neutral-900 dark:text-white">
|
||||
Custom Solutions
|
||||
</p>
|
||||
<p className="text-xs text-neutral-500">
|
||||
Tailored to your needs
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
whileHover={{ scale: 1.05, rotate: -2 }}
|
||||
className="absolute bottom-8 left-8 bg-white dark:bg-neutral-800 p-4 rounded-xl shadow-lg"
|
||||
>
|
||||
<p className="text-sm font-medium text-neutral-900 dark:text-white">
|
||||
Expert Guidance
|
||||
</p>
|
||||
<p className="text-xs text-neutral-500">
|
||||
Industry professionals
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Process Section */}
|
||||
<section className="section-padding bg-neutral-900 dark:bg-neutral-950 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<FadeIn>
|
||||
<span className="inline-block px-4 py-1.5 rounded-full bg-white/10 text-white/80 text-sm font-medium mb-6">
|
||||
Our Process
|
||||
</span>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
|
||||
How We{" "}
|
||||
<span className="text-[hsl(0,100%,55%)]">Work With You</span>
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.2}>
|
||||
<p className="max-w-2xl mx-auto text-lg text-neutral-400">
|
||||
A proven approach to building successful, long-term partnerships.
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{processSteps.map((item, index) => (
|
||||
<FadeIn key={item.step} delay={index * 0.1}>
|
||||
<motion.div
|
||||
whileHover={{ y: -10 }}
|
||||
className="group relative"
|
||||
>
|
||||
{/* Connector line */}
|
||||
{index < processSteps.length - 1 && (
|
||||
<div className="hidden lg:block absolute top-10 left-full w-full h-0.5 bg-gradient-to-r from-[hsl(0,100%,40%)] to-transparent z-0" />
|
||||
)}
|
||||
|
||||
<div className="relative bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:border-[hsl(0,100%,40%)]/50 transition-colors">
|
||||
<motion.span
|
||||
whileHover={{ scale: 1.1 }}
|
||||
className="inline-block text-5xl font-bold text-[hsl(0,100%,40%)] mb-4"
|
||||
>
|
||||
{item.step}
|
||||
</motion.span>
|
||||
<h3 className="text-xl font-bold mb-3 group-hover:text-[hsl(0,100%,55%)] transition-colors">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-neutral-400 leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="section-padding bg-[hsl(0,100%,40%)] text-white relative overflow-hidden">
|
||||
{/* Background pattern */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<svg
|
||||
className="w-full h-full"
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<pattern
|
||||
id="grid-cta"
|
||||
width="10"
|
||||
height="10"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<path
|
||||
d="M 10 0 L 0 0 0 10"
|
||||
fill="none"
|
||||
stroke="white"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
</pattern>
|
||||
<rect width="100%" height="100%" fill="url(#grid-cta)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<FadeIn>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
|
||||
Ready to Grow Together?
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-xl text-white/90 mb-10 leading-relaxed">
|
||||
Whether you're a distributor looking for support or an operator
|
||||
seeking the right solutions, we're here to help.
|
||||
</p>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.2}>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<AnimatedButton
|
||||
href="/contact"
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
icon={<ArrowRightIcon size={18} />}
|
||||
>
|
||||
Contact Us Today
|
||||
</AnimatedButton>
|
||||
<AnimatedButton href="/products" variant="outline" size="lg">
|
||||
<span className="text-white border-white hover:bg-white/10">
|
||||
Explore Products
|
||||
</span>
|
||||
</AnimatedButton>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue