first commit
This commit is contained in:
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user