Initial commit - Route Commerce platform
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
import LayoutContainer from "@/components/layout/LayoutContainer";
|
||||
|
||||
export default function CTASection() {
|
||||
return (
|
||||
<section className="py-20 bg-white relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-stone-100 to-transparent" />
|
||||
|
||||
<LayoutContainer>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="relative text-center"
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-black tracking-tight text-stone-950">Ready to Order?</h2>
|
||||
<p className="mt-4 text-stone-500 text-lg">Experience the difference four decades of excellence makes.</p>
|
||||
|
||||
<div className="mt-10 flex flex-wrap justify-center gap-4">
|
||||
<Link
|
||||
href="/tuxedo#stops"
|
||||
className="group relative inline-flex items-center gap-3 rounded-full bg-stone-900 px-8 py-4 font-bold text-white overflow-hidden"
|
||||
>
|
||||
<span className="absolute inset-0 bg-gradient-to-r from-emerald-700 to-emerald-600 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<span className="relative flex items-center gap-2">
|
||||
Find a Stop
|
||||
<svg className="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
|
||||
</svg>
|
||||
</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/tuxedo#products"
|
||||
className="group relative inline-flex items-center gap-3 rounded-full bg-white px-8 py-4 font-bold text-stone-900 ring-2 ring-stone-200 hover:ring-emerald-600 hover:text-emerald-700 transition-all"
|
||||
>
|
||||
<span className="relative">
|
||||
Shop Products
|
||||
<svg className="inline w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
|
||||
</svg>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</LayoutContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import LayoutContainer from "@/components/layout/LayoutContainer";
|
||||
|
||||
interface ContactSectionProps {
|
||||
address: string;
|
||||
}
|
||||
|
||||
export default function ContactSection({ address }: ContactSectionProps) {
|
||||
return (
|
||||
<section className="py-24 md:py-32 bg-stone-950 text-white relative overflow-hidden">
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-0 left-1/3 w-96 h-96 bg-emerald-900/20 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 right-1/3 w-80 h-80 bg-amber-900/10 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<LayoutContainer>
|
||||
<div className="relative">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<span className="text-[11px] font-bold uppercase tracking-[0.25em] text-emerald-400/60">Get in Touch</span>
|
||||
<h2 className="mt-4 text-4xl md:text-5xl font-black tracking-tight text-white leading-tight">
|
||||
Visit Our Farm
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-12 max-w-4xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, delay: 0.1, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="text-center group"
|
||||
>
|
||||
<div className="w-16 h-16 rounded-2xl bg-stone-800 flex items-center justify-center mx-auto mb-6 group-hover:bg-emerald-900 transition-colors">
|
||||
<svg className="w-7 h-7 text-stone-400 group-hover:text-emerald-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-[11px] font-bold uppercase tracking-widest text-stone-500 mb-3">Address</p>
|
||||
<p className="text-stone-300 leading-relaxed">{address}</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, delay: 0.2, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="text-center group"
|
||||
>
|
||||
<div className="w-16 h-16 rounded-2xl bg-stone-800 flex items-center justify-center mx-auto mb-6 group-hover:bg-emerald-900 transition-colors">
|
||||
<svg className="w-7 h-7 text-stone-400 group-hover:text-emerald-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-[11px] font-bold uppercase tracking-widest text-stone-500 mb-3">Phone</p>
|
||||
<p className="text-stone-300">Shipping: 970-323-5631</p>
|
||||
<p className="text-stone-300 mt-1">Office: 970-323-6874</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, delay: 0.3, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="text-center group"
|
||||
>
|
||||
<div className="w-16 h-16 rounded-2xl bg-stone-800 flex items-center justify-center mx-auto mb-6 group-hover:bg-emerald-900 transition-colors">
|
||||
<svg className="w-7 h-7 text-stone-400 group-hover:text-emerald-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-[11px] font-bold uppercase tracking-widest text-stone-500 mb-3">Hours</p>
|
||||
<p className="text-stone-300">M–F: 7AM–6PM</p>
|
||||
<p className="text-stone-300 mt-1">Sat & Sun: 8AM–2PM</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import LayoutContainer from "@/components/layout/LayoutContainer";
|
||||
|
||||
const FAMILY_MEMBERS = [
|
||||
{
|
||||
initials: "JH",
|
||||
name: "John Harold",
|
||||
role: "Founder",
|
||||
bio: "John Harold began selling Olathe's sweet corn directly from pickups in the 1970s. With unwavering dedication to community, family, and agriculture, he built Tuxedo Corn into a thriving family operation. Prior to farming, John established the first Group Home on the Western Slope and opened Colorow Care Center in Montrose County.",
|
||||
era: "1970s",
|
||||
},
|
||||
{
|
||||
initials: "DH",
|
||||
name: "David Harold",
|
||||
role: "Second Generation",
|
||||
bio: "David leads sustainability efforts across Harold farms, implementing drip irrigation and joining the Fair Food Program to ensure responsible labor practices. He continues the family's commitment to raising top-quality corn while protecting the land for future generations.",
|
||||
era: "Present",
|
||||
},
|
||||
{
|
||||
initials: "JW",
|
||||
name: "John William Harold",
|
||||
role: "Mexico Operations",
|
||||
bio: "John William has worked in Guaymas, Sonora, Mexico for over three decades growing sweet corn, onions, wheat, and vegetables. His international operations extend the Harold family farming tradition across borders.",
|
||||
era: "1990s–Present",
|
||||
},
|
||||
{
|
||||
initials: "JH",
|
||||
name: "Joseph Harold",
|
||||
role: "Third Generation",
|
||||
bio: "Joseph works at the corn shed during summer and handles photography and beverages, carrying the family tradition into the next generation while learning every aspect of the business.",
|
||||
era: "Present",
|
||||
},
|
||||
];
|
||||
|
||||
// Family member card with hover effects
|
||||
function FamilyCard({ member, index }: { member: typeof FAMILY_MEMBERS[0]; index: number }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 32 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-60px" }}
|
||||
transition={{ duration: 0.6, delay: index * 0.12, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
whileHover={{ y: -6 }}
|
||||
className="group relative"
|
||||
>
|
||||
{/* Era badge */}
|
||||
<div className="absolute -top-3 -left-3 z-10">
|
||||
<span className="inline-block bg-stone-900 text-stone-200 text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full shadow-lg">
|
||||
{member.era}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative bg-gradient-to-b from-white to-stone-50 rounded-3xl p-8 shadow-lg shadow-black/5 ring-1 ring-stone-200/40 overflow-hidden h-full">
|
||||
{/* Decorative top line */}
|
||||
<motion.div
|
||||
initial={{ scaleX: 0 }}
|
||||
whileHover={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-600 via-emerald-400 to-amber-500 origin-left"
|
||||
/>
|
||||
|
||||
{/* Avatar */}
|
||||
<div className="mb-6 relative">
|
||||
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-stone-900 to-stone-800 flex items-center justify-center shadow-xl shadow-stone-900/30">
|
||||
<span className="text-2xl font-black text-white tracking-tight">{member.initials}</span>
|
||||
</div>
|
||||
{/* Decorative corner accent */}
|
||||
<div className="absolute -bottom-2 -right-2 w-8 h-8 bg-emerald-600/20 rounded-full blur-sm" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div>
|
||||
<h3 className="text-xl font-black text-stone-950 tracking-tight">{member.name}</h3>
|
||||
<p className="mt-2 text-[11px] font-bold uppercase tracking-widest text-emerald-700">{member.role}</p>
|
||||
<p className="mt-4 text-sm leading-relaxed text-stone-600">{member.bio}</p>
|
||||
</div>
|
||||
|
||||
{/* Bottom accent */}
|
||||
<div className="absolute bottom-0 left-8 right-8 h-px bg-gradient-to-r from-transparent via-stone-200 to-transparent" />
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FamilyTimelineSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32 bg-stone-100 relative">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(16,100,50,0.08)_0%,transparent_50%)]" />
|
||||
|
||||
<LayoutContainer>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<span className="text-[11px] font-bold uppercase tracking-[0.25em] text-emerald-700">The People Behind the Corn</span>
|
||||
<h2 className="mt-4 text-4xl md:text-5xl font-black tracking-tight text-stone-950 leading-tight">
|
||||
The Harold Family
|
||||
</h2>
|
||||
<div className="mt-8 mx-auto h-px w-24 bg-gradient-to-r from-emerald-600 via-emerald-400 to-transparent" />
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||
{FAMILY_MEMBERS.map((member, index) => (
|
||||
<FamilyCard key={member.name} member={member} index={index} />
|
||||
))}
|
||||
</div>
|
||||
</LayoutContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
import LayoutContainer from "@/components/layout/LayoutContainer";
|
||||
|
||||
export default function IndianRiverCTASection() {
|
||||
return (
|
||||
<section className="py-20 bg-blue-600 relative overflow-hidden">
|
||||
{/* Subtle decorative elements */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-700/30 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 right-1/4 w-80 h-80 bg-emerald-900/10 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<LayoutContainer>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="relative text-center backdrop-blur-md bg-white/10 border border-white/20 rounded-3xl p-12"
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-black tracking-tight text-white">
|
||||
Taste the Difference
|
||||
</h2>
|
||||
<p className="mt-4 text-blue-100 text-lg leading-relaxed max-w-2xl mx-auto">
|
||||
We invite you to join us on this sweet journey. Our fruits are guaranteed to be fresh, flavorful, and of the highest quality, straight from the grove to your neighborhood.
|
||||
</p>
|
||||
|
||||
<div className="mt-10 flex flex-wrap justify-center gap-4">
|
||||
<Link
|
||||
href="/indian-river-direct#products"
|
||||
className="group relative inline-flex items-center gap-3 rounded-full bg-white px-8 py-4 font-bold text-blue-600 overflow-hidden hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300"
|
||||
>
|
||||
<span className="absolute inset-0 bg-blue-50 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
|
||||
<span className="relative flex items-center gap-2">
|
||||
Shop Products
|
||||
<svg
|
||||
className="w-5 h-5 group-hover:translate-x-1 transition-transform"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/indian-river-direct#stops"
|
||||
className="group relative inline-flex items-center gap-3 rounded-full bg-blue-700 px-8 py-4 font-bold text-white ring-2 ring-blue-500 hover:ring-white hover:bg-blue-500 hover:-translate-y-0.5 transition-all duration-300"
|
||||
>
|
||||
<span className="relative flex items-center gap-2">
|
||||
Find a Stop
|
||||
<svg
|
||||
className="w-5 h-5 group-hover:translate-x-1 transition-transform"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</LayoutContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import LayoutContainer from "@/components/layout/LayoutContainer";
|
||||
|
||||
// Custom SVG Icons for Citrus Varieties
|
||||
function NavelOrangeIcon() {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-12 h-12"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{/* Orange body */}
|
||||
<ellipse cx="24" cy="26" rx="18" ry="17" fill="currentColor" opacity="0.15" />
|
||||
<ellipse cx="24" cy="26" rx="18" ry="17" stroke="currentColor" strokeWidth="1.2" />
|
||||
|
||||
{/* Navel (belly button) */}
|
||||
<circle cx="24" cy="34" r="3" fill="currentColor" opacity="0.4" />
|
||||
<circle cx="24" cy="34" r="3" stroke="currentColor" strokeWidth="1" />
|
||||
|
||||
{/* Stem */}
|
||||
<path
|
||||
d="M24 9 C24 9 22 6 24 4 C26 6 27 7 24 9Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.2"
|
||||
fill="currentColor"
|
||||
opacity="0.6"
|
||||
/>
|
||||
<path d="M24 9 L24 12" stroke="currentColor" strokeWidth="1.2" />
|
||||
|
||||
{/* Highlight */}
|
||||
<ellipse cx="18" cy="20" rx="4" ry="3" fill="currentColor" opacity="0.1" />
|
||||
|
||||
{/* Texture dots */}
|
||||
<circle cx="16" cy="26" r="0.8" fill="currentColor" opacity="0.2" />
|
||||
<circle cx="32" cy="24" r="0.8" fill="currentColor" opacity="0.2" />
|
||||
<circle cx="20" cy="32" r="0.8" fill="currentColor" opacity="0.2" />
|
||||
<circle cx="28" cy="30" r="0.8" fill="currentColor" opacity="0.2" />
|
||||
|
||||
{/* Juice droplets */}
|
||||
<path d="M14 40 Q15 42 14 44 Q13 42 14 40Z" fill="currentColor" opacity="0.3" />
|
||||
<path d="M34 42 Q35 44 34 46 Q33 44 34 42Z" fill="currentColor" opacity="0.3" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function TangerineIcon() {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-12 h-12"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{/* Tangerine body - slightly flatter */}
|
||||
<ellipse cx="24" cy="26" rx="17" ry="16" fill="currentColor" opacity="0.15" />
|
||||
<ellipse cx="24" cy="26" rx="17" ry="16" stroke="currentColor" strokeWidth="1.2" />
|
||||
|
||||
{/* Segment lines */}
|
||||
<path d="M24 10 Q24 26 24 42" stroke="currentColor" strokeWidth="0.6" opacity="0.4" />
|
||||
<path d="M7 26 Q24 26 41 26" stroke="currentColor" strokeWidth="0.6" opacity="0.4" />
|
||||
<path d="M11 16 Q24 22 37 32" stroke="currentColor" strokeWidth="0.6" opacity="0.3" />
|
||||
<path d="M11 36 Q24 30 37 16" stroke="currentColor" strokeWidth="0.6" opacity="0.3" />
|
||||
|
||||
{/* Easy peel indication - slightly separated skin line at top */}
|
||||
<path
|
||||
d="M12 12 Q24 8 36 12"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0.8"
|
||||
strokeDasharray="2 2"
|
||||
opacity="0.5"
|
||||
/>
|
||||
|
||||
{/* Stem */}
|
||||
<path d="M24 10 L24 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
|
||||
<path
|
||||
d="M20 7 Q24 5 28 7"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.2"
|
||||
fill="none"
|
||||
/>
|
||||
|
||||
{/* Leaf */}
|
||||
<path
|
||||
d="M28 6 Q32 4 34 8 Q30 10 28 6Z"
|
||||
fill="currentColor"
|
||||
opacity="0.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
|
||||
{/* Highlight */}
|
||||
<ellipse cx="17" cy="22" rx="5" ry="4" fill="currentColor" opacity="0.1" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function GrapefruitIcon() {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-12 h-12"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{/* Grapefruit body - larger, darker */}
|
||||
<ellipse cx="24" cy="26" rx="19" ry="18" fill="currentColor" opacity="0.15" />
|
||||
<ellipse cx="24" cy="26" rx="19" ry="18" stroke="currentColor" strokeWidth="1.2" />
|
||||
|
||||
{/* Section lines - more prominent for grapefruit */}
|
||||
<path d="M24 8 Q24 26 24 44" stroke="currentColor" strokeWidth="0.8" opacity="0.5" />
|
||||
<path d="M5 26 Q24 26 43 26" stroke="currentColor" strokeWidth="0.8" opacity="0.5" />
|
||||
<path d="M9 15 Q24 22 39 35" stroke="currentColor" strokeWidth="0.6" opacity="0.4" />
|
||||
<path d="M9 37 Q24 30 39 15" stroke="currentColor" strokeWidth="0.6" opacity="0.4" />
|
||||
|
||||
{/* Inner segments suggestion */}
|
||||
<path d="M13 20 Q20 23 27 20" stroke="currentColor" strokeWidth="0.4" opacity="0.25" />
|
||||
<path d="M13 32 Q20 29 27 32" stroke="currentColor" strokeWidth="0.4" opacity="0.25" />
|
||||
|
||||
{/* Stem with leaf */}
|
||||
<path d="M24 8 L24 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
|
||||
<ellipse
|
||||
cx="27"
|
||||
cy="6"
|
||||
rx="5"
|
||||
ry="3"
|
||||
transform="rotate(30 27 6)"
|
||||
fill="currentColor"
|
||||
opacity="0.4"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
|
||||
{/* Highlight - subtle */}
|
||||
<ellipse cx="16" cy="19" rx="5" ry="4" fill="currentColor" opacity="0.08" />
|
||||
|
||||
{/* Bottom texture */}
|
||||
<circle cx="20" cy="36" r="0.6" fill="currentColor" opacity="0.15" />
|
||||
<circle cx="28" cy="38" r="0.6" fill="currentColor" opacity="0.15" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const CITRUS_VARIETIES = [
|
||||
{
|
||||
name: "Navel Oranges",
|
||||
description: "Sweet and juicy, perfect for eating or juicing",
|
||||
icon: NavelOrangeIcon,
|
||||
},
|
||||
{
|
||||
name: "Tangerines",
|
||||
description: "Easy-to-peel and bursting with flavor",
|
||||
icon: TangerineIcon,
|
||||
},
|
||||
{
|
||||
name: "Grapefruits",
|
||||
description: "Bold and tangy, a morning favorite",
|
||||
icon: GrapefruitIcon,
|
||||
},
|
||||
];
|
||||
|
||||
export default function IndianRiverCitrusSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32 bg-white relative overflow-hidden">
|
||||
<LayoutContainer>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="mx-auto max-w-2xl text-center mb-16"
|
||||
>
|
||||
<span className="text-[11px] font-semibold uppercase tracking-widest text-blue-600 mb-4 block">
|
||||
Our Products
|
||||
</span>
|
||||
<h2 className="text-5xl md:text-6xl font-black tracking-tight text-stone-950 leading-tight">
|
||||
The Fruits of Our Labor
|
||||
</h2>
|
||||
<p className="mt-6 text-stone-700 leading-relaxed text-lg">
|
||||
We are continuously striving for excellence, refining our practices to bring you the best citrus possible. For years, our fruits have been enjoyed by families across the Mid-East — from our sweet navel oranges and easy-to-peel tangerines, to our bold, tangy grapefruits.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-3 max-w-4xl mx-auto">
|
||||
{CITRUS_VARIETIES.map((citrus, index) => (
|
||||
<motion.div
|
||||
key={citrus.name}
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{
|
||||
duration: 0.8,
|
||||
delay: index * 0.1,
|
||||
ease: [0.22, 0.61, 0.36, 1],
|
||||
}}
|
||||
className="backdrop-blur-md bg-blue-50/70 border border-blue-200/50 rounded-3xl p-8 shadow-xl shadow-blue-200/50 text-center hover:shadow-md hover:-translate-y-1 transition-all duration-300"
|
||||
>
|
||||
<div className="w-20 h-20 rounded-2xl bg-white ring-1 ring-blue-100 flex items-center justify-center mx-auto mb-6 text-blue-500">
|
||||
<citrus.icon />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-stone-950">{citrus.name}</h3>
|
||||
<p className="text-stone-600 text-sm mt-2 leading-relaxed">
|
||||
{citrus.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</LayoutContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import LayoutContainer from "@/components/layout/LayoutContainer";
|
||||
|
||||
interface IndianRiverContactSectionProps {
|
||||
phone?: string | null;
|
||||
email?: string | null;
|
||||
}
|
||||
|
||||
export default function IndianRiverContactSection({
|
||||
phone = "772-971-4484",
|
||||
email = "Info@indianriverdirect.com",
|
||||
}: IndianRiverContactSectionProps) {
|
||||
return (
|
||||
<section className="py-24 md:py-32 bg-stone-950 text-white relative overflow-hidden">
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-0 left-1/3 w-96 h-96 bg-blue-900/20 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 right-1/3 w-80 h-80 bg-emerald-900/10 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<LayoutContainer>
|
||||
<div className="relative">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<span className="text-[11px] font-bold uppercase tracking-[0.25em] text-blue-400/60">
|
||||
Get in Touch
|
||||
</span>
|
||||
<h2 className="mt-4 text-4xl md:text-5xl font-black tracking-tight text-white leading-tight">
|
||||
Contact Us
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-12 max-w-4xl mx-auto">
|
||||
{/* Phone */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, delay: 0.1, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="text-center group"
|
||||
>
|
||||
<div className="w-16 h-16 backdrop-blur-md bg-stone-800/70 border border-stone-700/50 rounded-2xl bg-stone-800 flex items-center justify-center mx-auto mb-6 group-hover:bg-blue-900 transition-colors">
|
||||
<svg
|
||||
className="w-7 h-7 text-stone-400 group-hover:text-blue-400 transition-colors"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-[11px] font-bold uppercase tracking-widest text-stone-500 mb-3">Phone</p>
|
||||
<p className="text-stone-300">{phone}</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Email */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, delay: 0.2, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="text-center group"
|
||||
>
|
||||
<div className="w-16 h-16 backdrop-blur-md bg-stone-800/70 border border-stone-700/50 rounded-2xl bg-stone-800 flex items-center justify-center mx-auto mb-6 group-hover:bg-blue-900 transition-colors">
|
||||
<svg
|
||||
className="w-7 h-7 text-stone-400 group-hover:text-blue-400 transition-colors"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5H4.5A2.25 2.25 0 002.25 6.75m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-[11px] font-bold uppercase tracking-widest text-stone-500 mb-3">Email</p>
|
||||
<p className="text-stone-300">{email}</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Location */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, delay: 0.3, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="text-center group"
|
||||
>
|
||||
<div className="w-16 h-16 backdrop-blur-md bg-stone-800/70 border border-stone-700/50 rounded-2xl bg-stone-800 flex items-center justify-center mx-auto mb-6 group-hover:bg-blue-900 transition-colors">
|
||||
<svg
|
||||
className="w-7 h-7 text-stone-400 group-hover:text-blue-400 transition-colors"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-[11px] font-bold uppercase tracking-widest text-stone-500 mb-3">Location</p>
|
||||
<p className="text-stone-300">Indian River Region, Florida</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Business Hours */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, delay: 0.4, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="mt-16 max-w-md mx-auto"
|
||||
>
|
||||
<div className="backdrop-blur-md bg-stone-800/80 border border-stone-700/50 rounded-2xl p-6">
|
||||
<p className="text-[11px] font-bold uppercase tracking-widest text-stone-500 mb-4 text-center">
|
||||
Business Hours
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-stone-400">Monday – Friday</p>
|
||||
<p className="text-stone-300 font-medium">8:00 AM – 5:00 PM</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-stone-400">Saturday</p>
|
||||
<p className="text-stone-300 font-medium">9:00 AM – 2:00 PM</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-stone-400">Sunday</p>
|
||||
<p className="text-stone-300 font-medium">Closed</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</LayoutContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import LayoutContainer from "@/components/layout/LayoutContainer";
|
||||
|
||||
export default function IndianRiverMissionSection() {
|
||||
return (
|
||||
<>
|
||||
{/* Origin Story */}
|
||||
<section className="py-24 md:py-32 backdrop-blur-sm bg-white/80 border border-white/50 rounded-3xl p-10 shadow-xl shadow-stone-200/50 relative overflow-hidden">
|
||||
<LayoutContainer>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="mx-auto max-w-2xl"
|
||||
>
|
||||
<span className="text-[11px] font-semibold uppercase tracking-widest text-blue-600 mb-4 block">The Beginning</span>
|
||||
<h2 className="text-5xl md:text-6xl font-black tracking-tight text-stone-950 mb-8 leading-tight">From Farm to Family</h2>
|
||||
<div className="space-y-6 text-stone-700 leading-relaxed text-lg">
|
||||
<p>
|
||||
At Indian River Direct, quality and freshness are more than just goals — they're the foundation of everything we do. We're not just a company that delivers exceptional fruit; we're also the farmers behind the scenes. By acquiring Fort B Groves, the owner of Indian River Direct created a direct and reliable source of premium citrus for our customers.
|
||||
</p>
|
||||
<p>
|
||||
Owning and managing our own grove allows us to oversee every step of the process — from responsible farming practices and careful harvesting to strict quality control — ensuring each fruit box meets our highest standards. With direct access to the farm, we're able to reduce dependence on outside growers and deliver fruit that's consistently fresh, flavorful, and farm-to-table fast.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</LayoutContainer>
|
||||
</section>
|
||||
|
||||
{/* Direct Promise */}
|
||||
<section className="py-24 md:py-32 backdrop-blur-sm bg-white/60 border border-white/40 rounded-3xl p-12 shadow-xl shadow-stone-200/50 relative overflow-hidden">
|
||||
{/* Subtle decorative elements */}
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-900/10 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-emerald-900/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<LayoutContainer>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="mx-auto max-w-2xl text-center relative"
|
||||
>
|
||||
<span className="text-[11px] font-semibold uppercase tracking-widest text-blue-600 mb-4 block">Our Promise</span>
|
||||
<h2 className="text-5xl md:text-6xl font-black tracking-tight text-stone-950 mb-8 leading-tight">
|
||||
The Word “Direct” Means Something
|
||||
</h2>
|
||||
<div className="space-y-6 text-stone-700 leading-relaxed text-lg">
|
||||
<p>
|
||||
Our journey began with a simple passion: growing the finest citrus fruits and delivering them straight from our groves to your table with care, speed, and integrity.
|
||||
</p>
|
||||
<p>
|
||||
We believe in minimizing the time between harvest and delivery, ensuring that our citrus is hand-picked at peak ripeness and arrives to you bursting with flavor and nutrition. This direct-to-you approach means you enjoy fruit that's fresher, juicier, and more vibrant than anything sitting on store shelves.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 32 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, delay: 0.2, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="mt-14 flex items-center justify-center gap-6 md:gap-12"
|
||||
>
|
||||
<div className="text-center">
|
||||
<p className="text-5xl md:text-6xl font-black text-blue-600">40+</p>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-widest text-stone-500 mt-2">Years</p>
|
||||
</div>
|
||||
<div className="h-16 w-px bg-stone-200" />
|
||||
<div className="text-center">
|
||||
<p className="text-5xl md:text-6xl font-black text-blue-600">6</p>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-widest text-stone-500 mt-2">States</p>
|
||||
</div>
|
||||
<div className="h-16 w-px bg-stone-200" />
|
||||
<div className="text-center">
|
||||
<p className="text-5xl md:text-6xl font-black text-blue-600">100%</p>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-widest text-stone-500 mt-2">Farm-Direct</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</LayoutContainer>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import LayoutContainer from "@/components/layout/LayoutContainer";
|
||||
|
||||
const TEAM_MEMBERS = [
|
||||
{ name: "Dan", role: "Owner", description: "Leading Indian River Direct with a vision for farm-to-table freshness" },
|
||||
{ name: "Angela", role: "Office Manager", description: "Ensuring every order runs smoothly and customers are cared for" },
|
||||
{ name: "Mariah", role: "Digital Marketing Manager", description: "Connecting our grove with families across the Mid-East" },
|
||||
{ name: "Kenny", role: "Driver/Sales Associate", description: "Delivering fresh fruit directly to your neighborhood" },
|
||||
{ name: "Exzavier", role: "Driver/Sales Associate", description: "Bringing the grove to your doorstep with care" },
|
||||
{ name: "Jaime", role: "Driver/Sales Associate", description: "Your friendly stop coordinator in the field" },
|
||||
{ name: "Ponce", role: "Driver/Sales Associate", description: "Ensuring quality delivery across the region" },
|
||||
];
|
||||
|
||||
export default function IndianRiverTeamSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32 bg-stone-50 backdrop-blur-sm bg-white/50 relative overflow-hidden">
|
||||
{/* Subtle decorative elements */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-0 right-1/4 w-80 h-80 bg-blue-900/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-1/4 w-72 h-72 bg-blue-900/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<LayoutContainer>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="text-center mb-16 relative"
|
||||
>
|
||||
<span className="text-[11px] font-semibold uppercase tracking-widest text-blue-600 mb-4 block">
|
||||
The People
|
||||
</span>
|
||||
<h2 className="text-5xl md:text-6xl font-black tracking-tight text-stone-950 leading-tight">
|
||||
Meet the Team
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
{TEAM_MEMBERS.map((member, index) => (
|
||||
<motion.div
|
||||
key={member.name}
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{
|
||||
duration: 0.8,
|
||||
delay: index * 0.08,
|
||||
ease: [0.22, 0.61, 0.36, 1],
|
||||
}}
|
||||
className="backdrop-blur-md bg-white/80 border border-white/50 rounded-3xl shadow-xl shadow-stone-200/50 p-6 text-center group hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
|
||||
>
|
||||
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-600 to-blue-700 mx-auto mb-4 flex items-center justify-center shadow-md group-hover:scale-105 transition-transform duration-300">
|
||||
<span className="text-2xl font-bold text-white">{member.name[0]}</span>
|
||||
</div>
|
||||
<h3 className="font-bold text-stone-950 text-lg">{member.name}</h3>
|
||||
<p className="text-blue-600 text-sm font-semibold mt-1">{member.role}</p>
|
||||
<p className="text-stone-500 text-sm mt-3 leading-relaxed">{member.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</LayoutContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import LayoutContainer from "@/components/layout/LayoutContainer";
|
||||
|
||||
// Custom checkmark icon with blue styling
|
||||
function CustomCheckIcon() {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-6 h-6"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="12" cy="12" r="11" fill="currentColor" opacity="0.1" stroke="currentColor" strokeWidth="1" />
|
||||
<path
|
||||
d="M7 13L10 16L17 9"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const VALUES = [
|
||||
{
|
||||
title: "Farm Ownership",
|
||||
description: "We own and operate Fort B Groves, giving us complete control over quality from seed to delivery.",
|
||||
},
|
||||
{
|
||||
title: "Hand-Picked Freshness",
|
||||
description: "Every piece of fruit is hand-picked at peak ripeness, never machine-harvested.",
|
||||
},
|
||||
{
|
||||
title: "Direct to You",
|
||||
description: "Our trucks deliver straight from the grove, skipping distribution centers and store shelves.",
|
||||
},
|
||||
{
|
||||
title: "Quality Guaranteed",
|
||||
description: "Each box meets our strict quality standards before it leaves our farm.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function IndianRiverValuesSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32 bg-white backdrop-blur-sm bg-white/70 relative overflow-hidden">
|
||||
{/* Subtle decorative elements */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-1/3 left-0 w-64 h-64 bg-blue-900/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-1/3 right-0 w-64 h-64 bg-blue-900/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<LayoutContainer>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="mx-auto max-w-2xl text-center mb-16 relative"
|
||||
>
|
||||
<span className="text-[11px] font-semibold uppercase tracking-widest text-blue-600 mb-4 block">
|
||||
Why Choose Us
|
||||
</span>
|
||||
<h2 className="text-5xl md:text-6xl font-black tracking-tight text-stone-950 leading-tight">
|
||||
What Sets Us Apart
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 max-w-4xl mx-auto">
|
||||
{VALUES.map((value, index) => (
|
||||
<motion.div
|
||||
key={value.title}
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{
|
||||
duration: 0.8,
|
||||
delay: index * 0.1,
|
||||
ease: [0.22, 0.61, 0.36, 1],
|
||||
}}
|
||||
className="backdrop-blur-md bg-white/70 border border-white/50 rounded-3xl shadow-xl shadow-stone-200/50 p-8 flex items-start gap-5 group hover:shadow-md hover:-translate-y-0.5 transition-all duration-300"
|
||||
>
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-colors duration-300">
|
||||
<CustomCheckIcon />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-stone-950 text-lg">{value.title}</h3>
|
||||
<p className="text-stone-600 text-sm mt-2 leading-relaxed">{value.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</LayoutContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import LayoutContainer from "@/components/layout/LayoutContainer";
|
||||
|
||||
export default function MissionSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32 bg-stone-50 relative overflow-hidden">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-emerald-100/30 rounded-full blur-3xl -z-10" />
|
||||
|
||||
<LayoutContainer>
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<span className="text-[11px] font-bold uppercase tracking-[0.25em] text-emerald-700">Our Mission</span>
|
||||
<h2 className="mt-4 text-4xl md:text-5xl font-black tracking-tight text-stone-950 leading-tight">
|
||||
Raising the Best Corn<br />in the World
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-12">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, delay: 0.15, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="prose prose-lg"
|
||||
>
|
||||
<p className="text-stone-600 leading-relaxed text-lg">
|
||||
Tuxedo Corn is the <strong className="text-stone-900">exclusive grower and shipper</strong> of Olathe Sweet Sweet Corn — the only corn that carries that prestigious name. When you order from us, you receive the real thing: grown by the only family that planted roots in Olathe, Colorado over forty years ago.
|
||||
</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, delay: 0.25, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="prose prose-lg"
|
||||
>
|
||||
<p className="text-stone-600 leading-relaxed text-lg">
|
||||
Not all sweet corn is equal. Olathe Sweet was developed for our high-altitude mountain climate, where <strong className="text-stone-900">intense summer sun by day meets cool mountain air at night</strong>. That combination coaxes extraordinary sweetness and tenderness out of every single ear.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 48 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.8, delay: 0.35, ease: [0.22, 0.61, 0.36, 1] }}
|
||||
className="mt-16 bg-white rounded-3xl p-10 shadow-lg shadow-stone-900/5 ring-1 ring-stone-200/50"
|
||||
>
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="w-14 h-14 rounded-2xl bg-emerald-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg className="w-7 h-7 text-emerald-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-stone-950 mb-3">Grown with Future Generations in Mind</h3>
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
We farm regeneratively — no-till and minimal-till methods protect soil structure, cover crops naturally cycle nutrients, and reduced chemical inputs keep our mountain water pure. Every ear is hand-picked at peak freshness, inspected by our dedicated crew. Not machine-harvested. Not sorted by strangers. <strong className="text-stone-900">Hand-picked.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</LayoutContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user