first commit
This commit is contained in:
184
components/sections/AboutSection.tsx
Normal file
184
components/sections/AboutSection.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
'use client'
|
||||
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Wheat, Shield, Award, ArrowRight, Star, CheckCircle, Users, TrendingUp } from 'lucide-react'
|
||||
import { Button } from '../ui/button'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
export default function AboutSection() {
|
||||
const stats = [
|
||||
{ number: "100%", label: "Customer Satisfaction", icon: Award, color: "from-amber-500 to-yellow-600" },
|
||||
{ number: "10K+", label: "Rice Loving Families", icon: Users, color: "from-emerald-500 to-green-600" },
|
||||
{ number: "8000+", label: "Tons Processed Monthly", icon: TrendingUp, color: "from-orange-500 to-red-600" },
|
||||
{ number: "99%", label: "Pure & Natural Rice", icon: TrendingUp, color: "from-yellow-500 to-amber-600" }
|
||||
]
|
||||
|
||||
const features = [
|
||||
"Direct sourcing from Punjab & Haryana rice belt",
|
||||
"Traditional aging process for Basmati rice",
|
||||
"Steam processing for premium Sella varieties",
|
||||
"Farm-to-table traceability and quality assurance"
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="relative py-12 md:py-32 overflow-hidden">
|
||||
{/* Modern gradient background with rice-inspired colors */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-amber-50 via-yellow-50 to-orange-50/30"></div>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(245,158,11,0.05),transparent_50%)]"></div>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(251,191,36,0.05),transparent_50%)]"></div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
{/* Section header with modern typography */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-8 md:mb-20"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 bg-amber-100/50 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
|
||||
<Wheat className="w-4 h-4 text-amber-600" />
|
||||
<span className="text-amber-700 font-medium text-sm">Our Rice Heritage</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
|
||||
From Golden Fields to {''}
|
||||
<span className="text-transparent bg-gradient-to-r from-amber-600 via-yellow-500 to-orange-500 bg-clip-text">
|
||||
Your Kitchen
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-lg text-slate-600 max-w-3xl mx-auto leading-relaxed">
|
||||
Bringing you the finest rice varieties from the fertile plains of Northern India, aged to perfection and processed with traditional care
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Main content grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-12 lg:gap-20 items-center mb-16 sm:mb-20">
|
||||
{/* Visual side - First on mobile, second on desktop */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="relative order-1 lg:order-2"
|
||||
>
|
||||
{/* Main image with modern styling - 16:9 on mobile, original aspect on desktop */}
|
||||
<div className="relative rounded-3xl overflow-hidden shadow-2xl aspect-video lg:aspect-auto">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-emerald-600/20 via-transparent to-orange-600/20 z-10"></div>
|
||||
<Image
|
||||
src="/farmer.png"
|
||||
alt="Premium food processing facility"
|
||||
width={600}
|
||||
height={500}
|
||||
className="w-full lg:h-[500px] object-cover"
|
||||
priority
|
||||
/>
|
||||
{/* Floating quality badge */}
|
||||
<div className="absolute top-4 left-4 sm:top-6 sm:left-6 bg-white/95 backdrop-blur-sm rounded-2xl px-3 py-2 sm:px-4 sm:py-3 shadow-lg z-20">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<span className="font-semibold text-slate-900 text-xs sm:text-sm">Premium Certified</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute -top-6 -right-6 w-24 h-24 bg-gradient-to-br from-orange-400 to-orange-500 rounded-full opacity-20 blur-xl"></div>
|
||||
<div className="absolute -bottom-4 -left-4 w-20 h-20 bg-gradient-to-br from-emerald-400 to-emerald-500 rounded-full opacity-20 blur-xl"></div>
|
||||
</motion.div>
|
||||
|
||||
{/* Content side - Second on mobile, first on desktop */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="space-y-6 sm:space-y-8 order-2 lg:order-1"
|
||||
>
|
||||
{/* Story */}
|
||||
<div className="space-y-4 sm:space-y-6">
|
||||
<h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-slate-900 leading-tight">
|
||||
Two Decades of
|
||||
<span className="text-emerald-600"> Trusted Excellence</span>
|
||||
</h3>
|
||||
<div className="space-y-3 sm:space-y-4 text-base sm:text-lg leading-relaxed text-slate-600">
|
||||
<p>
|
||||
Padmaaja Rasooi has revolutionized food processing with unwavering commitment to quality and authenticity.
|
||||
</p>
|
||||
<p>
|
||||
We've built lasting relationships with farmers, ensuring every product reflects our dedication to
|
||||
excellence and the highest standards of food safety.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature list */}
|
||||
<div className="space-y-3 sm:space-y-4">
|
||||
{features.map((feature, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: 0.3 + index * 0.1 }}
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
<div className="w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center flex-shrink-0">
|
||||
<CheckCircle className="w-2.5 h-2.5 sm:w-3 sm:h-3 text-white" />
|
||||
</div>
|
||||
<span className="text-slate-700 font-medium text-sm sm:text-base">{feature}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{/* CTA */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.6 }}
|
||||
className="pt-3"
|
||||
>
|
||||
<Button asChild size="lg" className="w-full sm:w-auto bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group">
|
||||
<Link href="/about" className="inline-flex items-center justify-center text-sm sm:text-lg">
|
||||
Discover Our Story
|
||||
<ArrowRight className="ml-2 h-4 w-4 sm:h-5 sm:w-5 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Stats section */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8"
|
||||
>
|
||||
{stats.map((stat, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: 0.5 + index * 0.1 }}
|
||||
className="relative group"
|
||||
>
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl p-4 sm:p-6 lg:p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-white/50 group-hover:scale-105">
|
||||
<div className={`w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 bg-gradient-to-br ${stat.color} rounded-lg sm:rounded-xl flex items-center justify-center mb-3 sm:mb-4 group-hover:scale-110 transition-transform`}>
|
||||
<stat.icon className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6 text-white" />
|
||||
</div>
|
||||
<div className="text-xl sm:text-2xl lg:text-3xl xl:text-4xl font-bold text-slate-900 mb-1 sm:mb-2">{stat.number}</div>
|
||||
<div className="text-slate-600 font-medium text-xs sm:text-sm lg:text-base leading-tight">{stat.label}</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
115
components/sections/CertificationsSection.tsx
Normal file
115
components/sections/CertificationsSection.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
'use client'
|
||||
|
||||
import Image from 'next/image'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
export default function CertificationsSection() {
|
||||
const certifications = [
|
||||
{
|
||||
id: 1,
|
||||
name: "FSSAI",
|
||||
image: "/certifications/Frame-1000003749.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "ISO",
|
||||
image: "/certifications/Frame-1000003750.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "GMP",
|
||||
image: "/certifications/Frame-1000003751.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "HACCP",
|
||||
image: "/certifications/image-371-1.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "FDA",
|
||||
image: "/certifications/image-375-1.png",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "BRC",
|
||||
image: "/certifications/image-377-2.png",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Quality",
|
||||
image: "/certifications/image-92.png",
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="relative py-12 md:py-16 overflow-hidden bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
{/* Section Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-8 md:mb-12"
|
||||
>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-slate-900 mb-2">
|
||||
<span className="text-transparent bg-gradient-to-r from-red-600 via-red-500 to-orange-500 bg-clip-text">
|
||||
Certified By
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-slate-600 max-w-2xl mx-auto">
|
||||
Our commitment to quality is validated by prestigious international certifications
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Certifications Row */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="flex flex-wrap justify-center items-center gap-6 md:gap-8 lg:gap-12"
|
||||
>
|
||||
{certifications.map((cert, index) => (
|
||||
<motion.div
|
||||
key={cert.id}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: index * 0.1 }}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="group cursor-pointer"
|
||||
>
|
||||
<div className="relative w-20 h-20 md:w-24 md:h-24 lg:w-28 lg:h-28 bg-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 group-hover:border-gray-200 flex items-center justify-center p-3">
|
||||
<Image
|
||||
src={cert.image}
|
||||
alt={cert.name}
|
||||
fill
|
||||
className="object-contain p-2 group-hover:scale-110 transition-transform duration-300"
|
||||
sizes="(max-width: 768px) 80px, (max-width: 1024px) 96px, 112px"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-center text-xs md:text-sm font-medium text-gray-600 mt-2 group-hover:text-gray-900 transition-colors">
|
||||
{cert.name}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Bottom Text */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
className="text-center mt-8 md:mt-12"
|
||||
>
|
||||
<p className="text-sm text-gray-500 max-w-xl mx-auto">
|
||||
Trusted by industry leaders worldwide for our commitment to quality, safety, and excellence in food production.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
36
components/sections/ClientPageWrapper.tsx
Normal file
36
components/sections/ClientPageWrapper.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { AnimatePresence } from 'framer-motion'
|
||||
import PageLoader from '@/components/ui/page-loader'
|
||||
|
||||
interface ClientPageWrapperProps {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export default function ClientPageWrapper({ children }: ClientPageWrapperProps) {
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
|
||||
const handleLoadingComplete = () => {
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AnimatePresence mode="wait">
|
||||
{isLoading && (
|
||||
<PageLoader
|
||||
onLoadingComplete={handleLoadingComplete}
|
||||
duration={2000}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{!isLoading && (
|
||||
<div className="animate-in fade-in duration-500">
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
349
components/sections/HeroSection.tsx
Normal file
349
components/sections/HeroSection.tsx
Normal file
@@ -0,0 +1,349 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useMemo } from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { ChevronLeft, ChevronRight, Wheat } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
interface Banner {
|
||||
id: number
|
||||
title: string
|
||||
subtitle: string
|
||||
description: string
|
||||
image: string
|
||||
cta: string
|
||||
ctaLink?: string
|
||||
bgColor?: string
|
||||
}
|
||||
|
||||
interface FeatureCard {
|
||||
icon: any
|
||||
title: string
|
||||
description: string
|
||||
link: string
|
||||
color: string
|
||||
}
|
||||
|
||||
export default function HeroSection() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0)
|
||||
const [imageLoading, setImageLoading] = useState(true)
|
||||
const [touchStart, setTouchStart] = useState<number | null>(null)
|
||||
const [touchEnd, setTouchEnd] = useState<number | null>(null)
|
||||
|
||||
const banners: Banner[] = useMemo(() => [
|
||||
{
|
||||
id: 1,
|
||||
title: "Premium Aged Basmati 1121",
|
||||
subtitle: "Extra Long Grain • 2+ Years Aged",
|
||||
description: "Authentic Basmati rice with exceptional length, distinctive aroma, and fluffy texture from the foothills of Himalayas",
|
||||
image: "/images/rice-hero-slider.jpg",
|
||||
cta: "Shop Premium Rice",
|
||||
ctaLink: "/products?category=rice",
|
||||
bgColor: "from-amber-600 via-yellow-600 to-orange-700"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Kashmina Brand Collection",
|
||||
subtitle: "Farm Fresh • Direct from Fields",
|
||||
description: "Premium rice varieties sourced directly from trusted farmers, processed with care for exceptional quality",
|
||||
image: "https://4m5m4tx28rtva30c.public.blob.vercel-storage.com/media/2025-09-07/banner-slider-1",
|
||||
cta: "Shop Kashmina",
|
||||
ctaLink: "/products?brand=kashmina",
|
||||
bgColor: "from-emerald-600 via-green-600 to-yellow-600"
|
||||
},
|
||||
// {
|
||||
// id: 4,
|
||||
// title: "Wholesale Rice Supplies",
|
||||
// subtitle: "Bulk Orders • Competitive Rates",
|
||||
// description: "Reliable wholesale rice supplier offering bulk quantities of premium Basmati and Sella rice for businesses and retailers",
|
||||
// image: "https://4m5m4tx28rtva30c.public.blob.vercel-storage.com/women-carrying-rice",
|
||||
// cta: "Shop Wholesale",
|
||||
// ctaLink: "/wholesaler",
|
||||
// bgColor: "from-orange-600 via-red-600 to-amber-600"
|
||||
// },
|
||||
{
|
||||
id: 5,
|
||||
title: "Indian Frmer Plowing",
|
||||
subtitle: "Traditional Farming • Heritage Grain",
|
||||
description: "Experience the rich heritage of rice cultivation with traditional farming methods passed down through generations.",
|
||||
image: "https://4m5m4tx28rtva30c.public.blob.vercel-storage.com/media/2025-09-07/indian-farmer-plowing",
|
||||
cta: "Learn More",
|
||||
}
|
||||
], [])
|
||||
|
||||
// Debug: Log current slide image
|
||||
useEffect(() => {
|
||||
console.log('Current slide image:', banners[currentSlide]?.image);
|
||||
}, [currentSlide, banners]);
|
||||
|
||||
const featuredCategories = [
|
||||
{
|
||||
title: "Kashmina Sella Premium",
|
||||
subtitle: "Extra long grain",
|
||||
link: "/products?brand=basmati-1121",
|
||||
bgColor: "from-amber-500 to-yellow-600"
|
||||
},
|
||||
{
|
||||
title: "Kashmina Gold Premium",
|
||||
subtitle: "Steam processed",
|
||||
link: "/products?category=sella",
|
||||
bgColor: "from-yellow-500 to-amber-600"
|
||||
},
|
||||
{
|
||||
title: "Kashmina Steam Premium",
|
||||
subtitle: "Traditional quality",
|
||||
link: "/products?brand=kashmina",
|
||||
bgColor: "from-emerald-500 to-green-600"
|
||||
},
|
||||
{
|
||||
title: "Wholesale",
|
||||
subtitle: "Wholesale rates",
|
||||
link: "/wholesaler",
|
||||
bgColor: "from-orange-500 to-red-600"
|
||||
}
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % banners.length)
|
||||
}, 5000) // Auto-slide every 5 seconds
|
||||
|
||||
return () => clearInterval(timer)
|
||||
}, [banners.length])
|
||||
|
||||
// Reset loading state when slide changes
|
||||
useEffect(() => {
|
||||
setImageLoading(true)
|
||||
}, [currentSlide])
|
||||
|
||||
const nextSlide = () => {
|
||||
setCurrentSlide((prev) => (prev + 1) % banners.length)
|
||||
}
|
||||
|
||||
const prevSlide = () => {
|
||||
setCurrentSlide((prev) => (prev - 1 + banners.length) % banners.length)
|
||||
}
|
||||
|
||||
const goToSlide = (index: number) => {
|
||||
setCurrentSlide(index)
|
||||
}
|
||||
|
||||
// Touch handlers for mobile swipe
|
||||
const minSwipeDistance = 50
|
||||
|
||||
const onTouchStart = (e: React.TouchEvent) => {
|
||||
setTouchEnd(null) // otherwise the swipe is fired even with usual touch events
|
||||
setTouchStart(e.targetTouches[0].clientX)
|
||||
}
|
||||
|
||||
const onTouchMove = (e: React.TouchEvent) => {
|
||||
setTouchEnd(e.targetTouches[0].clientX)
|
||||
}
|
||||
|
||||
const onTouchEnd = () => {
|
||||
if (!touchStart || !touchEnd) return
|
||||
const distance = touchStart - touchEnd
|
||||
const isLeftSwipe = distance > minSwipeDistance
|
||||
const isRightSwipe = distance < -minSwipeDistance
|
||||
|
||||
if (isLeftSwipe) {
|
||||
nextSlide()
|
||||
} else if (isRightSwipe) {
|
||||
prevSlide()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative bg-gradient-to-br from-amber-50/50 via-yellow-50/30 to-orange-50/20">
|
||||
|
||||
{/* Amazon-style Hero Layout */}
|
||||
<div className="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 py-4 lg:py-12">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-5 lg:gap-6">
|
||||
|
||||
{/* Main Banner Slider - Left Side (3/4 width) - Better mobile aspect ratio */}
|
||||
<div
|
||||
className="lg:col-span-3 relative overflow-hidden rounded-lg shadow-lg aspect-[16/10] md:aspect-video isolate"
|
||||
onTouchStart={onTouchStart}
|
||||
onTouchMove={onTouchMove}
|
||||
onTouchEnd={onTouchEnd}
|
||||
>
|
||||
{/* Skeleton Loader for CLS prevention */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 animate-pulse z-0" />
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={currentSlide}
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -30 }}
|
||||
transition={{ duration: 0.5, ease: "easeInOut" }}
|
||||
className="absolute inset-0 isolate"
|
||||
>
|
||||
{/* Background Color Fallback */}
|
||||
<div className={`absolute inset-0 bg-gradient-to-br ${banners[currentSlide].bgColor ?? 'from-amber-600 via-yellow-600 to-orange-700'} z-0`}></div>
|
||||
|
||||
<Image
|
||||
src={banners[currentSlide].image}
|
||||
alt={banners[currentSlide].title}
|
||||
fill
|
||||
className="object-cover z-10"
|
||||
priority={currentSlide === 0} // Only prioritize first image
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 75vw"
|
||||
quality={85} // Optimize quality vs file size
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="
|
||||
onLoadStart={() => setImageLoading(true)}
|
||||
onError={(e) => {
|
||||
console.error('Image failed to load:', banners[currentSlide].image);
|
||||
setImageLoading(false);
|
||||
// Keep the gradient background visible on error
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = 'none';
|
||||
}}
|
||||
onLoad={() => {
|
||||
console.log('Image loaded successfully:', banners[currentSlide].image);
|
||||
setImageLoading(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Loading overlay */}
|
||||
{imageLoading && (
|
||||
<div className="absolute inset-0 z-15 flex items-center justify-center">
|
||||
<div className="animate-pulse">
|
||||
<div className="w-8 h-8 bg-white/30 rounded-full animate-bounce"></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content positioned in center-left with enhanced visibility */}
|
||||
<div className="absolute inset-0 z-20 flex items-center">
|
||||
<div className="max-w-lg px-4 sm:px-6 md:px-8 lg:px-10 xl:px-12 w-full">
|
||||
{/* Semi-transparent background for text */}
|
||||
{/* <div className="bg-black/40 backdrop-blur-sm rounded-xl md:rounded-2xl p-4 sm:p-5 md:p-6 lg:p-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="space-y-2 sm:space-y-3 md:space-y-4"
|
||||
>
|
||||
<p className="text-yellow-300 font-semibold text-sm sm:text-base md:text-lg drop-shadow-lg">
|
||||
{banners[currentSlide].subtitle}
|
||||
</p>
|
||||
<h1 className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-bold text-white leading-tight drop-shadow-2xl">
|
||||
{banners[currentSlide].title}
|
||||
</h1>
|
||||
<p className="text-white text-sm sm:text-base md:text-lg leading-relaxed max-w-xs sm:max-w-sm md:max-w-md drop-shadow-lg">
|
||||
{banners[currentSlide].description}
|
||||
</p>
|
||||
<div className="pt-3 sm:pt-4">
|
||||
<Button asChild size="default" className="bg-white text-gray-900 hover:bg-gray-100 text-sm sm:text-base font-medium px-5 sm:px-6 md:px-8 py-2.5 sm:py-3 rounded-lg shadow-lg">
|
||||
<Link href={banners[currentSlide].ctaLink ?? '/'}>
|
||||
{banners[currentSlide].cta}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Subtle Navigation Arrows - Better mobile visibility */}
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="absolute left-2 top-1/2 -translate-y-1/2 z-30 bg-white/30 hover:bg-white/40 text-white p-2 rounded-full transition-all duration-200 backdrop-blur-sm"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={nextSlide}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 z-30 bg-white/30 hover:bg-white/40 text-white p-2 rounded-full transition-all duration-200 backdrop-blur-sm"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||
</button>
|
||||
|
||||
{/* Slide Indicators - Fixed positioning with background */}
|
||||
<div className="hidden sm:flex absolute bottom-4 left-1/2 -translate-x-1/2 z-40 space-x-1.5 bg-black/20 backdrop-blur-sm px-2.5 py-1.5 rounded-full">
|
||||
{banners.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index)}
|
||||
className={`!w-1.5 !h-1.5 sm:w-2 !sm:h-2 !md:w-2.5 !md:h-2.5 rounded-full transition-all duration-200 ${
|
||||
index === currentSlide
|
||||
? 'bg-white shadow-lg'
|
||||
: 'bg-white/60 hover:bg-white/80'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modern Category Cards - Right Side (1/4 width) - Ultra compact mobile */}
|
||||
<div className="lg:col-span-1 aspect-[4/3] sm:aspect-[16/10] md:aspect-video lg:aspect-auto">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-1.5 sm:gap-2 lg:gap-3 h-full">
|
||||
{featuredCategories.slice(0, 4).map((category, index) => (
|
||||
<motion.div
|
||||
key={category.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: index * 0.1 }}
|
||||
className="min-h-[50px] sm:min-h-[70px] lg:h-full lg:min-h-0"
|
||||
>
|
||||
<Link href={category.link}>
|
||||
<div className="group h-full relative bg-white rounded-md border border-gray-200 hover:border-emerald-300 shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer overflow-hidden">
|
||||
{/* Gradient Background Accent */}
|
||||
<div className={`absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r ${category.bgColor}`}></div>
|
||||
|
||||
{/* Content - Ultra Compact Mobile Layout */}
|
||||
<div className="relative px-2 py-1.5 sm:px-3 sm:py-2 lg:p-4 h-full flex items-center gap-2 sm:gap-3">
|
||||
{/* Icon Container - Very small on mobile */}
|
||||
<div className={`w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 rounded-md bg-gradient-to-br ${category.bgColor} flex items-center justify-center group-hover:scale-105 transition-all duration-300 shadow-sm flex-shrink-0`}>
|
||||
<Wheat className="w-3 h-3 sm:w-4 sm:h-4 lg:w-5 lg:h-5 text-white" />
|
||||
</div>
|
||||
|
||||
{/* Typography - Ultra compact */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-xs sm:text-sm lg:text-base text-gray-900 group-hover:text-emerald-600 transition-colors leading-tight mb-0.5">
|
||||
{category.title}
|
||||
</h3>
|
||||
<p className="text-[10px] sm:text-xs lg:text-sm text-gray-600 group-hover:text-gray-700 transition-colors">
|
||||
{category.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Arrow Icon - Hidden on mobile */}
|
||||
<div className="hidden lg:block opacity-0 group-hover:opacity-100 transition-all duration-300 flex-shrink-0">
|
||||
<ChevronRight className="w-4 h-4 text-gray-400 group-hover:text-emerald-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Secondary Strip - Repositioned and Mobile Optimized */}
|
||||
{/* <div className="bg-gradient-to-r from-amber-600 via-yellow-600 to-orange-600 text-white py-4 sm:py-5 md:py-6 mt-4 sm:mt-6">
|
||||
<div className="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8">
|
||||
<div className="flex flex-col items-center justify-center text-center gap-3 sm:gap-4">
|
||||
<div className="flex-1 max-w-4xl">
|
||||
<h3 className="text-sm sm:text-base md:text-lg font-semibold mb-1 sm:mb-2">🌾 Premium Rice • Direct from Farms • Free Shipping ₹500+</h3>
|
||||
<p className="text-yellow-100 text-xs sm:text-sm md:text-base">Aged Basmati & Golden Sella rice delivered fresh to your kitchen</p>
|
||||
</div>
|
||||
<Link href="/products">
|
||||
<Button variant="outline" size="sm" className="bg-white text-amber-700 hover:bg-yellow-50 border-white text-xs sm:text-sm font-medium px-4 sm:px-6 py-2 sm:py-2.5 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300">
|
||||
Explore Rice Varieties
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
238
components/sections/KashminaSection.tsx
Normal file
238
components/sections/KashminaSection.tsx
Normal file
@@ -0,0 +1,238 @@
|
||||
'use client'
|
||||
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Star, Award, Truck, ShieldCheck, ArrowRight, Sparkles, Wheat, Heart } from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
export default function KashminaSection() {
|
||||
return (
|
||||
<section className="relative py-16 lg:py-24 overflow-hidden">
|
||||
{/* Enhanced Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-amber-50 via-yellow-50 to-orange-50"></div>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(245,158,11,0.08),transparent_50%)]"></div>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(251,191,36,0.08),transparent_50%)]"></div>
|
||||
|
||||
{/* Animated Background Elements */}
|
||||
<div className="absolute top-20 left-10 w-32 h-32 bg-amber-200/20 rounded-full blur-3xl animate-pulse"></div>
|
||||
<div className="absolute bottom-20 right-10 w-40 h-40 bg-yellow-200/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
{/* Enhanced Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-amber-100 to-yellow-100 backdrop-blur-sm px-6 py-3 rounded-full mb-6 border border-amber-200/50 shadow-lg">
|
||||
<Sparkles className="w-5 h-5 text-amber-600 animate-pulse" />
|
||||
<span className="text-amber-700 font-semibold text-sm tracking-wide">PREMIUM RICE BRAND</span>
|
||||
<Sparkles className="w-5 h-5 text-orange-600 animate-pulse delay-500" />
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
|
||||
<span className="text-transparent bg-gradient-to-r from-amber-600 via-yellow-600 to-orange-600 bg-clip-text bg-300% animate-gradient">
|
||||
Kashmina
|
||||
</span>
|
||||
<br />
|
||||
<span className="text-gray-800 text-3xl md:text-4xl lg:text-5xl font-medium">Premium Basmati Rice</span>
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl text-gray-600 max-w-4xl mx-auto leading-relaxed font-light">
|
||||
Authentic aged Basmati rice with <span className="text-amber-600 font-medium">extraordinary length, exquisite aroma, and royal taste</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Features Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto mb-20">
|
||||
{/* Premium Quality */}
|
||||
<div className="group cursor-pointer">
|
||||
<div className="relative bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 p-8 text-center border border-white/50 group-hover:border-emerald-300/50 group-hover:-translate-y-2 group-hover:bg-white/90 overflow-hidden">
|
||||
{/* Background decoration */}
|
||||
<div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-emerald-100 to-emerald-200 rounded-full -translate-y-10 translate-x-10 opacity-50 group-hover:scale-150 transition-transform duration-700"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-lg shadow-emerald-200">
|
||||
<Wheat className="w-10 h-10 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-emerald-600 transition-colors duration-300">Authentic Grains</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed mb-4">
|
||||
Treasured grain with distinct aroma and great nutty taste
|
||||
</p>
|
||||
<div className="inline-block bg-gradient-to-r from-emerald-100 to-emerald-200 text-emerald-700 px-4 py-2 rounded-full text-xs font-bold tracking-wide">
|
||||
AUTHENTIC QUALITY
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Export Quality */}
|
||||
<div className="group cursor-pointer">
|
||||
<div className="relative bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 p-8 text-center border border-white/50 group-hover:border-blue-300/50 group-hover:-translate-y-2 group-hover:bg-white/90 overflow-hidden">
|
||||
{/* Background decoration */}
|
||||
<div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full -translate-y-10 translate-x-10 opacity-50 group-hover:scale-150 transition-transform duration-700"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-lg shadow-blue-200">
|
||||
<Award className="w-10 h-10 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors duration-300">Export Grade</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed mb-4">
|
||||
International quality standards for global markets
|
||||
</p>
|
||||
<div className="inline-block bg-gradient-to-r from-blue-100 to-blue-200 text-blue-700 px-4 py-2 rounded-full text-xs font-bold tracking-wide">
|
||||
CERTIFIED
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quality Tested */}
|
||||
<div className="group cursor-pointer">
|
||||
<div className="relative bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 p-8 text-center border border-white/50 group-hover:border-purple-300/50 group-hover:-translate-y-2 group-hover:bg-white/90 overflow-hidden">
|
||||
{/* Background decoration */}
|
||||
<div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-purple-100 to-purple-200 rounded-full -translate-y-10 translate-x-10 opacity-50 group-hover:scale-150 transition-transform duration-700"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-purple-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-lg shadow-purple-200">
|
||||
<ShieldCheck className="w-10 h-10 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-purple-600 transition-colors duration-300">Lab Tested</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed mb-4">
|
||||
Rigorously tested for purity and quality assurance
|
||||
</p>
|
||||
<div className="inline-block bg-gradient-to-r from-purple-100 to-purple-200 text-purple-700 px-4 py-2 rounded-full text-xs font-bold tracking-wide">
|
||||
100% PURE
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fresh Packaging */}
|
||||
<div className="group cursor-pointer">
|
||||
<div className="relative bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 p-8 text-center border border-white/50 group-hover:border-orange-300/50 group-hover:-translate-y-2 group-hover:bg-white/90 overflow-hidden">
|
||||
{/* Background decoration */}
|
||||
<div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-orange-100 to-orange-200 rounded-full -translate-y-10 translate-x-10 opacity-50 group-hover:scale-150 transition-transform duration-700"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-orange-400 to-orange-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-lg shadow-orange-200">
|
||||
<Truck className="w-10 h-10 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-orange-600 transition-colors duration-300">Fresh Pack</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed mb-4">
|
||||
Sealed for maximum freshness and aroma preservation
|
||||
</p>
|
||||
<div className="inline-block bg-gradient-to-r from-orange-100 to-orange-200 text-orange-700 px-4 py-2 rounded-full text-xs font-bold tracking-wide">
|
||||
FRESH SEALED
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Product Showcase */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-0 items-center">
|
||||
{/* Enhanced Product Image */}
|
||||
<div className="relative order-2 lg:order-1">
|
||||
<div className="relative p-12">
|
||||
{/* Floating particles */}
|
||||
<div className="absolute top-4 left-4 w-2 h-2 bg-emerald-400 rounded-full animate-ping"></div>
|
||||
<div className="absolute top-12 right-8 w-1 h-1 bg-blue-400 rounded-full animate-ping delay-1000"></div>
|
||||
<div className="absolute bottom-8 left-8 w-1.5 h-1.5 bg-purple-400 rounded-full animate-ping delay-2000"></div>
|
||||
|
||||
<Image
|
||||
src="/rice_bags.png"
|
||||
alt="Kashmina Premium Basmati Rice"
|
||||
width={500}
|
||||
height={400}
|
||||
className="w-full h-auto object-contain group-hover:scale-105 transition-transform duration-700 drop-shadow-2xl"
|
||||
priority
|
||||
/>
|
||||
|
||||
{/* Enhanced Floating Badges */}
|
||||
<div className="absolute top-8 left-8 bg-white/95 backdrop-blur-md rounded-2xl px-6 py-4 shadow-xl border border-emerald-200/50">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-4 h-4 bg-gradient-to-r from-emerald-400 to-emerald-600 rounded-full animate-pulse shadow-lg shadow-emerald-200"></div>
|
||||
<div>
|
||||
<span className="font-bold text-gray-900 text-sm block">Premium Quality</span>
|
||||
<span className="text-emerald-600 text-xs font-medium">Export Grade</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Rating Badge */}
|
||||
{/* <div className="absolute top-8 right-8 bg-white/95 backdrop-blur-md rounded-2xl px-6 py-4 shadow-xl border border-yellow-200/50">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star key={i} className="w-3 h-3 fill-yellow-400 text-yellow-400" />
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-bold text-gray-900 block">4.9/5</span>
|
||||
<span className="text-xs text-gray-600">2.5k+ Reviews</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Background decorations */}
|
||||
<div className="absolute -top-6 -right-6 w-32 h-32 bg-gradient-to-br from-emerald-300 to-blue-400 rounded-full opacity-10 blur-2xl animate-pulse"></div>
|
||||
<div className="absolute -bottom-6 -left-6 w-28 h-28 bg-gradient-to-br from-purple-300 to-pink-400 rounded-full opacity-10 blur-2xl animate-pulse delay-1000"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Content */}
|
||||
<div className="space-y-8 order-1 lg:order-2">
|
||||
<div>
|
||||
<h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-slate-900 leading-tight mb-6">
|
||||
Crafted for {' '}
|
||||
<span className="text-transparent bg-gradient-to-r from-emerald-600 via-blue-600 to-purple-600 bg-clip-text">
|
||||
Perfection
|
||||
</span>
|
||||
</h3>
|
||||
<p className="text-base sm:text-lg leading-relaxed text-slate-600 mb-8">
|
||||
Kashmina represents the pinnacle of basmati rice quality, carefully selected
|
||||
from the finest grains and processed with precision to deliver an
|
||||
<span className="text-emerald-600 font-medium">exceptional culinary experience</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Key Features */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="flex items-center gap-4 p-4 bg-white/60 backdrop-blur-sm rounded-xl border border-emerald-200/30 hover:bg-white/80 hover:border-emerald-300/50 transition-all duration-300 group">
|
||||
<div className="w-3 h-3 rounded-full bg-emerald-500 flex-shrink-0"></div>
|
||||
<span className="text-slate-700 font-medium text-sm sm:text-base group-hover:text-slate-900 transition-colors">Premium long-grain basmati rice</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 p-4 bg-white/60 backdrop-blur-sm rounded-xl border border-blue-200/30 hover:bg-white/80 hover:border-blue-300/50 transition-all duration-300 group">
|
||||
<div className="w-3 h-3 rounded-full bg-blue-500 flex-shrink-0"></div>
|
||||
<span className="text-slate-700 font-medium text-sm sm:text-base group-hover:text-slate-900 transition-colors">Natural aroma and superior taste</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 p-4 bg-white/60 backdrop-blur-sm rounded-xl border border-purple-200/30 hover:bg-white/80 hover:border-purple-300/50 transition-all duration-300 group">
|
||||
<div className="w-3 h-3 rounded-full bg-purple-500 flex-shrink-0"></div>
|
||||
<span className="text-slate-700 font-medium text-sm sm:text-base group-hover:text-slate-900 transition-colors">Carefully aged and processed</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 p-4 bg-white/60 backdrop-blur-sm rounded-xl border border-orange-200/30 hover:bg-white/80 hover:border-orange-300/50 transition-all duration-300 group">
|
||||
<div className="w-3 h-3 rounded-full bg-orange-500 flex-shrink-0"></div>
|
||||
<span className="text-slate-700 font-medium text-sm sm:text-base group-hover:text-slate-900 transition-colors">Export quality standards</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced CTA Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-6">
|
||||
<Button asChild size="lg" className="bg-gradient-to-r from-emerald-600 to-blue-600 hover:from-emerald-700 hover:to-blue-700 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group">
|
||||
<Link href="/kashmina-rice" className="inline-flex items-center justify-center text-sm sm:text-lg">
|
||||
Explore Kashmina Rice
|
||||
<ArrowRight className="ml-2 h-4 w-4 sm:h-5 sm:w-5 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="lg" className="border-2 border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400 px-6 sm:px-8 py-3 sm:py-4 rounded-xl font-semibold text-sm sm:text-lg">
|
||||
<Link href="/products?brand=kashmina">
|
||||
Shop Kashmina Products
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
236
components/sections/ManufacturingSection.tsx
Normal file
236
components/sections/ManufacturingSection.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Factory, Users, TrendingUp, Award, ArrowRight, CheckCircle, Gauge, Globe, Play } from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
export default function ManufacturingSection() {
|
||||
const [isVideoOpen, setIsVideoOpen] = useState(false)
|
||||
const facilities = [
|
||||
{
|
||||
icon: Factory,
|
||||
title: "Advanced Rice Milling",
|
||||
description: "Modern rice milling facility with precision technology for perfect grain separation and quality",
|
||||
value: "100+ MT/Day",
|
||||
label: "Rice Processing"
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: "Rice Quality Assurance",
|
||||
description: "Multi-stage quality checks ensuring every rice grain meets export quality standards",
|
||||
value: "99.9%",
|
||||
label: "Pure Rice Quality"
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Basmati Export Hub",
|
||||
description: "Specialized facility for Basmati rice aging, processing and international export",
|
||||
value: "25+",
|
||||
label: "Countries Export"
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Rice Processing Experts",
|
||||
description: "Skilled team with traditional knowledge and modern techniques in rice processing",
|
||||
value: "100+",
|
||||
label: "Rice Specialists"
|
||||
}
|
||||
]
|
||||
|
||||
const processSteps = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Premium Paddy Sourcing",
|
||||
description: "Direct procurement from Punjab & Haryana's best rice growing regions",
|
||||
image: "/farmer.png"
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Traditional Rice Aging",
|
||||
description: "Natural aging process for Basmati rice to develop characteristic aroma and length",
|
||||
image: "/factory.png"
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Rice Quality Laboratory",
|
||||
description: "Comprehensive testing for grain length, aroma, moisture and purity standards",
|
||||
image: "/lab.png"
|
||||
},
|
||||
{
|
||||
step: "04",
|
||||
title: "Premium Rice Packaging",
|
||||
description: "Food-grade packaging with moisture control for long-lasting rice freshness",
|
||||
image: "/rice_bags.png"
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="relative py-16 lg:py-24 overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-amber-50 via-yellow-50 to-orange-50/30"></div>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,rgba(245,158,11,0.05),transparent_50%)]"></div>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_70%,rgba(251,191,36,0.05),transparent_50%)]"></div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
{/* Section Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 bg-amber-100/50 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
|
||||
<Factory className="w-4 h-4 text-amber-600" />
|
||||
<span className="text-amber-700 font-medium text-sm">Rice Processing Excellence</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-900 mb-6">
|
||||
From Paddy Fields to
|
||||
<span className="text-transparent bg-gradient-to-r from-amber-600 via-yellow-500 to-orange-500 bg-clip-text"> Premium Rice</span>
|
||||
</h2>
|
||||
<p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
|
||||
State-of-the-art rice processing facilities ensuring every grain of Basmati and Sella rice meets international quality standards
|
||||
</p>
|
||||
|
||||
{/* Video Button */}
|
||||
<div className="mt-8">
|
||||
<Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700 text-white px-8 py-4 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group"
|
||||
>
|
||||
<Play className="w-5 h-5 mr-2 group-hover:scale-110 transition-transform" />
|
||||
Watch Video
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-4xl w-full p-0 bg-black border-0">
|
||||
<DialogHeader className="sr-only">
|
||||
<DialogTitle>Rice Processing Video</DialogTitle>
|
||||
<DialogDescription>
|
||||
Watch our complete rice processing journey from paddy to premium rice
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="relative w-full h-0 pb-[56.25%]"> {/* 16:9 aspect ratio */}
|
||||
<video
|
||||
className="absolute inset-0 w-full h-full"
|
||||
controls
|
||||
autoPlay
|
||||
preload="metadata"
|
||||
poster="/factory.png" // You can add a poster image
|
||||
>
|
||||
<source src="https://4m5m4tx28rtva30c.public.blob.vercel-storage.com/media/2025-09-07/rice-processing" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Facilities Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
|
||||
{facilities.map((facility, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 group hover:border-amber-200"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-amber-100 to-yellow-200 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<facility.icon className="w-6 h-6 text-amber-600" />
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-bold text-amber-600">{facility.value}</div>
|
||||
<div className="text-xs text-slate-500 font-medium">{facility.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-2">{facility.title}</h3>
|
||||
<p className="text-slate-600 text-sm leading-relaxed">{facility.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Process Flow */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100"
|
||||
>
|
||||
<div className="text-center mb-12">
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-slate-900 mb-4">
|
||||
Our Quality Process
|
||||
</h3>
|
||||
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
||||
Every step carefully monitored to deliver premium quality rice that exceeds expectations
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{processSteps.map((step, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: index * 0.2 }}
|
||||
className="relative text-center group"
|
||||
>
|
||||
{/* Step Number */}
|
||||
<div className="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-emerald-600 to-emerald-700 text-white rounded-full font-bold text-lg mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
{step.step}
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<div className="relative w-24 h-24 mx-auto mb-6 rounded-2xl overflow-hidden shadow-lg group-hover:shadow-xl transition-shadow duration-300">
|
||||
<Image
|
||||
src={step.image}
|
||||
alt={step.title}
|
||||
fill
|
||||
className="object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<h4 className="text-lg font-semibold text-slate-900 mb-3">{step.title}</h4>
|
||||
<p className="text-slate-600 text-sm leading-relaxed">{step.description}</p>
|
||||
|
||||
{/* Connector Line */}
|
||||
{index < processSteps.length - 1 && (
|
||||
<div className="hidden lg:block absolute top-6 left-full w-full h-0.5 bg-gradient-to-r from-emerald-200 to-emerald-300 transform translate-x-4"></div>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="text-center mt-12">
|
||||
<Button asChild size="lg" className="bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white px-8 py-4 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group">
|
||||
<Link href="/about" className="inline-flex items-center">
|
||||
Visit Our Facility
|
||||
<ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
154
components/sections/NewsSection.tsx
Normal file
154
components/sections/NewsSection.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
'use client'
|
||||
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Calendar, ArrowRight, ExternalLink, Clock, TrendingUp, Wheat, Users, Sparkles } from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
export default function NewsSection() {
|
||||
// Content data in JSON format for easy management
|
||||
const riceStoriesData = {
|
||||
header: {
|
||||
badge: "Padmaaja Rasooi",
|
||||
title: "Rice Stories",
|
||||
description: "For nearly 10,000 years, rice has nourished more communities than any other grain. Deeply woven into human history across continents, it remains our timeless bond with the golden grain."
|
||||
},
|
||||
stories: [
|
||||
{
|
||||
id: 1,
|
||||
category: "Culinary Heritage",
|
||||
title: "Global Favourite",
|
||||
description: "Rice inspires delicious dishes in every culture.",
|
||||
image: "https://www.indiagatefoods.com/wp-content/themes/india-gate/static/images/rice-dish-varieties.jpg",
|
||||
buttonText: "DISCOVER MORE",
|
||||
bgGradient: "from-amber-900 via-orange-800 to-red-900",
|
||||
categoryColor: "text-amber-300",
|
||||
categoryIcon: "Wheat"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
category: "Cultural Journey",
|
||||
title: "Where Rice Meets Heart",
|
||||
description: "Every grain connects us to family and tradition.",
|
||||
image: "https://4m5m4tx28rtva30c.public.blob.vercel-storage.com/media/2025-09-07/indian-family-dinner",
|
||||
buttonText: "EXPLORE MORE",
|
||||
bgGradient: "from-emerald-900 via-teal-800 to-blue-900",
|
||||
categoryColor: "text-emerald-300",
|
||||
categoryIcon: "Users"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
category: "Traditional Farming",
|
||||
title: "Heritage Cultivation",
|
||||
description: "Ancient farming wisdom shapes every harvest.",
|
||||
image: "https://4m5m4tx28rtva30c.public.blob.vercel-storage.com/media/2025-09-07/deepak-kumar-b4eRRodrirQ-unsplash%20%281%29.webp",
|
||||
buttonText: "LEARN MORE",
|
||||
bgGradient: "from-green-900 to-emerald-800",
|
||||
categoryColor: "text-green-300",
|
||||
categoryIcon: "Wheat"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
category: "Premium Quality",
|
||||
title: "Miracle Grain",
|
||||
description: "Discover unique rice varieties and their benefits.",
|
||||
image: "https://4m5m4tx28rtva30c.public.blob.vercel-storage.com/media/2025-09-07/Image_fx%20%2840%29%20%281%29.jpg",
|
||||
buttonText: "DISCOVER MORE",
|
||||
bgGradient: "from-amber-900 to-orange-800",
|
||||
categoryColor: "text-amber-300",
|
||||
categoryIcon: "Sparkles"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const getIcon = (iconName: string) => {
|
||||
switch (iconName) {
|
||||
case 'Wheat':
|
||||
return <Wheat className="w-5 h-5" />
|
||||
case 'Users':
|
||||
return <Users className="w-5 h-5" />
|
||||
case 'Sparkles':
|
||||
return <Sparkles className="w-5 h-5" />
|
||||
default:
|
||||
return <Wheat className="w-5 h-5" />
|
||||
}
|
||||
}
|
||||
return (
|
||||
<section className="relative py-16 lg:py-24 overflow-hidden bg-gradient-to-br from-amber-50/50 via-orange-50/30 to-red-50/20">
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
|
||||
<h2 className="text-3xl md:text-3xl lg:text-4xl font-bold mb-6">
|
||||
<span className="bg-gradient-to-r from-amber-700 via-red-600 to-orange-700 bg-clip-text text-transparent">
|
||||
{riceStoriesData.header.title}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-amber-500 to-red-500 mx-auto mb-6"></div>
|
||||
|
||||
<p className="text-lg md:text-xl text-slate-700 max-w-4xl mx-auto leading-relaxed">
|
||||
{riceStoriesData.header.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Content Grid - 4 Cards in 2 Rows */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{riceStoriesData.stories.map((story, index) => (
|
||||
<motion.div
|
||||
key={story.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className="group cursor-pointer"
|
||||
>
|
||||
<div className={`relative overflow-hidden rounded-xl shadow-lg h-96 bg-gradient-to-br ${story.bgGradient}`}>
|
||||
<Image
|
||||
src={story.image}
|
||||
alt={story.title}
|
||||
fill
|
||||
className="object-cover group-hover:scale-110 transition-transform duration-700"
|
||||
loading="lazy"
|
||||
quality={80}
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
|
||||
|
||||
{/* Content Overlay */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-8">
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-white mb-4 leading-tight drop-shadow-lg">
|
||||
{story.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-white/90 leading-relaxed mb-6 drop-shadow-lg">
|
||||
{story.description}
|
||||
</p>
|
||||
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="bg-white/20 backdrop-blur-sm border-white/30 text-white hover:bg-white/30 group"
|
||||
>
|
||||
{story.buttonText}
|
||||
<ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
125
components/sections/OurValues.tsx
Normal file
125
components/sections/OurValues.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Wheat,
|
||||
Shield,
|
||||
Award,
|
||||
Leaf
|
||||
} from 'lucide-react'
|
||||
|
||||
const values = [
|
||||
{
|
||||
title: "Rice Purity",
|
||||
description: "Every grain of Basmati and Sella rice is carefully selected and tested for maximum purity.",
|
||||
icon: Shield
|
||||
},
|
||||
{
|
||||
title: "Farm Fresh Rice",
|
||||
description: "Direct sourcing from Punjab & Haryana's finest rice farms ensures authentic quality.",
|
||||
icon: Wheat
|
||||
},
|
||||
{
|
||||
title: "Rice Excellence",
|
||||
description: "Committed to delivering the finest aged Basmati and premium Sella rice varieties.",
|
||||
icon: Award
|
||||
},
|
||||
{
|
||||
title: "Sustainable Rice Farming",
|
||||
description: "Supporting eco-friendly rice cultivation practices for healthier communities and environment.",
|
||||
icon: Leaf
|
||||
}
|
||||
]
|
||||
|
||||
export default function OurValues() {
|
||||
return (
|
||||
<section className="py-20 bg-gradient-to-br from-amber-50 to-yellow-50">
|
||||
<div className="max-w-7xl mx-auto px-3 sm:px-6 lg:px-12">
|
||||
{/* Section Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center space-y-4 mb-16"
|
||||
>
|
||||
<Badge variant="secondary" className="bg-amber-100 text-amber-800 px-3 py-1 text-sm font-medium">
|
||||
Our Rice Values
|
||||
</Badge>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">
|
||||
The Quality of Kashhmna Premium
|
||||
</h2>
|
||||
<p className="text-slate-600 max-w-2xl mx-auto text-lg">
|
||||
Our dedication to rice excellence is built on four core principles that ensure every grain of Basmati and Sella rice meets the highest standards.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Values Grid - 4 columns on desktop */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{values.map((value, index) => {
|
||||
const IconComponent = value.icon
|
||||
return (
|
||||
<motion.div
|
||||
key={value.title}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
duration: 0.6,
|
||||
delay: index * 0.1
|
||||
}}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -8 }}
|
||||
className="group"
|
||||
>
|
||||
<Card className="h-full bg-white/80 backdrop-blur-sm border-0 shadow-lg hover:shadow-xl transition-all duration-300 group-hover:bg-white">
|
||||
<CardContent className="p-8 text-center">
|
||||
{/* Icon */}
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<IconComponent className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-xl font-bold text-slate-900 mb-4 group-hover:text-emerald-700 transition-colors">
|
||||
{value.title}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-slate-600 leading-relaxed">
|
||||
{value.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mt-16"
|
||||
>
|
||||
<p className="text-slate-600 text-lg mb-6">
|
||||
Experience the difference that our values make in every grain
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Badge variant="outline" className="text-emerald-700 border-emerald-300 px-4 py-2">
|
||||
🌾 Farm to Table
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-blue-700 border-blue-300 px-4 py-2">
|
||||
🛡️ Quality Certified
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-green-700 border-green-300 px-4 py-2">
|
||||
🌱 Eco-Friendly
|
||||
</Badge>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
298
components/sections/PageHero.tsx
Normal file
298
components/sections/PageHero.tsx
Normal file
@@ -0,0 +1,298 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import { ChevronRight, LucideIcon } from 'lucide-react'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
interface BreadcrumbItem {
|
||||
label: string
|
||||
href?: string
|
||||
}
|
||||
|
||||
interface HeroAction {
|
||||
label: string
|
||||
icon?: LucideIcon
|
||||
onClick?: () => void
|
||||
href?: string
|
||||
variant?: 'primary' | 'secondary'
|
||||
className?: string
|
||||
}
|
||||
|
||||
interface HeroFeature {
|
||||
icon: LucideIcon
|
||||
label: string
|
||||
color?: 'blue' | 'green' | 'purple' | 'orange' | 'emerald'
|
||||
}
|
||||
|
||||
interface PageHeroProps {
|
||||
// Basic content
|
||||
title: string
|
||||
subtitle?: string
|
||||
description: string
|
||||
|
||||
// Badge configuration
|
||||
badge?: {
|
||||
text: string
|
||||
variant?: 'default' | 'outline'
|
||||
className?: string
|
||||
}
|
||||
|
||||
// Icon configuration
|
||||
icon?: {
|
||||
component: LucideIcon
|
||||
className?: string
|
||||
bgColor?: string
|
||||
}
|
||||
|
||||
// Breadcrumb navigation
|
||||
breadcrumbs?: BreadcrumbItem[]
|
||||
|
||||
// Features/highlights (small cards below description)
|
||||
features?: HeroFeature[]
|
||||
|
||||
// Action buttons
|
||||
actions?: HeroAction[]
|
||||
|
||||
// Styling customization
|
||||
backgroundGradient?: string
|
||||
titleGradient?: string
|
||||
className?: string
|
||||
|
||||
// Content positioning
|
||||
alignment?: 'center' | 'left' | 'auto' // auto = smart defaults based on content
|
||||
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '7xl'
|
||||
}
|
||||
|
||||
const getIconColorClasses = (color: HeroFeature['color'] = 'blue') => {
|
||||
const colorMap = {
|
||||
blue: 'text-blue-500',
|
||||
green: 'text-green-500',
|
||||
purple: 'text-purple-500',
|
||||
orange: 'text-orange-500',
|
||||
emerald: 'text-emerald-500'
|
||||
}
|
||||
return colorMap[color]
|
||||
}
|
||||
|
||||
const getMaxWidthClass = (maxWidth: PageHeroProps['maxWidth'] = '5xl') => {
|
||||
const maxWidthMap = {
|
||||
sm: 'max-w-sm',
|
||||
md: 'max-w-md',
|
||||
lg: 'max-w-lg',
|
||||
xl: 'max-w-xl',
|
||||
'2xl': 'max-w-2xl',
|
||||
'3xl': 'max-w-3xl',
|
||||
'4xl': 'max-w-4xl',
|
||||
'5xl': 'max-w-5xl',
|
||||
'7xl': 'max-w-7xl'
|
||||
}
|
||||
return maxWidthMap[maxWidth]
|
||||
}
|
||||
|
||||
export default function PageHero({
|
||||
title,
|
||||
subtitle,
|
||||
description,
|
||||
badge,
|
||||
icon,
|
||||
breadcrumbs,
|
||||
features,
|
||||
actions,
|
||||
backgroundGradient = 'from-blue-600/10 to-emerald-600/10',
|
||||
titleGradient = 'from-blue-600 to-emerald-600',
|
||||
className = '',
|
||||
alignment = 'auto',
|
||||
maxWidth = '4xl'
|
||||
}: PageHeroProps) {
|
||||
const maxWidthClass = getMaxWidthClass(maxWidth)
|
||||
|
||||
// Smart alignment logic - Modern approach (2024-2025)
|
||||
// Center: Marketing/brand pages, landing pages, promotional content
|
||||
// Left: Content-heavy pages, documentation, application interfaces
|
||||
const getAlignment = () => {
|
||||
if (alignment !== 'auto') return alignment
|
||||
|
||||
// Auto-detect best alignment based on content
|
||||
const hasActions = actions && actions.length > 0
|
||||
const hasFeatures = features && features.length > 0
|
||||
const hasIcon = icon !== undefined
|
||||
const hasBadge = badge !== undefined
|
||||
|
||||
// Marketing/promotional content -> center
|
||||
if (hasActions || hasFeatures || hasIcon || hasBadge) {
|
||||
return 'center'
|
||||
}
|
||||
|
||||
// Long description -> left (better readability)
|
||||
if (description.length > 120) {
|
||||
return 'left'
|
||||
}
|
||||
|
||||
// Default to center for brand/marketing pages
|
||||
return 'center'
|
||||
}
|
||||
|
||||
const isCenter = getAlignment() === 'center'
|
||||
|
||||
return (
|
||||
<section className="relative py-12 overflow-hidden min-h-[30vh] flex items-center">
|
||||
{/* Background Gradient - Standardized */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-emerald-600/10" />
|
||||
|
||||
{/* Breadcrumb Navigation - Standardized positioning and styling */}
|
||||
{breadcrumbs && breadcrumbs.length > 0 && (
|
||||
<nav className="absolute top-20 left-0 right-0 z-30">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center h-16">
|
||||
<div className="flex items-center space-x-2 text-sm">
|
||||
{breadcrumbs.map((item, index) => (
|
||||
<div key={index} className="flex items-center space-x-2">
|
||||
{item.href ? (
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-slate-300 hover:text-white transition-colors font-medium"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-white font-semibold">{item.label}</span>
|
||||
)}
|
||||
{index < breadcrumbs.length - 1 && (
|
||||
<ChevronRight className="h-3.5 w-3.5 text-slate-400" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
|
||||
{/* Main Content - Standardized container and spacing */}
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className={isCenter ? 'text-center' : 'text-left'}
|
||||
>
|
||||
{/* Badge with Icon - Standardized styling */}
|
||||
{badge && (
|
||||
<div className={`flex ${isCenter ? 'justify-center' : 'justify-start'} mb-6`}>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-blue-700 border-blue-200 bg-blue-50/50 px-4 py-2 text-sm font-medium rounded-full flex items-center space-x-2"
|
||||
>
|
||||
{icon && (
|
||||
<div className={`p-1.5 rounded-lg ${icon.bgColor || 'bg-blue-600'} ${icon.className || ''}`}>
|
||||
<icon.component className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
)}
|
||||
<span>{badge.text}</span>
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Icon (only when no badge) */}
|
||||
{icon && !badge && (
|
||||
<div className={`flex ${isCenter ? 'justify-center' : 'justify-start'} mb-6`}>
|
||||
<div className={`p-3 rounded-2xl ${icon.bgColor || 'bg-blue-600'} ${icon.className || ''}`}>
|
||||
<icon.component className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title - Standardized typography scale */}
|
||||
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-800 mb-6">
|
||||
{subtitle ? (
|
||||
<>
|
||||
{subtitle}{' '}
|
||||
<span className="bg-gradient-to-r from-blue-600 to-emerald-600 bg-clip-text text-transparent">
|
||||
{title}
|
||||
</span>
|
||||
</>
|
||||
) : title.includes(' ') ? (
|
||||
<>
|
||||
{title.split(' ').slice(0, -1).join(' ')}{' '}
|
||||
<span className="bg-gradient-to-r from-blue-600 to-emerald-600 bg-clip-text text-transparent">
|
||||
{title.split(' ').slice(-1)}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="bg-gradient-to-r from-blue-600 to-emerald-600 bg-clip-text text-transparent">
|
||||
{title}
|
||||
</span>
|
||||
)}
|
||||
</h1>
|
||||
|
||||
{/* Description - Standardized typography */}
|
||||
<p className={`text-lg text-slate-600 ${maxWidthClass} ${isCenter ? 'mx-auto' : ''} ${
|
||||
(features && features.length > 0) || (actions && actions.length > 0) ? 'mb-8' : 'mb-0'
|
||||
} leading-relaxed`}>
|
||||
{description}
|
||||
</p>
|
||||
|
||||
{/* Features */}
|
||||
{features && features.length > 0 && (
|
||||
<div className={`flex flex-wrap ${isCenter ? 'justify-center' : 'justify-start'} gap-4 ${
|
||||
(actions && actions.length > 0) ? 'mb-8' : 'mb-0'
|
||||
}`}>
|
||||
{features.map((feature, index) => (
|
||||
<div key={index} className="flex items-center space-x-2 bg-white rounded-full px-4 py-2 shadow-sm">
|
||||
<feature.icon className={`w-5 h-5 ${getIconColorClasses(feature.color)}`} />
|
||||
<span className="text-sm font-medium text-slate-700">{feature.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Buttons - Standardized styling */}
|
||||
{actions && actions.length > 0 && (
|
||||
<div className={`flex flex-col sm:flex-row gap-4 ${isCenter ? 'justify-center' : 'justify-start'}`}>
|
||||
{actions.map((action, index) => {
|
||||
const ButtonContent = (
|
||||
<>
|
||||
{action.icon && <action.icon className="w-5 h-5 mr-2" />}
|
||||
{action.label}
|
||||
</>
|
||||
)
|
||||
|
||||
const buttonClass = action.variant === 'secondary'
|
||||
? "border-slate-300"
|
||||
: "bg-blue-600 text-white hover:bg-blue-700"
|
||||
|
||||
if (action.href) {
|
||||
return (
|
||||
<Link key={index} href={action.href}>
|
||||
<Button
|
||||
size="lg"
|
||||
variant={action.variant === 'secondary' ? 'outline' : 'default'}
|
||||
className={`${buttonClass} ${action.className || ''}`}
|
||||
>
|
||||
{ButtonContent}
|
||||
</Button>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
size="lg"
|
||||
variant={action.variant === 'secondary' ? 'outline' : 'default'}
|
||||
className={`${buttonClass} ${action.className || ''}`}
|
||||
onClick={action.onClick}
|
||||
>
|
||||
{ButtonContent}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
293
components/sections/ProductsSection.tsx
Normal file
293
components/sections/ProductsSection.tsx
Normal file
@@ -0,0 +1,293 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
interface Product {
|
||||
id: string
|
||||
name: string
|
||||
slug: string
|
||||
price: number
|
||||
description: string | null
|
||||
images: string[]
|
||||
category: {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
}
|
||||
|
||||
interface Category {
|
||||
id: string
|
||||
name: string
|
||||
displayName?: string
|
||||
}
|
||||
|
||||
interface ProductsSectionProps {
|
||||
products: Product[]
|
||||
categories: Category[]
|
||||
}
|
||||
|
||||
export default function ProductsSection({ products, categories }: ProductsSectionProps) {
|
||||
const [activeCategory, setActiveCategory] = useState<string>('all')
|
||||
const [currentSlide, setCurrentSlide] = useState(0)
|
||||
const [productsPerSlide, setProductsPerSlide] = useState(4)
|
||||
const [touchStart, setTouchStart] = useState<number | null>(null)
|
||||
const [touchEnd, setTouchEnd] = useState<number | null>(null)
|
||||
|
||||
// Update products per slide based on window size
|
||||
useEffect(() => {
|
||||
const updateProductsPerSlide = () => {
|
||||
if (window.innerWidth < 640) {
|
||||
setProductsPerSlide(1) // mobile
|
||||
} else if (window.innerWidth < 1024) {
|
||||
setProductsPerSlide(2) // tablet
|
||||
} else {
|
||||
setProductsPerSlide(4) // desktop
|
||||
}
|
||||
}
|
||||
|
||||
updateProductsPerSlide()
|
||||
window.addEventListener('resize', updateProductsPerSlide)
|
||||
return () => window.removeEventListener('resize', updateProductsPerSlide)
|
||||
}, [])
|
||||
|
||||
// Create category display names mapping
|
||||
const getCategoryDisplayName = (category: Category) => {
|
||||
const displayNames: { [key: string]: string } = {
|
||||
'basmati': 'Perfectionist',
|
||||
'premium': 'Quality Seeker',
|
||||
'organic': 'Taste Champion',
|
||||
'specialty': 'Smart Shopper',
|
||||
'kashmina steam': 'Kashmina Steam',
|
||||
'kashmina': 'Kashmina Steam',
|
||||
'steam': 'Kashmina Steam',
|
||||
'rice': 'Premium Rice'
|
||||
}
|
||||
return displayNames[category.name.toLowerCase()] || category.name
|
||||
}
|
||||
|
||||
// Add "All" category with enhanced categories
|
||||
const allCategories = [
|
||||
{ id: 'all', name: 'All', displayName: 'All' },
|
||||
...categories.map(cat => ({
|
||||
...cat,
|
||||
displayName: getCategoryDisplayName(cat)
|
||||
}))
|
||||
]
|
||||
|
||||
// Filter products based on active category
|
||||
const filteredProducts = activeCategory === 'all'
|
||||
? products
|
||||
: products.filter(product => product.category.id === activeCategory)
|
||||
|
||||
// Products per slide (responsive)
|
||||
const getProductsPerSlide = () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
if (window.innerWidth < 640) return 1 // mobile
|
||||
if (window.innerWidth < 1024) return 2 // tablet
|
||||
return 4 // desktop
|
||||
}
|
||||
return 4
|
||||
}
|
||||
|
||||
const totalSlides = Math.ceil(filteredProducts.length / productsPerSlide)
|
||||
|
||||
const nextSlide = () => {
|
||||
setCurrentSlide((prev) => (prev + 1) % totalSlides)
|
||||
}
|
||||
|
||||
const prevSlide = () => {
|
||||
setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides)
|
||||
}
|
||||
|
||||
const handleCategoryChange = (categoryId: string) => {
|
||||
setActiveCategory(categoryId)
|
||||
setCurrentSlide(0) // Reset to first slide when category changes
|
||||
}
|
||||
|
||||
// Touch handlers for mobile swipe
|
||||
const minSwipeDistance = 50
|
||||
|
||||
const onTouchStart = (e: React.TouchEvent) => {
|
||||
setTouchEnd(null) // otherwise the swipe is fired even with usual touch events
|
||||
setTouchStart(e.targetTouches[0].clientX)
|
||||
}
|
||||
|
||||
const onTouchMove = (e: React.TouchEvent) => {
|
||||
setTouchEnd(e.targetTouches[0].clientX)
|
||||
}
|
||||
|
||||
const onTouchEnd = () => {
|
||||
if (!touchStart || !touchEnd) return
|
||||
const distance = touchStart - touchEnd
|
||||
const isLeftSwipe = distance > minSwipeDistance
|
||||
const isRightSwipe = distance < -minSwipeDistance
|
||||
|
||||
if (isLeftSwipe && currentSlide < totalSlides - 1) {
|
||||
nextSlide()
|
||||
} else if (isRightSwipe && currentSlide > 0) {
|
||||
prevSlide()
|
||||
}
|
||||
}
|
||||
|
||||
const getCurrentProducts = () => {
|
||||
const startIndex = currentSlide * productsPerSlide
|
||||
return filteredProducts.slice(startIndex, startIndex + productsPerSlide)
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="py-16 bg-gradient-to-b from-emerald-50 to-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-bold text-emerald-900 mb-4">
|
||||
BASMATI RICE
|
||||
</h2>
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="w-32 h-px bg-emerald-600 relative">
|
||||
<div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||
<div className="w-3 h-3 bg-emerald-600 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Tabs */}
|
||||
<div className="flex flex-wrap justify-center gap-4 mb-12">
|
||||
{allCategories.map((category) => (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => handleCategoryChange(category.id)}
|
||||
className={`px-6 py-3 rounded-full border-2 transition-all duration-300 font-medium ${
|
||||
activeCategory === category.id
|
||||
? 'bg-emerald-600 text-white border-emerald-600'
|
||||
: 'bg-white text-emerald-700 border-emerald-600 hover:bg-emerald-50'
|
||||
}`}
|
||||
>
|
||||
{category.displayName || category.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Products Carousel */}
|
||||
<div className="relative">
|
||||
{/* Navigation Arrows */}
|
||||
{totalSlides > 1 && (
|
||||
<>
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="absolute left-4 top-1/2 transform -translate-y-1/2 z-10 bg-white/80 hover:bg-white rounded-full p-3 shadow-lg transition-all duration-300"
|
||||
aria-label="Previous products"
|
||||
>
|
||||
<ChevronLeft className="w-6 h-6 text-emerald-700" />
|
||||
</button>
|
||||
<button
|
||||
onClick={nextSlide}
|
||||
className="absolute right-4 top-1/2 transform -translate-y-1/2 z-10 bg-white/80 hover:bg-white rounded-full p-3 shadow-lg transition-all duration-300"
|
||||
aria-label="Next products"
|
||||
>
|
||||
<ChevronRight className="w-6 h-6 text-emerald-700" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Products Grid */}
|
||||
<div
|
||||
className="overflow-hidden"
|
||||
onTouchStart={onTouchStart}
|
||||
onTouchMove={onTouchMove}
|
||||
onTouchEnd={onTouchEnd}
|
||||
>
|
||||
<motion.div
|
||||
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
key={`${activeCategory}-${currentSlide}`}
|
||||
>
|
||||
{getCurrentProducts().map((product) => (
|
||||
<motion.div
|
||||
key={product.id}
|
||||
className="text-center group"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{/* Product Image */}
|
||||
<div className="relative aspect-[3/4] overflow-hidden rounded-lg mb-4">
|
||||
{product.images && product.images.length > 0 ? (
|
||||
<Image
|
||||
src={product.images[0]}
|
||||
alt={product.name}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-gradient-to-br from-emerald-100 to-emerald-200 flex items-center justify-center rounded-lg">
|
||||
<div className="text-emerald-600 text-4xl font-bold">
|
||||
{product.name.charAt(0)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Product Info */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-xl font-semibold text-gray-800 group-hover:text-emerald-600 transition-colors">
|
||||
{product.name}
|
||||
</h3>
|
||||
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
className="text-emerald-600 border-emerald-600 hover:bg-emerald-50 hover:text-emerald-700 rounded-full px-6 py-2 font-medium"
|
||||
>
|
||||
<Link href={`/products/${product.slug}`}>
|
||||
KNOW MORE →
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Slide Indicators */}
|
||||
{totalSlides > 1 && (
|
||||
<div className="hidden sm:flex justify-center mt-8 space-x-1.5">
|
||||
{Array.from({ length: totalSlides }).map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrentSlide(index)}
|
||||
className={`w-1.5 h-1.5 sm:w-2 sm:h-2 md:w-2.5 md:h-2.5 rounded-full transition-all duration-300 ${
|
||||
currentSlide === index ? 'bg-emerald-600' : 'bg-emerald-200'
|
||||
}`}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* View All Products Button */}
|
||||
<div className="text-center mt-12">
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className="bg-emerald-600 hover:bg-emerald-700 text-white px-8 py-3 rounded-full text-lg font-medium"
|
||||
>
|
||||
<Link href="/products">
|
||||
View All Products
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
188
components/sections/StatsSection.tsx
Normal file
188
components/sections/StatsSection.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
'use client'
|
||||
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { TrendingUp, Globe, Users, Award, Factory, Wheat, Star, Target } from 'lucide-react'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
export default function StatsSection() {
|
||||
const stats = [
|
||||
{
|
||||
icon: Globe,
|
||||
value: "25+",
|
||||
label: "Countries Served",
|
||||
description: "Exporting premium Basmati rice across continents",
|
||||
color: "from-amber-500 to-yellow-600"
|
||||
},
|
||||
{
|
||||
icon: Wheat,
|
||||
value: "200+",
|
||||
label: "MT Rice Daily",
|
||||
description: "Processing capacity for premium rice varieties",
|
||||
color: "from-yellow-500 to-orange-600"
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
value: "5000+",
|
||||
label: "Rice Farmers",
|
||||
description: "Direct partnerships across Punjab & Haryana rice belt",
|
||||
color: "from-emerald-500 to-green-600"
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
value: "20+",
|
||||
label: "Years in Rice Trade",
|
||||
description: "Two decades of rice expertise and quality",
|
||||
color: "from-orange-500 to-red-600"
|
||||
},
|
||||
{
|
||||
icon: Factory,
|
||||
value: "99.9%",
|
||||
label: "Pure Rice Quality",
|
||||
description: "Consistent premium rice standards",
|
||||
color: "from-red-500 to-pink-600"
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
value: "10K+",
|
||||
label: "Rice Loving Families",
|
||||
description: "Households enjoying our premium rice daily",
|
||||
color: "from-yellow-500 to-amber-600"
|
||||
}
|
||||
]
|
||||
|
||||
const achievements = [
|
||||
{
|
||||
title: "Basmati Rice Leadership",
|
||||
description: "Leading exporter of aged Basmati 1121 rice from Northern India",
|
||||
icon: Target
|
||||
},
|
||||
{
|
||||
title: "Rice Quality Certifications",
|
||||
description: "ISO, HACCP, FSSAI certified processing facility",
|
||||
icon: Award
|
||||
},
|
||||
{
|
||||
title: "Export Excellence",
|
||||
description: "Consistent export quality meeting international standards",
|
||||
icon: Globe
|
||||
},
|
||||
{
|
||||
title: "Innovation Pioneer",
|
||||
description: "Advanced processing technology for superior quality",
|
||||
icon: TrendingUp
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="relative py-16 lg:py-24 overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-slate-800 to-gray-900"></div>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,rgba(245,158,11,0.1),transparent_50%)]"></div>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_70%,rgba(251,191,36,0.1),transparent_50%)]"></div>
|
||||
|
||||
{/* Animated background elements */}
|
||||
<div className="absolute top-20 left-20 w-32 h-32 bg-amber-500/10 rounded-full blur-3xl animate-pulse"></div>
|
||||
<div className="absolute bottom-20 right-20 w-40 h-40 bg-yellow-500/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
{/* Section Header */}
|
||||
{/* <motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
|
||||
<TrendingUp className="w-4 h-4 text-amber-400" />
|
||||
<span className="text-amber-300 font-medium text-sm">Rice Excellence</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6">
|
||||
From Fields to
|
||||
<span className="text-transparent bg-gradient-to-r from-amber-400 via-yellow-400 to-orange-400 bg-clip-text"> Global Tables</span>
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||||
Two decades of rice expertise, bringing premium Basmati and Sella varieties from Northern India's fertile plains to kitchens worldwide
|
||||
</p>
|
||||
</motion.div> */}
|
||||
|
||||
{/* Stats Grid */}
|
||||
{/* <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
|
||||
{stats.map((stat, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className="relative group"
|
||||
>
|
||||
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:border-white/20 transition-all duration-500 group-hover:bg-white/10">
|
||||
<div className={`absolute inset-0 rounded-2xl bg-gradient-to-br ${stat.color} opacity-0 group-hover:opacity-5 transition-opacity duration-500`}></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className={`w-16 h-16 bg-gradient-to-br ${stat.color} rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
|
||||
<stat.icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
|
||||
<div className="text-4xl md:text-5xl font-bold text-white mb-2 group-hover:scale-105 transition-transform duration-300">
|
||||
{stat.value}
|
||||
</div>
|
||||
|
||||
<div className="text-lg font-semibold text-gray-300 mb-3">
|
||||
{stat.label}
|
||||
</div>
|
||||
|
||||
<p className="text-gray-400 text-sm leading-relaxed">
|
||||
{stat.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div> */}
|
||||
|
||||
{/* Achievements Section */}
|
||||
{/* <motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="bg-white/5 backdrop-blur-sm rounded-3xl p-8 lg:p-12 border border-white/10"
|
||||
>
|
||||
<div className="text-center mb-12">
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-white mb-4">
|
||||
Key Achievements
|
||||
</h3>
|
||||
<p className="text-lg text-gray-300 max-w-2xl mx-auto">
|
||||
Milestones that define our commitment to excellence and industry leadership
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{achievements.map((achievement, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className="text-center group"
|
||||
>
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<achievement.icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-lg font-semibold text-white mb-3">
|
||||
{achievement.title}
|
||||
</h4>
|
||||
<p className="text-gray-400 text-sm leading-relaxed">
|
||||
{achievement.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div> */}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
245
components/sections/SustainabilitySection.tsx
Normal file
245
components/sections/SustainabilitySection.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
'use client'
|
||||
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Leaf, Heart, Droplets, Recycle, Users, Globe, ArrowRight, TreePine } from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
export default function SustainabilitySection() {
|
||||
const initiatives = [
|
||||
{
|
||||
icon: Leaf,
|
||||
title: "Organic Farming Support",
|
||||
description: "Supporting farmers in transitioning to organic farming practices for sustainable agriculture",
|
||||
impact: "500+ Farmers",
|
||||
color: "from-green-500 to-emerald-500"
|
||||
},
|
||||
{
|
||||
icon: Droplets,
|
||||
title: "Water Conservation",
|
||||
description: "Implementing water-efficient processing techniques and rainwater harvesting systems",
|
||||
impact: "30% Water Saved",
|
||||
color: "from-blue-500 to-cyan-500"
|
||||
},
|
||||
{
|
||||
icon: Recycle,
|
||||
title: "Zero Waste Processing",
|
||||
description: "Converting rice husk and by-products into renewable energy and organic fertilizers",
|
||||
impact: "95% Waste Recycled",
|
||||
color: "from-purple-500 to-violet-500"
|
||||
},
|
||||
{
|
||||
icon: TreePine,
|
||||
title: "Carbon Neutral Goals",
|
||||
description: "Working towards carbon-neutral operations through renewable energy adoption",
|
||||
impact: "50% Renewable Energy",
|
||||
color: "from-emerald-500 to-green-500"
|
||||
}
|
||||
]
|
||||
|
||||
const csrPrograms = [
|
||||
{
|
||||
title: "Farmer Welfare Program",
|
||||
description: "Direct support to rice farmers through fair pricing, agricultural training, and modern farming techniques",
|
||||
image: "/farmer.png",
|
||||
beneficiaries: "5000+ Farmers",
|
||||
focus: "Education & Support"
|
||||
},
|
||||
{
|
||||
title: "Community Development",
|
||||
description: "Healthcare, education and infrastructure development in rural farming communities",
|
||||
image: "https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=600&h=400&fit=crop&q=80",
|
||||
beneficiaries: "50+ Villages",
|
||||
focus: "Rural Development"
|
||||
},
|
||||
{
|
||||
title: "Food Security Initiative",
|
||||
description: "Ensuring food security through grain donation programs and nutritional awareness campaigns",
|
||||
image: "https://images.unsplash.com/photo-1593113598332-cd288d649433?w=600&h=400&fit=crop&q=80",
|
||||
beneficiaries: "10,000+ Meals",
|
||||
focus: "Food Security"
|
||||
}
|
||||
]
|
||||
|
||||
const certifications = [
|
||||
{ name: "ISO 14001", desc: "Environmental Management" },
|
||||
{ name: "FSSAI", desc: "Food Safety Standards" },
|
||||
{ name: "HACCP", desc: "Hazard Analysis" },
|
||||
{ name: "Organic", desc: "Certified Organic" }
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="relative py-16 lg:py-24 overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-green-50 via-emerald-50 to-white"></div>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,rgba(34,197,94,0.1),transparent_50%)]"></div>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_70%,rgba(16,185,129,0.1),transparent_50%)]"></div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
{/* Environmental Initiatives */}
|
||||
<div className="mb-20">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{initiatives.map((initiative, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className="group"
|
||||
>
|
||||
<div className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 p-6 border border-gray-100 group-hover:border-green-200 h-full">
|
||||
{/* Icon */}
|
||||
<div className={`w-16 h-16 bg-gradient-to-br ${initiative.color} rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
|
||||
<initiative.icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-3">{initiative.title}</h3>
|
||||
<p className="text-slate-600 text-sm leading-relaxed mb-4">{initiative.description}</p>
|
||||
|
||||
{/* Impact */}
|
||||
<div className="inline-block bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-semibold">
|
||||
{initiative.impact}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CSR Programs */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="mb-20"
|
||||
>
|
||||
<div className="text-center mb-12">
|
||||
<div className="inline-flex items-center gap-2 bg-blue-100/50 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
|
||||
<Heart className="w-4 h-4 text-blue-600" />
|
||||
<span className="text-blue-700 font-medium text-sm">Social Impact</span>
|
||||
</div>
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-slate-900 mb-4">
|
||||
Community Development Programs
|
||||
</h3>
|
||||
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
||||
Creating positive impact in farming communities through targeted social initiatives
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{csrPrograms.map((program, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: index * 0.2 }}
|
||||
className="group"
|
||||
>
|
||||
<div className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden border border-gray-100 group-hover:border-blue-200">
|
||||
{/* Image */}
|
||||
<div className="relative h-48 overflow-hidden">
|
||||
<Image
|
||||
src={program.image}
|
||||
alt={program.title}
|
||||
fill
|
||||
className="object-cover group-hover:scale-110 transition-transform duration-700"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
|
||||
|
||||
{/* Impact Badge */}
|
||||
<div className="absolute top-4 right-4 bg-white/90 backdrop-blur-sm text-slate-700 px-3 py-1 rounded-full text-xs font-semibold">
|
||||
{program.beneficiaries}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full font-medium">
|
||||
{program.focus}
|
||||
</span>
|
||||
</div>
|
||||
<h4 className="text-lg font-semibold text-slate-900 mb-3">{program.title}</h4>
|
||||
<p className="text-slate-600 text-sm leading-relaxed">{program.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Certifications & Commitments */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100"
|
||||
>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Left Content */}
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 bg-emerald-100/50 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
|
||||
<Globe className="w-4 h-4 text-emerald-600" />
|
||||
<span className="text-emerald-700 font-medium text-sm">Global Standards</span>
|
||||
</div>
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-slate-900 mb-6">
|
||||
Certified for Excellence
|
||||
</h3>
|
||||
<p className="text-lg text-slate-600 leading-relaxed mb-8">
|
||||
Our commitment to quality and sustainability is validated by international certifications and industry recognition.
|
||||
</p>
|
||||
|
||||
{/* Certifications Grid */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-8">
|
||||
{certifications.map((cert, index) => (
|
||||
<div key={index} className="text-center p-4 bg-gray-50 rounded-xl">
|
||||
<div className="text-lg font-bold text-emerald-600 mb-1">{cert.name}</div>
|
||||
<div className="text-xs text-slate-600">{cert.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Button asChild size="lg" className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white px-8 py-4 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group">
|
||||
<Link href="/about/certifications" className="inline-flex items-center">
|
||||
View All Certifications
|
||||
<ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Right Visual */}
|
||||
<div className="relative">
|
||||
<div className="relative w-full h-80 rounded-2xl overflow-hidden shadow-2xl">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1560493676-04071c5f467b?w=600&h=400&fit=crop&q=80"
|
||||
alt="Sustainable farming"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-green-900/40 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
{/* Floating Stats */}
|
||||
<div className="absolute -bottom-6 -left-6 bg-white rounded-2xl shadow-xl p-6 border border-gray-100">
|
||||
<div className="text-2xl font-bold text-green-600">Carbon</div>
|
||||
<div className="text-sm text-slate-600">Neutral by 2030</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute -top-6 -right-6 bg-white rounded-2xl shadow-xl p-6 border border-gray-100">
|
||||
<div className="text-2xl font-bold text-blue-600">Zero</div>
|
||||
<div className="text-sm text-slate-600">Waste Goal</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
62
components/sections/cta.tsx
Normal file
62
components/sections/cta.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import { Mail, Phone } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
|
||||
|
||||
export default function CTA() {
|
||||
|
||||
return (
|
||||
<section className="py-12 sm:py-16 md:py-20 bg-gradient-to-r from-slate-900 to-emerald-900 text-white relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-black/20"></div>
|
||||
<div className="relative z-10 max-w-6xl mx-auto px-3 sm:px-6 md:px-8 lg:px-12">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center"
|
||||
>
|
||||
<Badge className="mb-4 sm:mb-6 bg-emerald-600 text-white px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium">Get In Touch</Badge>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-6 sm:mb-8 leading-tight">
|
||||
Ready to Partner With Us?
|
||||
</h2>
|
||||
<p className="text-base sm:text-lg text-emerald-100 mb-8 sm:mb-12 max-w-3xl mx-auto leading-relaxed px-2">
|
||||
Connect with us for bulk orders, wholesale pricing, and custom solutions.
|
||||
Let's build a healthier future together.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 mb-8 sm:mb-12 max-w-2xl mx-auto">
|
||||
<div className="flex items-center justify-center p-4 sm:p-6 bg-white/10 rounded-lg sm:rounded-xl backdrop-blur-sm hover:bg-white/15 transition-all duration-300">
|
||||
<Phone className="h-5 w-5 sm:h-6 sm:w-6 mr-3 sm:mr-4 text-emerald-300 flex-shrink-0" />
|
||||
<div className="text-left">
|
||||
<div className="text-xs sm:text-sm text-emerald-200 font-medium">Call Us</div>
|
||||
<div className="text-base sm:text-lg font-bold">+91 94757 58817</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center p-4 sm:p-6 bg-white/10 rounded-lg sm:rounded-xl backdrop-blur-sm hover:bg-white/15 transition-all duration-300">
|
||||
<Mail className="h-5 w-5 sm:h-6 sm:w-6 mr-3 sm:mr-4 text-emerald-300 flex-shrink-0" />
|
||||
<div className="text-left">
|
||||
<div className="text-xs sm:text-sm text-emerald-200 font-medium">Email Us</div>
|
||||
<div className="text-base sm:text-lg font-bold break-all sm:break-normal">info@padmajarice.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center max-w-md sm:max-w-none mx-auto">
|
||||
<Button size="lg" className="w-full sm:w-auto bg-white text-slate-900 hover:bg-emerald-50 px-6 sm:px-8 py-2.5 sm:py-3 text-base sm:text-lg font-bold rounded-lg sm:rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
|
||||
<Link href="/contact">Get in Touch</Link>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="w-full sm:w-auto border-white bg-transparent hover:bg-white hover:text-slate-900 px-6 sm:px-8 py-2.5 sm:py-3 text-base sm:text-lg font-bold rounded-lg sm:rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
|
||||
<Link href="/part-time">Part time Job</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user