Spaces:

ghost325
/

oil-2

Running

App Files Files Community

ghost325 commited on Apr 29

Commit

57d33d9

verified ·

1 Parent(s): bea7b3b

Add 2 files

Browse files

Files changed (1) hide show

index.html +38 -671

index.html CHANGED Viewed

@@ -1,674 +1,41 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PetroConnect - Emerging Fuel Distribution Partner</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">
     <style>
-        .gradient-bg {
-            background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
-        }
-        .slide {
-            display: none;
-            animation: fadeIn 0.5s ease-in-out;
-        }
-        .slide.active {
-            display: block;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .progress-bar {
-            height: 6px;
-            transition: width 0.3s ease;
-        }
-        .feature-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-        }
-        .partner-logo {
-            filter: grayscale(100%) brightness(0) invert(1);
-            opacity: 0.7;
-            transition: all 0.3s ease;
-        }
-        .partner-logo:hover {
-            filter: none;
-            opacity: 1;
-        }
-        .hass-blue {
-            background-color: #0056b3;
-        }
-        .hass-yellow {
-            background-color: #ffd700;
-        }
-        .tagline {
-            font-family: 'Arial', sans-serif;
-            letter-spacing: 1px;
-        }
-        .md-signature {
-            font-family: 'Georgia', serif;
-            font-style: italic;
-        }
     </style>
-</head>
-<body class="font-sans bg-gray-50">
-    <!-- Navigation -->
-    <nav class="gradient-bg text-white shadow-lg">
-        <div class="container mx-auto px-6 py-4">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center">
-                    <i class="fas fa-gas-pump text-2xl mr-3"></i>
-                    <span class="font-bold text-xl">PetroConnect</span>
-                </div>
-                <div class="hidden md:flex space-x-8">
-                    <a href="#" class="nav-link" data-slide="0">Home</a>
-                    <a href="#" class="nav-link" data-slide="1">Plan</a>
-                    <a href="#" class="nav-link" data-slide="2">Market</a>
-                    <a href="#" class="nav-link" data-slide="3">Operations</a>
-                    <a href="#" class="nav-link" data-slide="4">Financials</a>
-                </div>
-                <button class="md:hidden focus:outline-none" id="menu-toggle">
-                    <i class="fas fa-bars text-2xl"></i>
-                </button>
-            </div>
-        </div>
-        <!-- Mobile menu -->
-        <div class="md:hidden hidden px-6 py-2 bg-blue-900" id="mobile-menu">
-            <a href="#" class="block py-2 nav-link" data-slide="0">Home</a>
-            <a href="#" class="block py-2 nav-link" data-slide="1">Business Plan</a>
-            <a href="#" class="block py-2 nav-link" data-slide="2">Market Analysis</a>
-            <a href="#" class="block py-2 nav-link" data-slide="3">Operations</a>
-            <a href="#" class="block py-2 nav-link" data-slide="4">Financial Projections</a>
-        </div>
-    </nav>
-    <!-- Progress bar -->
-    <div class="h-1.5 bg-gray-200">
-        <div class="progress-bar bg-blue-600 w-0" id="progress-bar"></div>
-    </div>
-    <!-- Slides container -->
-    <div class="relative overflow-hidden">
-        <!-- Slide 0: Cover -->
-        <div class="slide active min-h-screen gradient-bg text-white">
-            <div class="container mx-auto px-6 py-20 md:py-32 flex flex-col items-center justify-center text-center">
-                <h1 class="text-4xl md:text-5xl font-bold mb-6">Fueling Connections.<br>Powering Progress.</h1>
-                <p class="text-xl md:text-2xl mb-10 max-w-3xl">Emerging petroleum distribution partner with strategic alliance to Hass Petroleum</p>
-                <!-- Partner logos -->
-                <div class="my-10">
-                    <h3 class="text-lg font-medium mb-6 text-blue-200">Exclusive Partnership With:</h3>
-                    <div class="flex justify-center items-center">
-                        <div class="hass-blue p-4 rounded-lg flex items-center">
-                            <img src="https://hasspetroleum.com/wp-content/uploads/2021/11/Hass-Logo-White.png" class="h-14 md:h-20" alt="Hass Petroleum">
-                        </div>
-                    </div>
-                    <p class="mt-6 text-blue-200">Official distribution partner since 2023</p>
-                </div>
-                <div class="flex flex-wrap justify-center gap-4">
-                    <button class="bg-white text-blue-800 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300 shadow-lg">
-                        Explore Partnership <i class="fas fa-arrow-right ml-2"></i>
-                    </button>
-                    <button class="border-2 border-white text-white px-8 py-3 rounded-full font-bold hover:bg-blue-700 transition duration-300">
-                        Download Profile <i class="fas fa-download ml-2"></i>
-                    </button>
-                </div>
-                <!-- MD Signature -->
-                <div class="mt-16 border-t border-blue-400 pt-6 w-full max-w-md">
-                    <div class="flex flex-col items-center">
-                        <img src="https://randomuser.me/api/portraits/men/42.jpg" class="w-16 h-16 rounded-full mb-3 border-2 border-white" alt="Mohamed Amin Jabane">
-                        <p class="font-medium">Mohamed Amin Jabane</p>
-                        <p class="text-blue-200 text-sm">Managing Director</p>
-                        <div class="mt-2 flex items-center">
-                            <i class="fas fa-phone-alt mr-2 text-blue-300"></i>
-                            <span>0716 331 902</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="mt-8 animate-bounce">
-                    <i class="fas fa-chevron-down text-2xl"></i>
-                </div>
-            </div>
-        </div>
-        <!-- Slide 1: Business Plan Overview -->
-        <div class="slide min-h-screen py-20">
-            <div class="container mx-auto px-6">
-                <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-blue-900">Strategic Growth Plan</h2>
-                <div class="grid md:grid-cols-2 gap-10 mb-16">
-                    <div>
-                        <h3 class="text-2xl font-semibold mb-4 text-blue-800">Executive Summary</h3>
-                        <p class="text-gray-700 mb-6">PetroConnect is an ambitious fuel distribution startup operating under the Hass Petroleum brand, specializing in efficient last-mile delivery to independent retailers and commercial fleets in our target regions.</p>
-                        <div class="bg-blue-50 p-6 rounded-lg border-l-4 border-blue-500 mb-6">
-                            <h4 class="font-bold text-blue-800 mb-2">Strategic Positioning</h4>
-                            <ul class="list-disc pl-5 space-y-2 text-gray-700">
-                                <li>Exclusive regional distributor for Hass Petroleum products</li>
-                                <li>Focus on underserved retail markets with growth potential</li>
-                                <li>Asset-light model with phased fleet expansion</li>
-                                <li>Technology-driven operations from day one</li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-200">
-                        <h3 class="text-2xl font-semibold mb-6 text-blue-800">Growth Roadmap</h3>
-                        <div class="space-y-6">
-                            <div>
-                                <div class="flex items-center mb-2">
-                                    <div class="w-8 h-8 rounded-full hass-blue flex items-center justify-center mr-3 text-white">
-                                        <i class="fas fa-map-marked-alt"></i>
-                                    </div>
-                                    <h4 class="font-semibold text-gray-800">Phase 1 (2023-24)</h4>
-                                </div>
-                                <p class="text-gray-600 pl-11">Establish operations in 3 key districts with 5 trucks, targeting 50 retail stations</p>
-                            </div>
-                            <div>
-                                <div class="flex items-center mb-2">
-                                    <div class="w-8 h-8 rounded-full hass-blue flex items-center justify-center mr-3 text-white">
-                                        <i class="fas fa-expand"></i>
-                                    </div>
-                                    <h4 class="font-semibold text-gray-800">Phase 2 (2024-25)</h4>
-                                </div>
-                                <p class="text-gray-600 pl-11">Expand to 2 additional regions, growing fleet to 12 trucks serving 120+ stations</p>
-                            </div>
-                            <div>
-                                <div class="flex items-center mb-2">
-                                    <div class="w-8 h-8 rounded-full hass-blue flex items-center justify-center mr-3 text-white">
-                                        <i class="fas fa-rocket"></i>
-                                    </div>
-                                    <h4 class="font-semibold text-gray-800">Phase 3 (2025+)</h4>
-                                </div>
-                                <p class="text-gray-600 pl-11">Evaluate additional brand partnerships and geographic expansion opportunities</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-hass-blue text-white p-8 rounded-xl">
-                    <h3 class="text-2xl font-semibold mb-4">2024 Key Targets</h3>
-                    <div class="grid md:grid-cols-3 gap-6">
-                        <div class="bg-blue-800 p-4 rounded-lg">
-                            <div class="text-4xl font-bold mb-2">50+</div>
-                            <p>Retail stations under contract</p>
-                        </div>
-                        <div class="bg-blue-800 p-4 rounded-lg">
-                            <div class="text-4xl font-bold mb-2">5M+</div>
-                            <p>Liters monthly distribution volume</p>
-                        </div>
-                        <div class="bg-blue-800 p-4 rounded-lg">
-                            <div class="text-4xl font-bold mb-2">95%</div>
-                            <p>On-time delivery target</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Slide 2: Market Analysis -->
-        <div class="slide min-h-screen py-20 bg-gray-100">
-            <div class="container mx-auto px-6">
-                <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-blue-900">Retail Market Opportunity</h2>
-                <div class="grid md:grid-cols-2 gap-10 mb-12">
-                    <div class="bg-white p-8 rounded-xl shadow">
-                        <h3 class="text-2xl font-semibold mb-6 text-blue-800">Market Insights</h3>
-                        <p class="text-gray-700 mb-4">The East African fuel retail market is growing at 6.2% CAGR (2023-28), with independent retailers representing 42% of outlets but receiving less reliable supply than branded stations.</p>
-                        <ul class="list-disc pl-5 space-y-2 text-gray-700 mb-6">
-                            <li>Average station throughput: 120,000 liters/month</li>
-                            <li>Delivery lead times often exceed 48 hours for independents</li>
-                            <li>45% of retailers would switch for better reliability</li>
-                            <li>Hass Petroleum has 12% market share in our target regions</li>
-                        </ul>
-                        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
-                            <p class="text-yellow-800 font-medium">Opportunity: Capture 15% of independent retailer market in our operational areas within 18 months.</p>
-                        </div>
-                    </div>
-                    <div>
-                        <h3 class="text-2xl font-semibold mb-6 text-blue-800">Target Retail Segments</h3>
-                        <div class="space-y-6">
-                            <div class="flex items-start">
-                                <div class="hass-blue p-3 rounded-full mr-4 text-white">
-                                    <i class="fas fa-store"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-semibold text-gray-800">Independent Fuel Stations</h4>
-                                    <p class="text-gray-600">2-4 pump locations in urban and peri-urban areas</p>
-                                </div>
-                            </div>
-                            <div class="flex items-start">
-                                <div class="hass-blue p-3 rounded-full mr-4 text-white">
-                                    <i class="fas fa-industry"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-semibold text-gray-800">Commercial Consumers</h4>
-                                    <p class="text-gray-600">Construction companies, transport fleets with 5,000+ liter weekly needs</p>
-                                </div>
-                            </div>
-                            <div class="flex items-start">
-                                <div class="hass-blue p-3 rounded-full mr-4 text-white">
-                                    <i class="fas fa-hotel"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-semibold text-gray-800">Hospitality Sector</h4>
-                                    <p class="text-gray-600">Hotels and resorts with backup generator fuel requirements</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="mt-8 bg-white p-6 rounded-lg shadow">
-                            <h4 class="font-bold text-blue-800 mb-3">Competitive Advantage</h4>
-                            <div class="flex items-center mb-3">
-                                <div class="w-3 h-3 rounded-full hass-blue mr-2"></div>
-                                <span class="text-gray-700">24-hour delivery guarantee for priority customers</span>
-                            </div>
-                            <div class="flex items-center mb-3">
-                                <div class="w-3 h-3 rounded-full hass-blue mr-2"></div>
-                                <span class="text-gray-700">Hass brand credibility with local market knowledge</span>
-                            </div>
-                            <div class="flex items-center">
-                                <div class="w-3 h-3 rounded-full hass-blue mr-2"></div>
-                                <span class="text-gray-700">Mobile app for real-time order tracking</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-white p-8 rounded-xl shadow-lg">
-                    <h3 class="text-2xl font-semibold mb-6 text-blue-800">Customer Acquisition Strategy</h3>
-                    <div class="grid md:grid-cols-3 gap-6">
-                        <div class="feature-card p-6 border border-gray-200 rounded-lg transition duration-300">
-                            <div class="hass-blue text-white text-2xl w-12 h-12 flex items-center justify-center rounded-full mb-4 mx-auto">
-                                <i class="fas fa-percentage"></i>
-                            </div>
-                            <h4 class="font-bold text-lg mb-2 text-center">Volume Incentives</h4>
-                            <p class="text-gray-600 text-center">Tiered pricing with 2-5% discounts for stations exceeding 100,000 liters/month</p>
-                        </div>
-                        <div class="feature-card p-6 border border-gray-200 rounded-lg transition duration-300">
-                            <div class="hass-blue text-white text-2xl w-12 h-12 flex items-center justify-center rounded-full mb-4 mx-auto">
-                                <i class="fas fa-clock"></i>
-                            </div>
-                            <h4 class="font-bold text-lg mb-2 text-center">Reliability Promise</h4>
-                            <p class="text-gray-600 text-center">Delivery time SLA with rebates for late deliveries</p>
-                        </div>
-                        <div class="feature-card p-6 border border-gray-200 rounded-lg transition duration-300">
-                            <div class="hass-blue text-white text-2xl w-12 h-12 flex items-center justify-center rounded-full mb-4 mx-auto">
-                                <i class="fas fa-mobile-alt"></i>
-                            </div>
-                            <h4 class="font-bold text-lg mb-2 text-center">Digital Platform</h4>
-                            <p class="text-gray-600 text-center">Inventory management app with predictive ordering</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Slide 3: Operations Plan -->
-        <div class="slide min-h-screen py-20">
-            <div class="container mx-auto px-6">
-                <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-blue-900">Lean Operations</h2>
-                <div class="grid md:grid-cols-2 gap-10 mb-12">
-                    <div>
-                        <h3 class="text-2xl font-semibold mb-6 text-blue-800">Strategic Sourcing</h3>
-                        <div class="mb-8">
-                            <h4 class="font-bold text-gray-800 mb-3 flex items-center">
-                                <span class="w-8 h-8 hass-blue rounded-full flex items-center justify-center mr-3 text-white">1</span>
-                                Hass Terminal Access
-                            </h4>
-                            <p class="text-gray-700 pl-11">Priority loading at Hass Petroleum's Nairobi terminal with 72-hour inventory visibility. Night loading privileges to maximize daily delivery cycles.</p>
-                        </div>
-                        <div class="mb-8">
-                            <h4 class="font-bold text-gray-800 mb-3 flex items-center">
-                                <span class="w-8 h-8 hass-blue rounded-full flex items-center justify-center mr-3 text-white">2</span>
-                                Quality Assurance
-                            </h4>
-                            <p class="text-gray-700 pl-11">Automated tank monitoring during transit. Digital certificates of quality with each delivery. Monthly joint quality audits with Hass technicians.</p>
-                        </div>
-                        <div class="mb-8">
-                            <h4 class="font-bold text-gray-800 mb-3 flex items-center">
-                                <span class="w-8 h-8 hass-blue rounded-full flex items-center justify-center mr-3 text-white">3</span>
-                                Fleet Strategy
-                            </h4>
-                            <p class="text-gray-700 pl-11">Start with 3 owned trucks (24,000L capacity each) and 2 contracted vehicles. Phase in 2 additional trucks by Q3 2024 based on route density.</p>
-                        </div>
-                    </div>
-                    <div class="bg-blue-50 p-8 rounded-xl">
-                        <h3 class="text-2xl font-semibold mb-6 text-blue-800">Technology Stack</h3>
-                        <div class="flex items-start mb-6">
-                            <div class="hass-blue p-3 rounded-full mr-4 text-white">
-                                <i class="fas fa-route"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-semibold text-gray-800">Dynamic Routing</h4>
-                                <p class="text-gray-600">AI-powered routing software that reduces empty miles by 15-20% versus manual planning</p>
-                            </div>
-                        </div>
-                        <div class="flex items-start mb-6">
-                            <div class="hass-blue p-3 rounded-full mr-4 text-white">
-                                <i class="fas fa-tablet-alt"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-semibold text-gray-800">Driver Tablets</h4>
-                                <p class="text-gray-600">4G-enabled devices with real-time navigation, electronic POD, and compliance checklists</p>
-                            </div>
-                        </div>
-                        <div class="flex items-start">
-                            <div class="hass-blue p-3 rounded-full mr-4 text-white">
-                                <i class="fas fa-chart-bar"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-semibold text-gray-800">Retailer Portal</h4>
-                                <p class="text-gray-600">Web-based dashboard showing inventory levels, delivery history, and account analytics</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-white p-8 rounded-xl shadow-lg">
-                    <h3 class="text-2xl font-semibold mb-6 text-blue-800">Key Performance Metrics</h3>
-                    <div class="grid md:grid-cols-3 gap-6">
-                        <div class="p-5 border border-gray-200 rounded-lg text-center">
-                            <div class="hass-blue text-white text-3xl w-16 h-16 flex items-center justify-center rounded-full mb-3 mx-auto">
-                                <i class="fas fa-truck"></i>
-                            </div>
-                            <h4 class="font-bold mb-2">Truck Utilization</h4>
-                            <p class="text-gray-600 text-sm">Target: 85%+ (5 deliveries/truck/day)</p>
-                        </div>
-                        <div class="p-5 border border-gray-200 rounded-lg text-center">
-                            <div class="hass-blue text-white text-3xl w-16 h-16 flex items-center justify-center rounded-full mb-3 mx-auto">
-                                <i class="fas fa-stopwatch"></i>
-                            </div>
-                            <h4 class="font-bold mb-2">Delivery Time</h4>
-                            <p class="text-gray-600 text-sm">Target: <24 hours for 90% of orders</p>
-                        </div>
-                        <div class="p-5 border border-gray-200 rounded-lg text-center">
-                            <div class="hass-blue text-white text-3xl w-16 h-16 flex items-center justify-center rounded-full mb-3 mx-auto">
-                                <i class="fas fa-sync-alt"></i>
-                            </div>
-                            <h4 class="font-bold mb-2">Retention Rate</h4>
-                            <p class="text-gray-600 text-sm">Target: 80%+ customer retention quarterly</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Slide 4: Financial Projections -->
-        <div class="slide min-h-screen py-20 bg-gray-100">
-            <div class="container mx-auto px-6">
-                <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-blue-900">Financial Roadmap</h2>
-                <div class="grid md:grid-cols-2 gap-10 mb-12">
-                    <div>
-                        <h3 class="text-2xl font-semibold mb-6 text-blue-800">Startup Requirements</h3>
-                        <div class="bg-white p-6 rounded-lg shadow mb-6">
-                            <h4 class="font-bold text-gray-800 mb-4">Initial Capital (KES)</h4>
-                            <div class="space-y-3">
-                                <div class="flex justify-between border-b pb-2">
-                                    <span>2 Fuel Trucks (24,000L)</span>
-                                    <span class="font-semibold">18,000,000</span>
-                                </div>
-                                <div class="flex justify-between border-b pb-2">
-                                    <span>Operating Capital</span>
-                                    <span class="font-semibold">5,000,000</span>
-                                </div>
-                                <div class="flex justify-between border-b pb-2">
-                                    <span>Technology Systems</span>
-                                    <span class="font-semibold">1,200,000</span>
-                                </div>
-                                <div class="flex justify-between border-b pb-2">
-                                    <span>Working Capital</span>
-                                    <span class="font-semibold">3,500,000</span>
-                                </div>
-                                <div class="flex justify-between pt-2 font-bold text-lg">
-                                    <span>Total</span>
-                                    <span>27,700,000</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="bg-blue-50 p-6 rounded-lg border-l-4 border-blue-500">
-                            <h4 class="font-bold text-blue-800 mb-3">Funding Strategy</h4>
-                            <p class="text-gray-700 mb-2">60% Founder equity (17M KES)</p>
-                            <p class="text-gray-700 mb-2">30% Asset financing (8M KES)</p>
-                            <p class="text-gray-700">10% Hass Petroleum vendor credit (2.7M KES)</p>
-                        </div>
-                    </div>
-                    <div>
-                        <h3 class="text-2xl font-semibold mb-6 text-blue-800">Revenue Model</h3>
-                        <div class="bg-white p-6 rounded-lg shadow mb-6">
-                            <h4 class="font-bold text-gray-800 mb-4">Margin Structure</h4>
-                            <p class="text-gray-700 mb-4">Hass Petroleum distributor margin of 3.50 KES/liter, with potential quarterly volume bonuses up to 0.75 KES/liter.</p>
-                            <div class="flex items-center justify-between mb-2">
-                                <span class="text-sm text-gray-600">Base Distribution Fee</span>
-                                <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">3.50 KES/liter</span>
-                            </div>
-                            <div class="flex items-center justify-between mb-2">
-                                <span class="text-sm text-gray-600">Volume Bonus (>100k liters/month)</span>
-                                <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">+0.50 KES/liter</span>
-                            </div>
-                            <div class="flex items-center justify-between">
-                                <span class="text-sm text-gray-600">On-Time Performance Bonus</span>
-                                <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">+0.25 KES/liter</span>
-                            </div>
-                        </div>
-                        <div class="bg-white p-6 rounded-lg shadow">
-                            <h4 class="font-bold text-gray-800 mb-4">12-Month Projections</h4>
-                            <div class="grid grid-cols-3 gap-2 text-center mb-3 font-medium text-sm">
-                                <div class="bg-blue-100 py-2 rounded">Metric</div>
-                                <div class="bg-blue-100 py-2 rounded">Month 6</div>
-                                <div class="bg-blue-100 py-2 rounded">Month 12</div>
-                                <div class="py-2 border-b">Monthly Volume</div>
-                                <div class="py-2 border-b">1.8M liters</div>
-                                <div class="py-2 border-b">3.2M liters</div>
-                                <div class="py-2 border-b">Revenue</div>
-                                <div class="py-2 border-b">6.3M KES</div>
-                                <div class="py-2 border-b">11.2M KES</div>
-                                <div class="py-2">Gross Profit</div>
-                                <div class="py-2">2.2M KES</div>
-                                <div class="py-2">4.0M KES</div>
-                            </div>
-                            <p class="text-gray-600 text-sm">Assumes 35 retail stations by Month 6, growing to 50 by Month 12</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-hass-blue text-white p-8 rounded-xl">
-                    <h3 class="text-2xl font-semibold mb-6">Milestone Metrics</h3>
-                    <div class="grid md:grid-cols-4 gap-4">
-                        <div class="bg-blue-800 p-4 rounded-lg text-center">
-                            <div class="text-3xl font-bold mb-2">Q3 2024</div>
-                            <p class="text-sm">Break-even operations</p>
-                        </div>
-                        <div class="bg-blue-800 p-4 rounded-lg text-center">
-                            <div class="text-3xl font-bold mb-2">18%</div>
-                            <p class="text-sm">Target gross margin</p>
-                        </div>
-                        <div class="bg-blue-800 p-4 rounded-lg text-center">
-                            <div class="text-3xl font-bold mb-2">2.5x</div>
-                            <p class="text-sm">ROI by Year 2</p>
-                        </div>
-                        <div class="bg-blue-800 p-4 rounded-lg text-center">
-                            <div class="text-3xl font-bold mb-2">15%</div>
-                            <p class="text-sm">Hass market share growth in target areas</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Navigation controls -->
-    <div class="fixed bottom-6 right-6 flex space-x-3">
-        <button id="prev-btn" class="hass-blue text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center hover:bg-blue-800 transition">
-            <i class="fas fa-chevron-left"></i>
-        </button>
-        <button id="next-btn" class="hass-blue text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center hover:bg-blue-800 transition">
-            <i class="fas fa-chevron-right"></i>
-        </button>
-    </div>
-    <!-- Footer -->
-    <footer class="gradient-bg text-white py-10">
-        <div class="container mx-auto px-6">
-            <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="mb-6 md:mb-0">
-                    <div class="flex items-center">
-                        <i class="fas fa-gas-pump text-2xl mr-3"></i>
-                        <span class="font-bold text-xl">PetroConnect</span>
-                    </div>
-                    <p class="mt-2 text-blue-100">Strategic fuel distribution partner to Hass Petroleum</p>
-                    <div class="mt-3 text-sm">
-                        <p>Mohamed Amin Jabane, Managing Director</p>
-                        <p class="flex items-center mt-1">
-                            <i class="fas fa-phone-alt mr-2"></i>
-                            <span>0716 331 902</span>
-                        </p>
-                    </div>
-                </div>
-                <div class="flex space-x-6">
-                    <a href="#" class="hover:text-blue-300 transition">
-                        <i class="fab fa-linkedin-in"></i>
-                    </a>
-                    <a href="#" class="hover:text-blue-300 transition">
-                        <i class="fas fa-envelope"></i>
-                    </a>
-                    <a href="#" class="hover:text-blue-300 transition">
-                        <i class="fas fa-phone-alt"></i>
-                    </a>
-                </div>
-            </div>
-            <div class="border-t border-blue-700 mt-8 pt-8 text-sm text-blue-200">
-                <div class="flex flex-col md:flex-row justify-between items-center">
-                    <p>© 2023 PetroConnect. All rights reserved.</p>
-                    <div class="flex space-x-6 mt-4 md:mt-0">
-                        <a href="#" class="hover:text-white transition">Confidentiality</a>
-                        <a href="#" class="hover:text-white transition">Partner Login</a>
-                        <a href="#" class="hover:text-white transition">Contact Team</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </footer>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const slides = document.querySelectorAll('.slide');
-            const navLinks = document.querySelectorAll('.nav-link');
-            const prevBtn = document.getElementById('prev-btn');
-            const nextBtn = document.getElementById('next-btn');
-            const progressBar = document.getElementById('progress-bar');
-            const menuToggle = document.getElementById('menu-toggle');
-            const mobileMenu = document.getElementById('mobile-menu');
-            let currentSlide = 0;
-            // Show first slide
-            showSlide(currentSlide);
-            // Navigation functions
-            function showSlide(n) {
-                slides.forEach(slide => slide.classList.remove('active'));
-                slides[n].classList.add('active');
-                // Update progress bar
-                const progress = ((n + 1) / slides.length) * 100;
-                progressBar.style.width = `${progress}%`;
-                // Update active nav link
-                navLinks.forEach(link => {
-                    link.classList.remove('font-bold', 'border-b-2');
-                    if (parseInt(link.dataset.slide) === n) {
-                        link.classList.add('font-bold', 'border-b-2');
-                    }
-                });
-            }
-            function nextSlide() {
-                currentSlide = (currentSlide + 1) % slides.length;
-                showSlide(currentSlide);
-            }
-            function prevSlide() {
-                currentSlide = (currentSlide - 1 + slides.length) % slides.length;
-                showSlide(currentSlide);
-            }
-            // Event listeners
-            nextBtn.addEventListener('click', nextSlide);
-            prevBtn.addEventListener('click', prevSlide);
-            navLinks.forEach(link => {
-                link.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    currentSlide = parseInt(this.dataset.slide);
-                    showSlide(currentSlide);
-                    // Hide mobile menu after selection
-                    if (mobileMenu.classList.contains('hidden') === false) {
-                        mobileMenu.classList.add('hidden');
-                    }
-                });
-            });
-            // Keyboard navigation
-            document.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowRight') {
-                    nextSlide();
-                } else if (e.key === 'ArrowLeft') {
-                    prevSlide();
-                }
-            });
-            // Mobile menu toggle
-            menuToggle.addEventListener('click', function() {
-                mobileMenu.classList.toggle('hidden');
-            });
-            // Smooth scroll for anchor links
-            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-                anchor.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    document.querySelector(this.getAttribute('href')).scrollIntoView({
-                        behavior: 'smooth'
-                    });
-                });
-            });
-        });
-    </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=ghost325/oil-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>

 <!DOCTYPE html>
+<html>
+  <head>
+    <title>My app</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8">
     <style>
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        height: 100dvh;
+        font-family: "Arial", sans-serif;
+        text-align: center;
+      }
+      .arrow {
+        position: absolute;
+        bottom: 32px;
+        left: 0px;
+        width: 100px;
+        transform: rotate(30deg);
+      }
+      h1 {
+        font-size: 50px;
+      }
+      h1 span {
+        color: #acacac;
+        font-size: 32px;
+      }
     </style>
+  </head>
+  <body>
+    <h1>
+      <span>I'm ready to work,</span><br />
+      Ask me anything.
+    </h1>
+    <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
+    <script></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=ghost325/oil-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>