import React, { useState, useEffect } from 'react'; import { Fuel, CreditCard, ShieldCheck, TrendingDown, ChevronRight, CheckCircle2, AlertCircle, Clock, MapPin } from 'lucide-react'; const App = () => { const [email, setEmail] = useState(''); const [name, setName] = useState(''); const [submitted, setSubmitted] = useState(false); const [gallonsPerMonth, setGallonsPerMonth] = useState(50); const [loading, setLoading] = useState(false); const [isGenerating, setIsGenerating] = useState(false); const [cardImageUrl, setCardImageUrl] = useState(''); const apiKey = ""; // Logo Source Path const logoSrc = "pilot_transparent.png"; // Generate the custom credit card image on component mount useEffect(() => { const generateCardImage = async () => { setIsGenerating(true); const prompt = "A premium black matte metal credit card centered on a clean background. The card has a gold EMV chip on the left. The word 'Pilot' is written in a clean, bold, sans-serif white font similar to the Uber logo style. Card numbers '1234 5678 9012 3456' and the name 'Jane Cardholder' are embossed in silver. A small white VISA logo is in the bottom right corner. Hyper-realistic, 8k resolution, cinematic lighting, sharp focus."; try { const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/imagen-4.0-generate-001:predict?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ instances: [{ prompt }], parameters: { sampleCount: 1 } }) }); if (response.ok) { const result = await response.json(); if (result.predictions && result.predictions[0]) { setCardImageUrl(`data:image/png;base64,${result.predictions[0].bytesBase64Encoded}`); } } } catch (error) { console.error("Error generating card image:", error); } finally { setIsGenerating(false); } }; generateCardImage(); }, []); const handleSubmit = (e) => { e.preventDefault(); setLoading(true); setTimeout(() => { setLoading(false); setSubmitted(true); }, 1200); }; const yearlySavings = (gallonsPerMonth * 0.20 * 12).toFixed(2); return (
{/* Navigation */}
{/* Hero Section */}
{/* Savings Calculator Section */}
Calculate Your Rewards
See how much you'll keep in your pocket every single year.
Monthly Savings
${(gallonsPerMonth * 0.20).toFixed(2)}
Annual Savings
${yearlySavings}
{/* How it Works */}
Every Station, Everywhere
Shell, Exxon, BP, or the local corner store. If it sells fuel in the US, your discount applies automatically.
20¢ Flat Discount
No complicated tiers or rotating categories. Just a pure, high-value discount on every single gallon you pump.
One Simple Rule
Spend $1,000 on non-fuel purchases (groceries, dining, bills) each month to unlock your gas discount.
{/* Lead Capture Form */}
{!submitted ? (
Secure Your Spot
Enter your details to join the priority waitlist. We're launching to the first 5,000 users soon.
Your data is secure and never sold
) : (
You're on the list!
Thanks, {name.split(' ')[0]}. We've sent a confirmation to {email}. We'll reach out when your spot is ready.
)}
{/* Footer */}