Update favicon and logo from SVG to WebP format
Replace puffin-logo.svg with puffinOffset.webp in both the favicon link and JSON-LD structured data to use WebP image format instead of SVG.
This commit is contained in:
Matt
parent
eccfe856b1
commit
7484824246
143
src/App.tsx
143
src/App.tsx
@ -115,21 +115,33 @@ function App() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-blue-50 to-green-50">
|
||||
<header className="bg-white shadow-sm relative">
|
||||
<div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50 wave-pattern">
|
||||
<header className="glass-nav shadow-luxury relative z-50 sticky top-0">
|
||||
<div className="max-w-7xl mx-auto px-4 py-3 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div
|
||||
className="flex items-center space-x-3 cursor-pointer"
|
||||
<motion.div
|
||||
className="flex items-center space-x-3 cursor-pointer group"
|
||||
onClick={() => handleNavigate('home')}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 17 }}
|
||||
>
|
||||
<img
|
||||
<motion.img
|
||||
src="/puffinOffset.webp"
|
||||
alt="Puffin Offset Logo"
|
||||
className="h-8 w-auto"
|
||||
className="h-10 w-auto transition-transform duration-300 group-hover:scale-110"
|
||||
initial={{ opacity: 0, rotate: -10 }}
|
||||
animate={{ opacity: 1, rotate: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
/>
|
||||
<h1 className="text-xl font-bold text-gray-900">Puffin Offset</h1>
|
||||
</div>
|
||||
<motion.h1
|
||||
className="text-xl font-bold heading-luxury"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
>
|
||||
Puffin Offset
|
||||
</motion.h1>
|
||||
</motion.div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
@ -140,31 +152,26 @@ function App() {
|
||||
</button>
|
||||
|
||||
{/* Desktop navigation */}
|
||||
<nav className="hidden sm:flex space-x-4">
|
||||
<button
|
||||
onClick={() => handleNavigate('calculator')}
|
||||
className={`text-gray-600 hover:text-gray-900 ${currentPage === 'calculator' ? 'font-semibold' : ''}`}
|
||||
<nav className="hidden sm:flex space-x-2">
|
||||
{['calculator', 'how-it-works', 'about', 'contact'].map((page, index) => (
|
||||
<motion.button
|
||||
key={page}
|
||||
onClick={() => handleNavigate(page as any)}
|
||||
className={`px-4 py-2 rounded-xl font-medium transition-all duration-300 ${
|
||||
currentPage === page
|
||||
? 'bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg'
|
||||
: 'text-slate-600 hover:text-slate-900 hover:bg-white/60'
|
||||
}`}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.6 + index * 0.1 }}
|
||||
>
|
||||
Calculator
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigate('how-it-works')}
|
||||
className={`text-gray-600 hover:text-gray-900 ${currentPage === 'how-it-works' ? 'font-semibold' : ''}`}
|
||||
>
|
||||
How it Works
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigate('about')}
|
||||
className={`text-gray-600 hover:text-gray-900 ${currentPage === 'about' ? 'font-semibold' : ''}`}
|
||||
>
|
||||
About
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigate('contact')}
|
||||
className={`text-gray-600 hover:text-gray-900 ${currentPage === 'contact' ? 'font-semibold' : ''}`}
|
||||
>
|
||||
Contact
|
||||
</button>
|
||||
{page === 'how-it-works' ? 'How it Works' :
|
||||
page.charAt(0).toUpperCase() + page.slice(1)}
|
||||
</motion.button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -233,11 +240,73 @@ function App() {
|
||||
</AnimatePresence>
|
||||
</main>
|
||||
|
||||
<footer className="bg-white mt-16">
|
||||
<div className="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
|
||||
<p className="text-center text-gray-500">
|
||||
Powered by Wren Carbon Offset Projects
|
||||
<footer className="bg-gradient-to-r from-slate-900 via-blue-900 to-slate-900 mt-16 relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[url('data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23ffffff' fill-opacity='0.03'%3e%3cpath d='m36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e')] opacity-20"></div>
|
||||
<div className="relative max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<img
|
||||
src="/puffinOffset.webp"
|
||||
alt="Puffin Offset Logo"
|
||||
className="h-8 w-auto"
|
||||
/>
|
||||
<h3 className="text-xl font-bold text-white">Puffin Offset</h3>
|
||||
</div>
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
The world's most exclusive carbon offsetting platform for superyacht owners and operators.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center md:text-left"
|
||||
>
|
||||
<h4 className="text-lg font-semibold text-white mb-4">Services</h4>
|
||||
<ul className="space-y-2 text-slate-300">
|
||||
<li className="hover:text-yellow-400 transition-colors cursor-pointer">Carbon Calculator</li>
|
||||
<li className="hover:text-yellow-400 transition-colors cursor-pointer">Offset Portfolio</li>
|
||||
<li className="hover:text-yellow-400 transition-colors cursor-pointer">Fleet Management</li>
|
||||
<li className="hover:text-yellow-400 transition-colors cursor-pointer">Custom Solutions</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
<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 md:text-left"
|
||||
>
|
||||
<h4 className="text-lg font-semibold text-white mb-4">Sustainability Partners</h4>
|
||||
<p className="text-slate-300 mb-4">
|
||||
Powered by verified carbon offset projects through Wren Climate
|
||||
</p>
|
||||
<div className="text-xs text-slate-400">
|
||||
All projects are verified to international standards
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="border-t border-slate-700 pt-8 text-center"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<p className="text-slate-400">
|
||||
© 2024 Puffin Offset. Luxury meets sustainability.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,31 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Anchor, Globe, BarChart } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Anchor, Globe, BarChart, Waves, Shield, Award, ArrowRight, Compass, Ship, Leaf } from 'lucide-react';
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
|
||||
interface Props {
|
||||
onNavigate: (page: 'home' | 'calculator' | 'how-it-works' | 'about' | 'contact') => void;
|
||||
}
|
||||
|
||||
export function Home({ onNavigate }: Props) {
|
||||
const [mousePosition, 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 = () => {
|
||||
onNavigate('calculator');
|
||||
setTimeout(() => {
|
||||
@ -58,118 +77,194 @@ export function Home({ onNavigate }: Props) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="relative">
|
||||
{/* Luxury Hero Section */}
|
||||
<motion.div
|
||||
className="relative mb-16"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
ref={heroRef}
|
||||
className="relative h-[90vh] overflow-hidden parallax-container"
|
||||
style={{ y, opacity }}
|
||||
>
|
||||
<div className="relative h-[500px]">
|
||||
<motion.img
|
||||
initial={{ scale: 1.1, opacity: 0.8 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 2.5, ease: "easeOut" }}
|
||||
src="https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?auto=format&fit=crop&q=80"
|
||||
alt="Luxury yacht on calm waters"
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
{/* Background Image with Parallax */}
|
||||
<motion.div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundImage: "url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&q=80&w=2070')",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundAttachment: "fixed"
|
||||
}}
|
||||
initial={{ scale: 1.1 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 3, ease: "easeOut" }}
|
||||
/>
|
||||
|
||||
{/* Elegant Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-slate-900/70 via-blue-900/50 to-transparent" />
|
||||
|
||||
{/* Floating Elements */}
|
||||
<motion.div
|
||||
className="absolute top-20 right-20 w-2 h-2 bg-yellow-400 rounded-full opacity-60"
|
||||
animate={{
|
||||
x: mousePosition.x * 0.02,
|
||||
y: mousePosition.y * 0.02,
|
||||
}}
|
||||
transition={{ type: "spring", stiffness: 50, damping: 20 }}
|
||||
/>
|
||||
|
||||
{/* Hero Content */}
|
||||
<div className="relative h-full flex items-center justify-center">
|
||||
<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"
|
||||
>
|
||||
<motion.h1
|
||||
className="text-6xl sm:text-7xl lg:text-8xl font-bold mb-6"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #ffffff 0%, #e0f2fe 50%, #fcd34d 100%)",
|
||||
backgroundClip: "text",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
textShadow: "0 4px 8px rgba(0,0,0,0.3)"
|
||||
}}
|
||||
>
|
||||
Luxury Meets
|
||||
<br />
|
||||
<span className="text-gradient-gold">Sustainability</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
className="text-xl sm:text-2xl text-slate-200 max-w-4xl mx-auto leading-relaxed mb-12"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1.5, delay: 0.5 }}
|
||||
className="absolute inset-0 bg-gradient-to-br from-blue-500/20 via-transparent to-green-500/20"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset-0 flex items-end pb-16">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<motion.h1
|
||||
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: 0.2,
|
||||
ease: [0.22, 1, 0.36, 1]
|
||||
}}
|
||||
className="text-5xl font-bold text-white mb-8 drop-shadow-lg"
|
||||
transition={{ duration: 0.8, delay: 1.3 }}
|
||||
>
|
||||
Set Sail Sustainably with Carbon Offsetting for Superyachts
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
duration: 0.6,
|
||||
delay: 0.6,
|
||||
ease: [0.22, 1, 0.36, 1]
|
||||
}}
|
||||
className="text-xl text-white max-w-3xl mx-auto leading-relaxed drop-shadow-lg"
|
||||
<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 }}
|
||||
>
|
||||
Luxury and environmental responsibility can go hand in hand when you choose to offset the carbon footprint of your superyacht adventures.
|
||||
</motion.p>
|
||||
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="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16"
|
||||
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.3 }}
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
>
|
||||
<motion.div
|
||||
className="bg-white rounded-xl shadow-lg p-8"
|
||||
className="luxury-card p-8"
|
||||
variants={fadeInUp}
|
||||
initial="rest"
|
||||
whileInView="rest"
|
||||
viewport={{ once: true }}
|
||||
whileHover="hover"
|
||||
>
|
||||
<motion.div variants={scaleOnHover} className="h-full">
|
||||
<div className="flex items-center space-x-4 mb-6">
|
||||
<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.5, delay: 0.2 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Globe className="text-blue-600" size={32} />
|
||||
<Waves className="text-white" size={28} />
|
||||
</motion.div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Flexible Offsetting Solutions</h2>
|
||||
</div>
|
||||
<p className="text-gray-600 leading-relaxed text-justify">
|
||||
With Puffin's carbon offsetting program, it's simple to mitigate the environmental impact of a yacht's use by supporting impactful international projects. Whether you want to offset a portion of a single trip, a season, or a yacht's full annual emissions, Puffin gives you the flexibility to offset as much or as little as you like.
|
||||
<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="bg-white rounded-xl shadow-lg p-8"
|
||||
className="luxury-card p-8"
|
||||
variants={fadeInUp}
|
||||
initial="rest"
|
||||
whileInView="rest"
|
||||
viewport={{ once: true }}
|
||||
whileHover="hover"
|
||||
>
|
||||
<motion.div variants={scaleOnHover} className="h-full">
|
||||
<div className="flex items-center space-x-4 mb-6">
|
||||
<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.5, delay: 0.3 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<BarChart className="text-green-600" size={32} />
|
||||
<Shield className="text-slate-800" size={28} />
|
||||
</motion.div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Your Values, Your Choice</h2>
|
||||
</div>
|
||||
<p className="text-gray-600 leading-relaxed text-justify">
|
||||
Our portfolios are designed to resonate with the values of our most environmentally-conscious clients, ensuring contributions align with their passion for a better planet. Our science-based, verified carbon offsetting projects have a real and ongoing impact in the fight against climate change.
|
||||
<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"
|
||||
|
||||
@ -94,7 +94,7 @@ export function TripCalculator({ vesselData, onOffsetClick }: Props) {
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="bg-white rounded-lg shadow-xl p-6 max-w-2xl w-full mt-8"
|
||||
className="luxury-card p-8 max-w-4xl w-full mt-8"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
@ -102,14 +102,22 @@ export function TripCalculator({ vesselData, onOffsetClick }: Props) {
|
||||
ease: [0.22, 1, 0.36, 1]
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-800">Carbon Offset Calculator</h2>
|
||||
<motion.div
|
||||
initial={{ rotate: -10, opacity: 0 }}
|
||||
animate={{ rotate: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<motion.h2
|
||||
className="text-3xl font-bold heading-luxury"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<Route className="text-blue-500" size={24} />
|
||||
Premium Carbon Calculator
|
||||
</motion.h2>
|
||||
<motion.div
|
||||
className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center"
|
||||
initial={{ rotate: -10, opacity: 0, scale: 0.8 }}
|
||||
animate={{ rotate: 0, opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.3, type: "spring", stiffness: 300 }}
|
||||
>
|
||||
<Route className="text-white" size={20} />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
|
||||
184
src/index.css
184
src/index.css
@ -1,3 +1,187 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Custom CSS Variables for Luxury Yacht Club Theme */
|
||||
:root {
|
||||
--navy-deep: #0F172A;
|
||||
--ocean-blue: #1E40AF;
|
||||
--ocean-light: #3B82F6;
|
||||
--gold-accent: #F59E0B;
|
||||
--gold-light: #FCD34D;
|
||||
--gray-sophisticated: #64748B;
|
||||
--gray-light: #E2E8F0;
|
||||
--white-tinted: #F8FAFC;
|
||||
}
|
||||
|
||||
/* Global Styles */
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, var(--white-tinted) 0%, #E0F2FE 100%);
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
/* Custom Glassmorphism Classes */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
}
|
||||
|
||||
.glass-nav {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Premium Button Styles */
|
||||
.btn-premium {
|
||||
background: linear-gradient(135deg, var(--ocean-blue) 0%, var(--ocean-light) 100%);
|
||||
color: white;
|
||||
padding: 12px 32px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.025em;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4px 15px 0 rgba(30, 64, 175, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-premium::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn-premium:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-premium:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px 0 rgba(30, 64, 175, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: linear-gradient(135deg, var(--gold-accent) 0%, var(--gold-light) 100%);
|
||||
color: var(--navy-deep);
|
||||
padding: 12px 32px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.025em;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4px 15px 0 rgba(245, 158, 11, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px 0 rgba(245, 158, 11, 0.4);
|
||||
}
|
||||
|
||||
/* Custom Shadow Classes */
|
||||
.shadow-luxury {
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.shadow-premium {
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Wave Pattern Background */
|
||||
.wave-pattern {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='100' height='20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m0 10c20-10 20 10 40 0s20 10 40 0 20-10 20 0v10h-100z' fill='%23ffffff' fill-opacity='0.03'/%3e%3c/svg%3e");
|
||||
background-repeat: repeat-x;
|
||||
background-position: bottom;
|
||||
}
|
||||
|
||||
/* Premium Card Styles */
|
||||
.luxury-card {
|
||||
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.luxury-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--gold-accent), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.luxury-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.luxury-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.15);
|
||||
border-color: rgba(30, 64, 175, 0.2);
|
||||
}
|
||||
|
||||
/* Typography Enhancements */
|
||||
.heading-luxury {
|
||||
background: linear-gradient(135deg, var(--navy-deep) 0%, var(--ocean-blue) 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.text-gradient-gold {
|
||||
background: linear-gradient(135deg, var(--gold-accent) 0%, var(--gold-light) 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Parallax Container */
|
||||
.parallax-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--gray-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-light));
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(135deg, var(--navy-deep), var(--ocean-blue));
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user