Home
Code Master(Mfuranziza Dusabe Hamza)
Innovative Rwanda-Canada Transport Services Website

Innovative Rwanda-Canada Transport Services Website

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 25-Aug-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is about me

Breadcrumb Hero About us

Author Code Master(Mfuranziza Dusabe Hamza)

204

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rwanda-Canada Transport Services | Safe & Reliable Shipping</title>
    <meta name="description" content="Professional transport and shipping services from Rwanda to Canada. We handle cargo, personal belongings, and commercial shipments with care.">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'rwanda-blue': '#20603d',
                        'rwanda-yellow': '#fad201',
                        'canada-red': '#d52b1e',
                        'primary': '#20603d',
                        'secondary': '#d52b1e',
                        'accent': '#fad201',
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
        }
        
        .hero-gradient {
            background: linear-gradient(120deg, rgba(32, 96, 61, 0.9) 0%, rgba(213, 43, 30, 0.85) 100%);
        }
        
        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-hover: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);
        }
        
        .tracking-progress {
            height: 6px;
            background: #e5e7eb;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .tracking-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #20603d 0%, #d52b1e 100%);
            width: 65%;
        }
        
        .parallax {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        
        .typewriter {
            overflow: hidden;
            border-right: .15em solid #fad201;
            white-space: nowrap;
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
        }
        
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #fad201; }
        }
    </style>
</head>
<body class="bg-gray-50">
    
    <nav class="bg-white shadow-lg fixed w-full z-50">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between h-16">
                <div class="flex space-x-7">
                    <div class="flex-shrink-0 flex items-center">
                        <span class="text-primary font-bold text-xl">Rwanda-Canada Transport</span>
                    </div>
                    <div class="hidden md:flex items-center space-x-1">
                        <a href="#" class="py-4 px-2 text-primary border-b-4 border-primary font-semibold">Home</a>
                        <a href="#services" class="py-4 px-2 text-gray-500 font-semibold hover:text-primary transition duration-300">Services</a>
                        <a href="#tracking" class="py-4 px-2 text-gray-500 font-semibold hover:text-primary transition duration-300">Tracking</a>
                        <a href="#pricing" class="py-4 px-2 text-gray-500 font-semibold hover:text-primary transition duration-300">Pricing</a>
                        <a href="#contact" class="py-4 px-2 text-gray-500 font-semibold hover:text-primary transition duration-300">Contact</a>
                    </div>
                </div>
                <div class="hidden md:flex items-center space-x-3">
                    <a href="#" class="py-2 px-4 bg-primary text-white font-medium rounded hover:bg-opacity-90 transition duration-300">Get Quote</a>
                    <a href="#" class="py-2 px-4 bg-secondary text-white font-medium rounded hover:bg-opacity-90 transition duration-300">Track Shipment</a>
                </div>
                <div class="md:hidden flex items-center">
                    <button class="outline-none mobile-menu-button">
                        <svg class="w-6 h-6 text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                            <path d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </nav>

<header class="hero-gradient min-h-screen flex items-center pt-16 pb-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-2 gap-8 items-center">
            <div class="text-white">
                <h1 class="text-4xl md:text-5xl font-bold mb-4 typewriter">Bridging Continents, Delivering Trust</h1>
                <p class="text-xl mb-8">Experience seamless shipping between Rwanda and Canada with our innovative logistics solutions powered by real-time tracking and AI-powered route optimization.</p>
                <div class="flex flex-wrap gap-4">
                    <a href="#quote" class="bg-accent text-gray-900 font-bold py-3 px-6 rounded-lg hover:bg-yellow-400 transition duration-300 flex items-center">
                        <span>Get Instant Quote</span>
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linecap="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                    </a>
                    <a href="#services" class="border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-white hover:bg-opacity-10 transition duration-300">
                        Explore Services
                    </a>
                </div>
            </div>
            <div class="relative">
                <div class="floating">
                    <img src="https://images.unsplash.com/photo-1502920917128-1aa500764cbd?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Cargo plane" class="rounded-lg shadow-xl">
                </div>
                <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg">
                    <div class="flex items-center">
                        <div class="bg-primary rounded-full p-2 mr-3">
                            <i class="fas fa-shipping-fast text-white text-xl"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600">Current Delivery Time</p>
                            <p class="font-bold text-primary">7-10 Days</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

<section class="py-12 bg-gray-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                <div>
                    <div class="text-4xl font-bold text-primary">98%</div>
                    <div class="text-gray-600">On-Time Delivery</div>
                </div>
                <div>
                    <div class="text-4xl font-bold text-primary">5,000+</div>
                    <div class="text-gray-600">Shipments Monthly</div>
                </div>
                <div>
                    <div class="text-4xl font-bold text-primary">12</div>
                    <div class="text-gray-600">Years Experience</div>
                </div>
                <div>
                    <div class="text-4xl font-bold text-primary">24/7</div>
                    <div class="text-gray-600">Customer Support</div>
                </div>
            </div>
        </div>
    </section>

<section id="services" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Innovative Shipping Solutions</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">Leveraging cutting-edge technology to provide seamless shipping experiences between Rwanda and Canada</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-gray-50 rounded-xl p-6 card-hover">
                    <div class="bg-primary bg-opacity-10 rounded-lg p-3 inline-block mb-4">
                        <i class="fas fa-box-open text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Smart Cargo Tracking</h3>
                    <p class="text-gray-600 mb-4">Real-time IoT sensors monitor location, temperature, and humidity of your shipments throughout the journey.</p>
                    <a href="#" class="text-primary font-medium flex items-center">
                        <span>Learn more</span>
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linecap="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                    </a>
                </div>
                
                <div class="bg-gray-50 rounded-xl p-6 card-hover">
                    <div class="bg-secondary bg-opacity-10 rounded-lg p-3 inline-block mb-4">
                        <i class="fas fa-robot text-secondary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">AI Route Optimization</h3>
                    <p class="text-gray-600 mb-4">Our AI algorithms calculate the most efficient routes, saving time and reducing carbon emissions.</p>
                    <a href="#" class="text-secondary font-medium flex items-center">
                        <span>Learn more</span>
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linecap="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                    </a>
                </div>
                
                <div class="bg-gray-50 rounded-xl p-6 card-hover">
                    <div class="bg-accent bg-opacity-10 rounded-lg p-3 inline-block mb-4">
                        <i class="fas fa-file-invoice-dollar text-accent text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Blockchain Documentation</h3>
                    <p class="text-gray-600 mb-4">Secure, tamper-proof customs documentation and payment processing using blockchain technology.</p>
                    <a href="#" class="text-accent font-medium flex items-center">
                        <span>Learn more</span>
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linecap="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </section>

<section id="tracking" class="py-16 bg-gray-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">Revolutionary Shipment Tracking</h2>
                    <p class="text-xl text-gray-600 mb-6">Our advanced tracking system provides real-time updates and predictive analytics for your shipments.</p>
                    
                    <div class="bg-white rounded-xl p-6 shadow-sm mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <div class="font-medium">Tracking ID: RC789456123</div>
                            <div class="text-sm font-medium text-primary">In Transit</div>
                        </div>
                        <div class="tracking-progress mb-4">
                            <div class="tracking-progress-fill"></div>
                        </div>
                        <div class="grid grid-cols-4 text-xs text-gray-500">
                            <div class="text-center">
                                <div class="h-2 w-2 bg-primary rounded-full mx-auto mb-1"></div>
                                <div>Received</div>
                            </div>
                            <div class="text-center">
                                <div class="h-2 w-2 bg-primary rounded-full mx-auto mb-1"></div>
                                <div>Processing</div>
                            </div>
                            <div class="text-center">
                                <div class="h-2 w-2 bg-gray-300 rounded-full mx-auto mb-1"></div>
                                <div>In Transit</div>
                            </div>
                            <div class="text-center">
                                <div class="h-2 w-2 bg-gray-300 rounded-full mx-auto mb-1"></div>
                                <div>Delivered</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl p-6 shadow-sm">
                        <h3 class="font-medium mb-4">Latest Update</h3>
                        <div class="flex">
                            <div class="flex flex-col items-center mr-4">
                                <div class="rounded-full bg-primary w-8 h-8 flex items-center justify-center">
                                    <i class="fas fa-plane-departure text-white text-sm"></i>
                                </div>
                                <div class="w-0.5 h-16 bg-gray-200 my-1"></div>
                            </div>
                            <div class="pb-6">
                                <p class="font-medium">Departed from Kigali International Airport</p>
                                <p class="text-sm text-gray-500">Today at 14:30 GMT+2</p>
                                <p class="text-sm mt-1">Flight No. WB203 • Estimated arrival: 08:45 GMT-5 tomorrow</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <img src="https://images.unsplash.com/photo-1566576721346-d4a3b4eaeb55?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Tracking interface" class="rounded-lg shadow-xl">
                </div>
            </div>
        </div>
    </section>

<section id="quote" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Instant Quote Calculator</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">Get an accurate estimate for your shipment in seconds with our AI-powered pricing algorithm</p>
            </div>
            
            <div class="max-w-3xl mx-auto bg-gray-50 rounded-xl p-8 shadow-sm">
                <form>
                    <div class="grid md:grid-cols-2 gap-6 mb-8">
                        <div>
                            <label class="block text-gray-700 mb-2">Origin</label>
                            <div class="relative">
                                <select class="block appearance-none w-full bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary">
                                    <option>Kigali, Rwanda</option>
                                    <option>Other Rwandan Cities</option>
                                </select>
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">Destination</label>
                            <div class="relative">
                                <select class="block appearance-none w-full bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary">
                                    <option>Toronto, Canada</option>
                                    <option>Montreal, Canada</option>
                                    <option>Vancouver, Canada</option>
                                    <option>Calgary, Canada</option>
                                    <option>Ottawa, Canada</option>
                                </select>
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="grid md:grid-cols-3 gap-6 mb-8">
                        <div>
                            <label class="block text-gray-700 mb-2">Weight (kg)</label>
                            <input type="number" class="w-full bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary" placeholder="e.g. 25">
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">Dimensions (cm)</label>
                            <div class="flex space-x-2">
                                <input type="number" class="w-1/3 bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary" placeholder="L">
                                <input type="number" class="w-1/3 bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary" placeholder="W">
                                <input type="number" class="w-1/3 bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary" placeholder="H">
                            </div>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">Shipment Type</label>
                            <div class="relative">
                                <select class="block appearance-none w-full bg-white border border-gray-300 rounded-lg py-3 px-4 leading-tight focus:outline-none focus:border-primary">
                                    <option>Document</option>
                                    <option>Package</option>
                                    <option>Freight</option>
                                    <option>Vehicle</option>
                                </select>
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center">
                        <button type="button" class="bg-primary text-white font-medium rounded-lg py-3 px-8 hover:bg-opacity-90 transition duration-300">
                            Calculate Quote
                        </button>
                    </div>
                </form>
                
                <div class="mt-8 p-6 bg-primary text-white rounded-lg hidden" id="quote-result">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-xl font-semibold">Your Quote Estimate</h3>
                        <span class="text-2xl font-bold">$427.50</span>
                    </div>
                    <p class="mb-2">Estimated delivery time: 7-9 business days</p>
                    <p class="text-sm opacity-80">This quote includes door-to-door service, customs clearance, and insurance up to $1,000.</p>
                    <button class="mt-4 bg-white text-primary font-medium rounded-lg py-2 px-6 w-full hover:bg-opacity-90 transition duration-300">
                        Book Now
                    </button>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-gray-100 parallax" style="background-image: url('https://images.unsplash.com/photo-1519451241324-20b4ea2c4220?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-white mb-4">What Our Customers Say</h2>
                <p class="text-xl text-white text-opacity-90 max-w-3xl mx-auto">Trusted by businesses and individuals across Rwanda and Canada</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white bg-opacity-95 rounded-xl p-6 card-hover">
                    <div class="flex text-accent mb-4">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                    <p class="text-gray-700 mb-4">"The real-time tracking feature is incredible. I watched my shipment move from Kigali to Montreal with hourly updates. Best shipping experience ever!"</p>
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
                        <div>
                            <div class="font-medium">Jean Paul</div>
                            <div class="text-sm text-gray-500">Kigali Business Owner</div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white bg-opacity-95 rounded-xl p-6 card-hover">
                    <div class="flex text-accent mb-4">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                    <p class="text-gray-700 mb-4">"As an importer of Rwandan coffee to Canada, I rely on their consistent delivery times and careful handling. The blockchain documentation makes customs a breeze."</p>
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
                        <div>
                            <div class="font-medium">Sarah Johnson</div>
                            <div class="text-sm text-gray-500">Toronto Coffee Importer</div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white bg-opacity-95 rounded-xl p-6 card-hover">
                    <div class="flex text-accent mb-4">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                    <p class="text-gray-700 mb-4">"I shipped personal belongings to my daughter in Ottawa. The price was fair, the process was simple, and everything arrived perfectly. Will definitely use again."</p>
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
                        <div>
                            <div class="font-medium">Marie Uwase</div>
                            <div class="text-sm text-gray-500">Sending to Family in Canada</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-primary text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-bold mb-6">Ready to Ship Between Rwanda and Canada?</h2>
            <p class="text-xl mb-8 max-w-3xl mx-auto">Join thousands of satisfied customers who trust us with their important shipments</p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="#" class="bg-accent text-gray-900 font-bold py-3 px-8 rounded-lg hover:bg-yellow-400 transition duration-300">
                    Get Started Today
                </a>
                <a href="#contact" class="border-2 border-white text-white font-bold py-3 px-8 rounded-lg hover:bg-white hover:bg-opacity-10 transition duration-300">
                    Contact Us
                </a>
            </div>
        </div>
    </section>

<footer class="bg-gray-900 text-white pt-12 pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-4 gap-8 mb-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">Rwanda-Canada Transport</h3>
                    <p class="text-gray-400 mb-4">Bridging continents with innovative logistics solutions and reliable shipping services.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">Services</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Air Freight</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Sea Freight</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Ground Shipping</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Customs Clearance</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Warehousing</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Get a Quote</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Track Shipment</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Schedule Pickup</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Locations</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Support Center</a></li>
                    </ul>
                </div>
                
                <div id="contact">
                    <h3 class="text-lg font-semibold mb-4">Contact Us</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-map-marker-alt text-primary mr-2 mt-1"></i>
                            <span class="text-gray-400">123 Logistics Ave, Kigali, Rwanda</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-phone-alt text-primary mr-2"></i>
                            <span class="text-gray-400">+250 796132866</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-envelope text-primary mr-2"></i>
                            <span class="text-gray-400">mfuranzizahamza@gmail.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8 text-center text-gray-400 text-sm">
                <p>© 2023 Rwanda-Canada Transport Services. All rights reserved.</p>
            </div>
        </div>
    </footer>

Related Examples

Managing Finance Hero
Create a modern and responsive Hero Section using TailwindCSS. This section features a bold headline, a subheading, and a call-to-action button, designed to grab user attention instantly. With a clean layout, engaging typography, and a visually appealing background, this hero section enhances the first impression of your website. Ideal for landing pages, e-commerce, and SaaS platforms, it ensures a seamless experience across all devices.

Author:
SHARIFUL ISLAM

8 months ago

859
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

7 months ago

476
Minimalistic hero section

Author:
Sophia Baker

2 years ago

11.3k
Hero w/ navbar
the modern and clean hero section

Author:
Carla Hoffman

1 year ago

4.7k
Stylish Mobile-First Navigation Bar Using Tailwind
This project showcases a sleek, fixed-top responsive navigation bar crafted with Tailwind CSS. Featuring a vibrant gradient background, a bold uppercase logo, and smooth pink hover effects, it adapts beautifully across devices. On desktop, the navigation links appear horizontally with ample spacing, while on mobile, a hamburger menu toggles a stylish dropdown with rounded corners and subtle shadows. The navbar’s semi-transparent backdrop with blur adds a modern glassmorphism touch, making it perfect for contemporary web designs.

Author:
Bonimater

5 months ago

452
Landing page hero section UI
Modern Hero Section Design

Author:
UI-Templates

2 weeks ago

132
About Us

Author:
ariaw

2 weeks ago

57
Hero section with youtube video preview

Author:
Piet Vriend

2 years ago

11.8k
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

5 months ago

767
hero section

Author:
Anonymous

1 year ago

9.6k
Hero section with sample code
Show sample code of your digital product

Author:
Dipti narayan

2 years ago

10.1k
tiket token
enter in stadium using tecinology

Author:
Uwase Alliance

5 months ago

783

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components