6b12e2ae2a
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m12s
- Changed layout padding from Tailwind pt-48 to inline style paddingTop: 110px for reliable CSS specificity - Added negative margin to homepage hero section to maintain vertical centering - Updated client components (About, Contact, HowItWorks) from py-12 to pb-12 for proper spacing - All pages now have proper header clearance without content cutoff 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
338 lines
12 KiB
TypeScript
338 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { Anchor, Waves, Shield, Award, ArrowRight } from 'lucide-react';
|
|
import { motion, useScroll, useTransform } from 'framer-motion';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
export default function Home() {
|
|
const router = useRouter();
|
|
const [, setMousePosition] = useState({ x: 0, y: 0 });
|
|
const heroRef = useRef<HTMLDivElement>(null);
|
|
const { scrollYProgress } = useScroll({
|
|
target: heroRef,
|
|
offset: ["start start", "end start"]
|
|
});
|
|
|
|
const y = useTransform(scrollYProgress, [0, 1], ["0%", "30%"]);
|
|
const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);
|
|
|
|
useEffect(() => {
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
setMousePosition({ x: e.clientX, y: e.clientY });
|
|
};
|
|
|
|
window.addEventListener('mousemove', handleMouseMove);
|
|
return () => window.removeEventListener('mousemove', handleMouseMove);
|
|
}, []);
|
|
|
|
const handleCalculateClick = () => {
|
|
router.push('/calculator');
|
|
};
|
|
|
|
const handleLearnMoreClick = () => {
|
|
router.push('/about');
|
|
};
|
|
|
|
// Animation variants
|
|
const fadeInUp = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.6,
|
|
ease: [0.22, 1, 0.36, 1]
|
|
}
|
|
}
|
|
};
|
|
|
|
const staggerContainer = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2,
|
|
delayChildren: 0.3
|
|
}
|
|
}
|
|
};
|
|
|
|
const scaleOnHover = {
|
|
rest: { scale: 1 },
|
|
hover: {
|
|
scale: 1.05,
|
|
transition: {
|
|
type: "spring",
|
|
stiffness: 400,
|
|
damping: 17
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="relative" style={{ marginTop: '-110px' }}>
|
|
{/* Hero Section */}
|
|
<motion.div
|
|
ref={heroRef}
|
|
className="relative min-h-screen w-full flex items-center justify-center py-20"
|
|
style={{ y, opacity }}
|
|
>
|
|
{/* Hero Content */}
|
|
<div className="relative">
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1, delay: 0.5 }}
|
|
className="mb-8"
|
|
>
|
|
{/* Puffin Logo */}
|
|
<motion.img
|
|
src="/puffinOffset.webp"
|
|
alt="Puffin Offset Logo"
|
|
className="h-24 w-auto mx-auto mb-8"
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
/>
|
|
|
|
<motion.h1
|
|
className="text-6xl sm:text-7xl lg:text-8xl font-bold mb-6"
|
|
>
|
|
<span className="heading-luxury">Luxury Meets</span>
|
|
<br />
|
|
<span className="text-gradient-gold">Sustainability</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
className="text-xl sm:text-2xl text-slate-600 max-w-4xl mx-auto leading-relaxed mb-12"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 1, delay: 1 }}
|
|
>
|
|
The world's most exclusive carbon offsetting platform for superyacht owners and operators
|
|
</motion.p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="flex flex-col sm:flex-row gap-6 justify-center items-center"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1.3 }}
|
|
>
|
|
<motion.button
|
|
onClick={handleCalculateClick}
|
|
className="btn-premium text-lg px-8 py-4"
|
|
whileHover={{ scale: 1.05, boxShadow: "0 10px 30px rgba(30, 64, 175, 0.4)" }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
Calculate Your Impact
|
|
<ArrowRight className="ml-2 inline" size={20} />
|
|
</motion.button>
|
|
|
|
<motion.button
|
|
onClick={handleLearnMoreClick}
|
|
className="btn-secondary text-lg px-8 py-4"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
Discover More
|
|
</motion.button>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Features Section with Luxury Styling */}
|
|
<div className="py-16 relative">
|
|
<motion.div
|
|
className="text-center mb-16"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<h2 className="text-5xl font-bold heading-luxury mb-6">
|
|
Exclusive Maritime Solutions
|
|
</h2>
|
|
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
|
|
Experience the pinnacle of sustainable luxury with our premium carbon offsetting services
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16"
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true, amount: 0.2 }}
|
|
>
|
|
<motion.div
|
|
className="luxury-card p-8"
|
|
variants={fadeInUp}
|
|
whileHover="hover"
|
|
>
|
|
<motion.div variants={scaleOnHover} className="h-full text-center">
|
|
<motion.div
|
|
className="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-6"
|
|
initial={{ rotate: -10, opacity: 0 }}
|
|
whileInView={{ rotate: 0, opacity: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Waves className="text-white" size={28} />
|
|
</motion.div>
|
|
<h3 className="text-2xl font-bold heading-luxury mb-4">Flexible Solutions</h3>
|
|
<p className="text-slate-600 leading-relaxed">
|
|
Tailor your offsetting to match your yachting lifestyle - from single trips to full annual emissions coverage.
|
|
</p>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="luxury-card p-8"
|
|
variants={fadeInUp}
|
|
whileHover="hover"
|
|
>
|
|
<motion.div variants={scaleOnHover} className="h-full text-center">
|
|
<motion.div
|
|
className="w-16 h-16 bg-gradient-to-br from-yellow-400 to-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6"
|
|
initial={{ rotate: 10, opacity: 0 }}
|
|
whileInView={{ rotate: 0, opacity: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Shield className="text-slate-800" size={28} />
|
|
</motion.div>
|
|
<h3 className="text-2xl font-bold heading-luxury mb-4">Verified Impact</h3>
|
|
<p className="text-slate-600 leading-relaxed">
|
|
Science-based projects with transparent reporting ensure your investment creates real environmental change.
|
|
</p>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="luxury-card p-8"
|
|
variants={fadeInUp}
|
|
whileHover="hover"
|
|
>
|
|
<motion.div variants={scaleOnHover} className="h-full text-center">
|
|
<motion.div
|
|
className="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mx-auto mb-6"
|
|
initial={{ rotate: -5, opacity: 0 }}
|
|
whileInView={{ rotate: 0, opacity: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.6 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Award className="text-white" size={28} />
|
|
</motion.div>
|
|
<h3 className="text-2xl font-bold heading-luxury mb-4">Premium Service</h3>
|
|
<p className="text-slate-600 leading-relaxed">
|
|
White-glove service designed for discerning yacht owners who demand excellence in sustainability.
|
|
</p>
|
|
</motion.div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<motion.div
|
|
className="bg-white rounded-xl shadow-lg p-12 mb-16 text-center"
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.7, ease: "easeOut" }}
|
|
viewport={{ once: true, amount: 0.3 }}
|
|
>
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="flex items-center justify-center space-x-4 mb-6">
|
|
<motion.div
|
|
initial={{ y: -20, opacity: 0 }}
|
|
whileInView={{ y: 0, opacity: 1 }}
|
|
transition={{
|
|
type: "spring",
|
|
stiffness: 300,
|
|
damping: 15,
|
|
delay: 0.2
|
|
}}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Anchor className="text-blue-600" size={32} />
|
|
</motion.div>
|
|
<motion.h2
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.3 }}
|
|
viewport={{ once: true }}
|
|
className="text-3xl font-bold text-gray-900"
|
|
>
|
|
Empower Your Yacht Business with In-House Offsetting
|
|
</motion.h2>
|
|
</div>
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="text-lg text-gray-600 leading-relaxed text-justify"
|
|
>
|
|
Our offsetting tool is not only perfect for charter guests and yacht owners, it can also be used by yacht management companies and brokerage firms seeking to integrate sustainability into the entirety of their operations. Use Puffin to offer clients carbon-neutral charter options or manage the environmental footprint of your fleet. Showcase your commitment to eco-conscious luxury while adding value to your services and elevating your brand.
|
|
</motion.p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="text-center bg-white rounded-xl shadow-lg p-12 mb-16"
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.7, ease: "easeOut" }}
|
|
viewport={{ once: true, amount: 0.3 }}
|
|
>
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: -10 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="text-3xl font-bold text-gray-900 mb-6"
|
|
>
|
|
Ready to Make a Difference?
|
|
</motion.h2>
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.3 }}
|
|
viewport={{ once: true }}
|
|
className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto"
|
|
>
|
|
Join the growing community of environmentally conscious yacht owners and operators who are leading the way in maritime sustainability.
|
|
</motion.p>
|
|
<motion.div
|
|
className="flex justify-center space-x-4"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
transition={{ type: "spring", stiffness: 400, damping: 17 }}
|
|
onClick={handleCalculateClick}
|
|
className="bg-blue-600 text-white px-8 py-3 rounded-lg"
|
|
>
|
|
Calculate Your Impact
|
|
</motion.button>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05, backgroundColor: "rgba(219, 234, 254, 1)" }}
|
|
whileTap={{ scale: 0.98 }}
|
|
transition={{ type: "spring", stiffness: 400, damping: 17 }}
|
|
onClick={handleLearnMoreClick}
|
|
className="border-2 border-blue-600 text-blue-600 px-8 py-3 rounded-lg"
|
|
>
|
|
Learn More
|
|
</motion.button>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|