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