Initial commit: Complete Pennyzo Frontend with waitlist form implementation
- Added React TypeScript frontend with Vite build system - Implemented luxury-themed UI with custom Tailwind colors - Created comprehensive waitlist form with conditional logic: * Personal information (name, email) * Company details (name, type, GST registration) * Conditional CIN/PAN fields based on company type and GST status * Industry selection and goals questionnaire - Added form validation and error handling - Integrated waitlist form with hero section and live counter - Implemented responsive design with elegant animations - Added proper gitignore for frontend project
This commit is contained in:
139
src/components/HeroSection.tsx
Normal file
139
src/components/HeroSection.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import ExclusiveLaunchPopup from './ExclusiveLaunchPopup';
|
||||
|
||||
interface HeroSectionProps {
|
||||
onJoinWaitlist: () => void;
|
||||
}
|
||||
|
||||
const HeroSection: React.FC<HeroSectionProps> = ({ onJoinWaitlist }) => {
|
||||
const [remainingSpots, setRemainingSpots] = useState(892);
|
||||
|
||||
// Simulate live counter decreasing
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setRemainingSpots(prev => {
|
||||
if (prev <= 0) return 0;
|
||||
const shouldDecrease = Math.random() < 0.08;
|
||||
if (shouldDecrease) {
|
||||
const decrease = Math.floor(Math.random() * 2) + 1;
|
||||
return Math.max(0, prev - decrease);
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
}, 3000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="relative min-h-screen overflow-hidden">
|
||||
<ExclusiveLaunchPopup remainingSpots={remainingSpots} onJoinWaitlist={onJoinWaitlist} />
|
||||
|
||||
<div className="relative z-10 container mx-auto px-6 py-16">
|
||||
{/* Main Hero Content */}
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between min-h-[calc(100vh-200px)] gap-16">
|
||||
{/* Left Content */}
|
||||
<div className="flex-1 text-center lg:text-left">
|
||||
<div className="mb-8">
|
||||
<h1 className="font-luxury-serif font-extralight text-6xl md:text-7xl lg:text-8xl xl:text-9xl leading-none mb-6">
|
||||
<span className="block text-luxury-gold tracking-tight">The Future</span>
|
||||
<span className="block text-cream/90 tracking-tight">of Business</span>
|
||||
<span className="block text-luxury-gold tracking-tight">Excellence</span>
|
||||
</h1>
|
||||
|
||||
<div className="w-24 h-px bg-gradient-to-r from-luxury-gold to-transparent mb-8"></div>
|
||||
|
||||
<p className="text-cream/80 font-elegant-sans text-xl md:text-2xl lg:text-3xl font-light leading-relaxed max-w-2xl">
|
||||
Where sophistication meets innovation in
|
||||
<span className="text-luxury-gold font-medium"> enterprise management</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Elegant CTA Section */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-center lg:items-start lg:justify-start justify-center">
|
||||
<button
|
||||
onClick={onJoinWaitlist}
|
||||
className="group relative bg-luxury-gold hover:bg-luxury-gold/90 text-deep-forest font-elegant-sans font-semibold text-lg px-12 py-4 rounded-none border-0 transition-all duration-500 overflow-hidden min-w-[220px]"
|
||||
>
|
||||
<span className="relative z-10">Join the Waitlist</span>
|
||||
<div className="absolute inset-0 bg-cream transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></div>
|
||||
</button>
|
||||
|
||||
<button className="group border border-luxury-gold/50 text-luxury-gold hover:bg-luxury-gold/10 font-elegant-sans font-medium text-lg px-12 py-4 rounded-none transition-all duration-300 min-w-[220px]">
|
||||
<span className="group-hover:tracking-wider transition-all duration-300">Explore Platform</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center lg:justify-start space-x-6">
|
||||
<div className="text-center">
|
||||
<div className="text-luxury-gold font-luxury-serif text-2xl font-bold">500+</div>
|
||||
<div className="text-cream/60 font-elegant-sans text-xs uppercase tracking-widest">Enterprises</div>
|
||||
</div>
|
||||
<div className="w-px h-8 bg-luxury-gold/30"></div>
|
||||
<div className="text-center">
|
||||
<div className="text-luxury-gold font-luxury-serif text-2xl font-bold">99.9%</div>
|
||||
<div className="text-cream/60 font-elegant-sans text-xs uppercase tracking-widest">Uptime</div>
|
||||
</div>
|
||||
<div className="w-px h-8 bg-luxury-gold/30"></div>
|
||||
<div className="text-center">
|
||||
<div className="text-luxury-gold font-luxury-serif text-2xl font-bold">24/7</div>
|
||||
<div className="text-cream/60 font-elegant-sans text-xs uppercase tracking-widest">Support</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Premium Visual */}
|
||||
<div className="flex-1 relative">
|
||||
<div className="relative max-w-lg mx-auto">
|
||||
{/* Main Card */}
|
||||
<div className="relative bg-gradient-to-br from-deep-forest/40 to-rich-brown/20 backdrop-blur-2xl border border-luxury-gold/20 rounded-3xl p-12 shadow-2xl">
|
||||
<div className="text-center space-y-4">
|
||||
{/* Premium Icon */}
|
||||
{/* <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-luxury-gold/20 to-luxury-gold/10 rounded-2xl border border-luxury-gold/30"> */}
|
||||
<img
|
||||
src="/assets/Dark-Icon-cropped.svg"
|
||||
alt="Pennyzo Icon"
|
||||
className="w-60 h-60 mx-auto"
|
||||
/>
|
||||
{/* </div> */}
|
||||
|
||||
{/* Premium Text */}
|
||||
<div>
|
||||
<h3 className="text-luxury-gold font-luxury-serif text-3xl font-bold mb-4">
|
||||
Executive Suite
|
||||
</h3>
|
||||
<p className="text-cream/70 font-elegant-sans text-base leading-relaxed">
|
||||
Experience the pinnacle of business management with our meticulously crafted platform designed for visionary leaders.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Features List */}
|
||||
<div className="space-y-3 text-left">
|
||||
{['Advanced Analytics Dashboard', 'AI-Powered Insights', 'White-Glove Support'].map((feature, index) => (
|
||||
<div key={index} className="flex items-center space-x-3">
|
||||
<div className="w-2 h-2 bg-luxury-gold rounded-full"></div>
|
||||
<span className="text-cream/80 font-elegant-sans text-sm">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Elegant Scroll Indicator */}
|
||||
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
|
||||
<div className="flex flex-col items-center space-y-2">
|
||||
<div className="text-cream/40 font-elegant-sans text-xs uppercase tracking-widest">Explore</div>
|
||||
<div className="w-px h-16 bg-gradient-to-b from-luxury-gold/50 to-transparent animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
Reference in New Issue
Block a user