agridrive / index.html
alphonse86's picture
Add 2 files
14f46fb verified
Raw
History Blame Contribute Delete
57.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AgriDrive Mobility | Built for Ethanol Economies</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
navy: '#001F3F',
ethanol: '#8BC34A',
accent: '#FF6B35',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
display: ['Space Grotesk', 'sans-serif'],
},
animation: {
'float': 'float 6s ease-in-out infinite',
'fade-in': 'fadeIn 1.5s ease-in-out',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' },
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
}
}
}
}
}
</script>
<style>
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.gradient-overlay {
background: linear-gradient(to right, rgba(0, 31, 63, 0.9) 0%, rgba(0, 31, 63, 0.7) 100%);
}
.tech-diagram {
transition: all 0.5s ease;
}
.tech-diagram:hover {
transform: scale(1.05);
}
.map-point {
position: absolute;
width: 12px;
height: 12px;
background-color: #8BC34A;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
70% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0.7;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
.stat-card {
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.scroll-indicator {
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
</style>
</head>
<body class="font-sans text-gray-800 bg-white">
<!-- Navigation -->
<nav class="fixed w-full bg-white shadow-md z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<span class="text-2xl font-bold text-navy">AGRI<span class="text-ethanol">DRIVE</span></span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="#problem" class="text-navy hover:text-accent px-3 py-2 text-sm font-medium">The Problem</a>
<a href="#solution" class="text-navy hover:text-accent px-3 py-2 text-sm font-medium">Our Solution</a>
<a href="#ethanol" class="text-navy hover:text-accent px-3 py-2 text-sm font-medium">Ethanol Advantage</a>
<a href="#why-now" class="text-navy hover:text-accent px-3 py-2 text-sm font-medium">Why Now</a>
<a href="#manufacturing" class="text-navy hover:text-accent px-3 py-2 text-sm font-medium">Manufacturing</a>
<a href="#investors" class="text-navy hover:text-accent px-3 py-2 text-sm font-medium">Investors</a>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-navy hover:text-accent focus:outline-none" aria-controls="mobile-menu" aria-expanded="false" onclick="toggleMobileMenu()">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="md:hidden hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white shadow-lg">
<a href="#problem" class="text-navy hover:text-accent block px-3 py-2 text-base font-medium">The Problem</a>
<a href="#solution" class="text-navy hover:text-accent block px-3 py-2 text-base font-medium">Our Solution</a>
<a href="#ethanol" class="text-navy hover:text-accent block px-3 py-2 text-base font-medium">Ethanol Advantage</a>
<a href="#why-now" class="text-navy hover:text-accent block px-3 py-2 text-base font-medium">Why Now</a>
<a href="#manufacturing" class="text-navy hover:text-accent block px-3 py-2 text-base font-medium">Manufacturing</a>
<a href="#investors" class="text-navy hover:text-accent block px-3 py-2 text-base font-medium">Investors</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 gradient-overlay"></div>
<div class="absolute inset-0 parallax" style="background-image: url('https://images.unsplash.com/photo-1581093196276-6357f3e7d3f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
<div class="relative z-10 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto text-center">
<h1 class="text-5xl md:text-7xl font-bold text-white font-display mb-6 animate-fade-in">
Built for <span class="text-ethanol">Ethanol Economies</span>
</h1>
<p class="text-xl md:text-2xl text-white max-w-3xl mx-auto mb-10">
American-made hybrid flex-fuel vehicles engineered for the world's agricultural superpowers.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#investors" class="bg-accent hover:bg-opacity-90 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
Request Investor Access
</a>
<a href="#solution" class="bg-transparent hover:bg-white hover:bg-opacity-20 text-white font-bold py-3 px-8 border-2 border-white rounded-full transition duration-300 transform hover:scale-105">
Explore the Platform
</a>
</div>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 scroll-indicator">
<a href="#problem" class="text-white animate-bounce">
<i class="fas fa-chevron-down text-2xl"></i>
</a>
</div>
</section>
<!-- The Problem Section -->
<section id="problem" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold text-navy font-display mb-4">
The Transportation Dilemma
</h2>
<div class="w-20 h-1 bg-accent mx-auto mb-6"></div>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
Many developing nations face impossible choices in transportation infrastructure.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
<div class="stat-card bg-white p-6 rounded-xl shadow-md border border-gray-100">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-bolt"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-2">Incomplete EV Infrastructure</h3>
<p class="text-gray-600">
Charging networks remain underdeveloped in most agricultural economies.
</p>
</div>
<div class="stat-card bg-white p-6 rounded-xl shadow-md border border-gray-100">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-gas-pump"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-2">Petroleum Dependence</h3>
<p class="text-gray-600">
Fuel imports create energy security vulnerabilities and trade deficits.
</p>
</div>
<div class="stat-card bg-white p-6 rounded-xl shadow-md border border-gray-100">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-battery-three-quarters"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-2">Battery Supply Chain Risks</h3>
<p class="text-gray-600">
Critical minerals remain concentrated in few countries, creating bottlenecks.
</p>
</div>
<div class="stat-card bg-white p-6 rounded-xl shadow-md border border-gray-100">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-tractor"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-2">Underutilized Agriculture</h3>
<p class="text-gray-600">
Farm surpluses could power transportation but currently go to waste.
</p>
</div>
</div>
<div class="bg-navy text-white p-8 rounded-xl">
<div class="max-w-4xl mx-auto">
<h3 class="text-2xl font-bold mb-4 font-display">Current transportation systems ignore one of the largest domestic energy resources many nations already possess:</h3>
<p class="text-3xl font-bold text-ethanol">Their farms.</p>
</div>
</div>
</div>
</section>
<!-- The Solution Section -->
<section id="solution" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold text-navy font-display mb-4">
The AgriDrive Solution
</h2>
<div class="w-20 h-1 bg-accent mx-auto mb-6"></div>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
A hybrid flex-fuel platform designed for agricultural economies.
</p>
</div>
<div class="flex flex-col lg:flex-row items-center gap-12 mb-16">
<div class="lg:w-1/2">
<img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1283&q=80" alt="AgriDrive Vehicle" class="rounded-xl shadow-xl w-full tech-diagram">
</div>
<div class="lg:w-1/2">
<h3 class="text-2xl font-bold text-navy mb-6 font-display">Technical Specifications</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 bg-ethanol bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-cogs text-ethanol text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-navy">Hybrid Electric Drivetrain</h4>
<p class="text-gray-600">Combines electric motor efficiency with flex-fuel engine flexibility.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-ethanol bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-leaf text-ethanol text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-navy">Ethanol-Optimized Engine</h4>
<p class="text-gray-600">Specifically tuned for high ethanol blends (E85-E100).</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-ethanol bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-exchange-alt text-ethanol text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-navy">Flex-Fuel Capability</h4>
<p class="text-gray-600">Automatically adjusts to any ethanol blend from E10 to E100.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-ethanol bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-bolt text-ethanol text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-navy">Regenerative Braking</h4>
<p class="text-gray-600">Recaptures energy during deceleration to charge the battery.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-ethanol bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-battery-quarter text-ethanol text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-navy">Smaller Battery Pack</h4>
<p class="text-gray-600">Reduces reliance on scarce minerals while maintaining efficiency.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-ethanol bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-sun text-ethanol text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-navy">Hot Climate Design</h4>
<p class="text-gray-600">Engineered for reliability in tropical and emerging market conditions.</p>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-xl shadow-md">
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="md:w-1/3 text-center">
<div class="inline-flex items-center justify-center bg-ethanol bg-opacity-10 w-20 h-20 rounded-full mb-4">
<i class="fas fa-chart-line text-3xl text-ethanol"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-2">40%</h3>
<p class="text-gray-600">Reduction in CO2 emissions compared to gasoline</p>
</div>
<div class="md:w-1/3 text-center">
<div class="inline-flex items-center justify-center bg-ethanol bg-opacity-10 w-20 h-20 rounded-full mb-4">
<i class="fas fa-gas-pump text-3xl text-ethanol"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-2">E10-E100</h3>
<p class="text-gray-600">Compatible with any ethanol blend</p>
</div>
<div class="md:w-1/3 text-center">
<div class="inline-flex items-center justify-center bg-ethanol bg-opacity-10 w-20 h-20 rounded-full mb-4">
<i class="fas fa-road text-3xl text-ethanol"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-2">600+ miles</h3>
<p class="text-gray-600">Total range with hybrid system</p>
</div>
</div>
</div>
</div>
</section>
<!-- Ethanol Is Local Energy Section -->
<section id="ethanol" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold text-navy font-display mb-4">
Ethanol Is <span class="text-ethanol">Local Energy</span>
</h2>
<div class="w-20 h-1 bg-accent mx-auto mb-6"></div>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
Every agricultural economy has different feedstocks. AgriDrive is designed to utilize local production.
</p>
</div>
<div class="relative mb-16">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/World_map_blank_without_borders.svg/1200px-World_map_blank_without_borders.svg.png" alt="World Map" class="w-full h-auto">
<!-- Map markers -->
<div class="map-point" style="top: 65%; left: 30%;"></div>
<div class="map-point" style="top: 50%; left: 75%;"></div>
<div class="map-point" style="top: 45%; left: 85%;"></div>
<div class="map-point" style="top: 40%; left: 82%;"></div>
<div class="map-point" style="top: 35%; left: 25%;"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-50 p-6 rounded-xl">
<h3 class="text-xl font-bold text-navy mb-4 flex items-center">
<span class="w-4 h-4 bg-ethanol rounded-full mr-2"></span>
Brazil
</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-ethanol mr-2 mt-1"></i>
<span>Sugarcane ethanol production</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-ethanol mr-2 mt-1"></i>
<span>Soy-derived agricultural residues</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-ethanol mr-2 mt-1"></i>
<span>Existing ethanol infrastructure</span>
</li>
</ul>
</div>
<div class="bg-gray-50 p-6 rounded-xl">
<h3 class="text-xl font-bold text-navy mb-4 flex items-center">
<span class="w-4 h-4 bg-ethanol rounded-full mr-2"></span>
India
</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-ethanol mr-2 mt-1"></i>
<span>Sugarcane ethanol</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-ethanol mr-2 mt-1"></i>
<span>Molasses byproducts</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-ethanol mr-2 mt-1"></i>
<span>Agricultural waste conversion</span>
</li>
</ul>
</div>
<div class="bg-gray-50 p-6 rounded-xl">
<h3 class="text-xl font-bold text-navy mb-4 flex items-center">
<span class="w-4 h-4 bg-ethanol rounded-full mr-2"></span>
Southeast Asia
</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-ethanol mr-2 mt-1"></i>
<span>Cassava ethanol (Thailand)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-ethanol mr-2 mt-1"></i>
<span>Sugarcane (Philippines)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-ethanol mr-2 mt-1"></i>
<span>Agricultural biomass (Indonesia)</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Why Not EVs Alone Section -->
<section class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold text-navy font-display mb-4">
Why Not <span class="text-accent">EVs Alone</span>?
</h2>
<div class="w-20 h-1 bg-accent mx-auto mb-6"></div>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
EVs are excellent where infrastructure exists. Many export markets require different solutions.
</p>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-16">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-navy">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">
Factor
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">
Battery EVs
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">
AgriDrive Hybrid
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
Infrastructure Dependency
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
High - requires extensive charging network
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Low - works with existing fuel stations
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
Range Flexibility
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Limited by battery capacity
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Extended through hybrid system
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
Supply Chain Resilience
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Concentrated mineral sourcing
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Distributed agricultural feedstocks
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
Energy Source
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Grid electricity (varies by region)
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Local agricultural production
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
Climate Suitability
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Battery performance affected by heat
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Engineered for tropical conditions
</td>
</tr>
</tbody>
</table>
</div>
<div class="text-center max-w-3xl mx-auto">
<p class="text-lg text-gray-600 mb-6">
AgriDrive vehicles complement electrification by addressing markets where pure EVs face adoption barriers.
</p>
<p class="text-lg font-medium text-navy">
Not every country will electrify transportation the same way.
</p>
</div>
</div>
</section>
<!-- Why Now Section -->
<section id="why-now" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold text-navy font-display mb-4">
Why <span class="text-accent">Now</span>?
</h2>
<div class="w-20 h-1 bg-accent mx-auto mb-6"></div>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
Converging trends make hybrid ethanol vehicles increasingly strategic.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
<div class="bg-gray-50 p-8 rounded-xl">
<h3 class="text-2xl font-bold text-navy mb-6 font-display">Market Trends</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 bg-accent bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-chart-line text-accent text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-navy">Global Ethanol Mandates</h4>
<p class="text-gray-600">Over 60 countries now have ethanol blending requirements.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-accent bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-shield-alt text-accent text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-navy">Fuel Security Concerns</h4>
<p class="text-gray-600">Nations seek alternatives to imported petroleum.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-accent bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-battery-quarter text-accent text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-navy">Battery Material Constraints</h4>
<p class="text-gray-600">Lithium and nickel supply chains remain concentrated.</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 p-8 rounded-xl">
<h3 class="text-2xl font-bold text-navy mb-6 font-display">Policy Developments</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 bg-accent bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-tractor text-accent text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-navy">Agricultural Surplus Utilization</h4>
<p class="text-gray-600">Governments incentivize farm product energy conversion.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-accent bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-balance-scale text-accent text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-navy">California Flex-Fuel Legislation</h4>
<p class="text-gray-600">Recent bills modernize ethanol vehicle regulations.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-accent bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-globe-americas text-accent text-xl"></i>
</div>
<div>
<h4 class="text-lg font-bold text-navy">Export Market Demand</h4>
<p class="text-gray-600">Agricultural economies seek ethanol vehicle solutions.</p>
</div>
</div>
</div>
</div>
</div>
<div class="bg-navy text-white p-8 rounded-xl">
<div class="max-w-4xl mx-auto">
<div class="flex flex-col md:flex-row items-start gap-6">
<div class="md:w-1/4 text-center md:text-left">
<div class="inline-flex items-center justify-center bg-white bg-opacity-20 w-16 h-16 rounded-full mb-4">
<i class="fas fa-file-alt text-2xl"></i>
</div>
</div>
<div class="md:w-3/4">
<h3 class="text-2xl font-bold mb-4 font-display">California Leads Flex-Fuel Modernization</h3>
<p class="mb-4">
Recent legislative efforts in California demonstrate renewed policy interest in flex-fuel systems. Bills like AB 1553 create legal pathways for flex-fuel vehicle conversions and modernization of ethanol infrastructure.
</p>
<p>
This regulatory shift signals that fuel flexibility is returning to transportation policy discussions nationwide.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- American Manufacturing Section -->
<section id="manufacturing" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold text-navy font-display mb-4">
American <span class="text-accent">Dynamism</span>
</h2>
<div class="w-20 h-1 bg-accent mx-auto mb-6"></div>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
Built in America. Exported to the world.
</p>
</div>
<div class="flex flex-col lg:flex-row items-center gap-12 mb-16">
<div class="lg:w-1/2">
<div class="bg-white p-8 rounded-xl shadow-md mb-8">
<h3 class="text-2xl font-bold text-navy mb-6 font-display">Manufacturing Philosophy</h3>
<div class="space-y-4">
<p class="text-gray-600">
AgriDrive vehicles are designed and manufactured in the United States, leveraging American engineering talent and advanced manufacturing capabilities.
</p>
<p class="text-gray-600">
Our production facilities combine automation with skilled craftsmanship to deliver vehicles that meet global quality standards while supporting domestic jobs.
</p>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-white p-6 rounded-xl shadow-md text-center">
<div class="text-accent text-3xl mb-3">
<i class="fas fa-industry"></i>
</div>
<h4 class="text-lg font-bold text-navy">Midwest Production</h4>
<p class="text-sm text-gray-600">Heartland manufacturing facilities</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md text-center">
<div class="text-accent text-3xl mb-3">
<i class="fas fa-ship"></i>
</div>
<h4 class="text-lg font-bold text-navy">Export Focus</h4>
<p class="text-sm text-gray-600">Designed for global markets</p>
</div>
</div>
</div>
<div class="lg:w-1/2">
<img src="https://images.unsplash.com/photo-1513828583688-c52646db42da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="American Manufacturing" class="rounded-xl shadow-xl w-full h-auto">
</div>
</div>
<div class="bg-navy text-white p-8 rounded-xl">
<div class="max-w-4xl mx-auto text-center">
<h3 class="text-2xl md:text-3xl font-bold mb-6 font-display">A New Export Industry for American Manufacturing</h3>
<p class="text-lg mb-6">
AgriDrive represents an opportunity to build a new American export industry at the intersection of agriculture, energy, and advanced manufacturing.
</p>
<p class="text-lg">
Our vehicles create economic value across the supply chain—from farm to factory to foreign markets.
</p>
</div>
</div>
</div>
</section>
<!-- Market Opportunity Section -->
<section class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold text-navy font-display mb-4">
Market <span class="text-ethanol">Opportunity</span>
</h2>
<div class="w-20 h-1 bg-accent mx-auto mb-6"></div>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
Significant addressable market in ethanol-focused economies.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
<div class="bg-gray-50 p-6 rounded-xl">
<h3 class="text-xl font-bold text-navy mb-4">Total Addressable Market</h3>
<div class="h-48 bg-white rounded-lg mb-4 flex items-center justify-center">
<div class="w-full bg-ethanol bg-opacity-20 h-3/4 rounded-lg relative">
<div class="absolute bottom-0 left-0 right-0 text-center">
<span class="text-2xl font-bold text-navy">$85B</span>
</div>
</div>
</div>
<p class="text-sm text-gray-600">
Annual vehicle sales in target ethanol markets.
</p>
</div>
<div class="bg-gray-50 p-6 rounded-xl">
<h3 class="text-xl font-bold text-navy mb-4">Serviceable Available Market</h3>
<div class="h-48 bg-white rounded-lg mb-4 flex items-center justify-center">
<div class="w-3/4 bg-ethanol bg-opacity-40 h-3/4 rounded-lg relative">
<div class="absolute bottom-0 left-0 right-0 text-center">
<span class="text-2xl font-bold text-navy">$32B</span>
</div>
</div>
</div>
<p class="text-sm text-gray-600">
Hybrid flex-fuel segment in target markets.
</p>
</div>
<div class="bg-gray-50 p-6 rounded-xl">
<h3 class="text-xl font-bold text-navy mb-4">Serviceable Obtainable Market</h3>
<div class="h-48 bg-white rounded-lg mb-4 flex items-center justify-center">
<div class="w-1/2 bg-ethanol bg-opacity-60 h-3/4 rounded-lg relative">
<div class="absolute bottom-0 left-0 right-0 text-center">
<span class="text-2xl font-bold text-navy">$5.5B</span>
</div>
</div>
</div>
<p class="text-sm text-gray-600">
Projected annual sales at 5% market penetration.
</p>
</div>
</div>
<div class="mb-16">
<h3 class="text-2xl font-bold text-navy mb-6 text-center font-display">Target Export Markets</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-gray-50 p-4 rounded-lg text-center">
<div class="w-16 h-16 bg-ethanol bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fas fa-globe-americas text-ethanol text-2xl"></i>
</div>
<h4 class="font-bold text-navy">Brazil</h4>
<p class="text-sm text-gray-600">World's largest ethanol market</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg text-center">
<div class="w-16 h-16 bg-ethanol bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fas fa-globe-asia text-ethanol text-2xl"></i>
</div>
<h4 class="font-bold text-navy">India</h4>
<p class="text-sm text-gray-600">Expanding ethanol mandate</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg text-center">
<div class="w-16 h-16 bg-ethanol bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fas fa-globe-asia text-ethanol text-2xl"></i>
</div>
<h4 class="font-bold text-navy">Thailand</h4>
<p class="text-sm text-gray-600">Cassava ethanol leader</p>
</div>
<div class="bg-gray-50 p-4 rounded-lg text-center">
<div class="w-16 h-16 bg-ethanol bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fas fa-globe-americas text-ethanol text-2xl"></i>
</div>
<h4 class="font-bold text-navy">Colombia</h4>
<p class="text-sm text-gray-600">Sugarcane ethanol producer</p>
</div>
</div>
</div>
</div>
</section>
<!-- Investor CTA Section -->
<section id="investors" class="py-20 bg-navy text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold text-white font-display mb-4">
The Future of <span class="text-ethanol">Agricultural Mobility</span>
</h2>
<div class="w-20 h-1 bg-accent mx-auto mb-6"></div>
<p class="text-lg text-gray-300 max-w-3xl mx-auto">
A transportation platform aligned with local energy production.
</p>
</div>
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/2">
<div class="bg-white bg-opacity-10 p-8 rounded-xl">
<h3 class="text-2xl font-bold mb-6 font-display">Investor Access</h3>
<form class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium mb-1">Full Name</label>
<input type="text" id="name" class="w-full bg-white bg-opacity-10 border border-gray-300 border-opacity-20 rounded-md py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent">
</div>
<div>
<label for="organization" class="block text-sm font-medium mb-1">Organization</label>
<input type="text" id="organization" class="w-full bg-white bg-opacity-10 border border-gray-300 border-opacity-20 rounded-md py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent">
</div>
<div>
<label for="email" class="block text-sm font-medium mb-1">Email</label>
<input type="email" id="email" class="w-full bg-white bg-opacity-10 border border-gray-300 border-opacity-20 rounded-md py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent">
</div>
<div>
<label for="country" class="block text-sm font-medium mb-1">Country</label>
<select id="country" class="w-full bg-white bg-opacity-10 border border-gray-300 border-opacity-20 rounded-md py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent">
<option>United States</option>
<option>Brazil</option>
<option>India</option>
<option>Thailand</option>
<option>Other</option>
</select>
</div>
<div>
<button type="submit" class="w-full bg-accent hover:bg-opacity-90 text-white font-bold py-3 px-4 rounded-md transition duration-300">
Request Investor Materials
</button>
</div>
</form>
</div>
</div>
<div class="lg:w-1/2">
<div class="bg-white bg-opacity-10 p-8 rounded-xl h-full">
<h3 class="text-2xl font-bold mb-6 font-display">Investment Highlights</h3>
<ul class="space-y-6">
<li class="flex items-start">
<div class="flex-shrink-0 bg-ethanol bg-opacity-20 p-2 rounded-full mr-4">
<i class="fas fa-check text-ethanol"></i>
</div>
<div>
<h4 class="text-lg font-bold">First-Mover Advantage</h4>
<p class="text-gray-300">Only American manufacturer focused exclusively on export ethanol hybrid vehicles.</p>
</div>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 bg-ethanol bg-opacity-20 p-2 rounded-full mr-4">
<i class="fas fa-check text-ethanol"></i>
</div>
<div>
<h4 class="text-lg font-bold">Policy Tailwinds</h4>
<p class="text-gray-300">Global ethanol mandates create regulatory advantages.</p>
</div>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 bg-ethanol bg-opacity-20 p-2 rounded-full mr-4">
<i class="fas fa-check text-ethanol"></i>
</div>
<div>
<h4 class="text-lg font-bold">Supply Chain Resilience</h4>
<p class="text-gray-300">Agricultural feedstocks are more distributed than battery minerals.</p>
</div>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 bg-ethanol bg-opacity-20 p-2 rounded-full mr-4">
<i class="fas fa-check text-ethanol"></i>
</div>
<div>
<h4 class="text-lg font-bold">American Manufacturing</h4>
<p class="text-gray-300">Leverages U.S. engineering and production capabilities for export growth.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-navy text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<h3 class="text-xl font-bold mb-4 font-display">AGRI<span class="text-ethanol">DRIVE</span></h3>
<p class="text-gray-300 mb-4">
Transforming agricultural abundance into transportation independence.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-300 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-4 font-display">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-300 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Team</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Manufacturing</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4 font-display">Investors</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-300 hover:text-white">Investor Relations</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Financials</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Presentations</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Contact IR</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4 font-display">Markets</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-300 hover:text-white">Brazil</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">India</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Southeast Asia</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Latin America</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm mb-4 md:mb-0">
&copy; 2023 AgriDrive Mobility. All rights reserved.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</a>
</div>
</div>
</div>
</div>
</footer>
<script>
// Toggle mobile menu
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
}
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu');
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
// Simple animation on scroll
function animateOnScroll() {
const elements = document.querySelectorAll('.stat-card, .tech-diagram');
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.3;
if (elementPosition < screenPosition) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
}
// Set initial state for animated elements
document.querySelectorAll('.stat-card, .tech-diagram').forEach(element => {
element.style.opacity = '0';
element.style.transform = 'translateY(20px)';
element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
});
// Add scroll event listener
window.addEventListener('scroll', animateOnScroll);
// Trigger once on load
window.addEventListener('load', animateOnScroll);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alphonse86/agridrive" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>