Home
Augustin
coffee

coffee

a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

This tailwind example is contributed by Augustin, on 22-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero Other

Author Augustin

173

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee & Tea - Artisanal Coffee & Premium Tea Blends</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 href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        .font-cursive {
            font-family: 'Dancing Script', cursive;
        }
        
        .font-sans {
            font-family: 'Poppins', sans-serif;
        }
        
        .hero-container {
            position: relative;
            height: 100vh;
            max-height: 800px;
            overflow: hidden;
        }
        
        .hero-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            z-index: 1;
        }
        
        .hero-slide.active {
            opacity: 1;
        }
        
        .hero-slide::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
        }
        
        .menu-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .feature-card {
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .contact-form input,
        .contact-form textarea {
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
        }
        
        .contact-form input:focus,
        .contact-form textarea:focus {
            outline: none;
            border-color: #b45309;
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        .contact-form input::placeholder,
        .contact-form textarea::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
    </style>
</head>
<body class="font-sans bg-amber-50">
    
    <nav class="bg-amber-900 text-white shadow-lg sticky top-0 z-50">
        <div class="container mx-auto px-6 py-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-4">
                    <a href="index.html" class="font-cursive text-3xl">Coffee & Tea</a>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="text-amber-200 hover:text-white">Home</a>
                    <a href="#menu" class="hover:text-amber-200">Menu</a>
                    <a href="#about" class="hover:text-amber-200">About</a>
                    <a href="#contact" class="hover:text-amber-200">Contact</a>
                    <a href="#" class="bg-amber-700 hover:bg-amber-600 px-4 py-2 rounded-lg">Order Online</a>
                </div>
                <div class="md:hidden">
                    <button id="mobile-menu-button" class="text-white focus:outline-none">
                        <i class="fas fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>
            
            <div id="mobile-menu" class="md:hidden hidden mt-4 pb-4">
                <a href="index.html" class="block py-2 text-amber-200">Home</a>
                <a href="#menu" class="block py-2 hover:text-amber-200">Menu</a>
                <a href="#about" class="block py-2 hover:text-amber-200">About</a>
                <a href="#contact" class="block py-2 hover:text-amber-200">Contact</a>
                <a href="#" class="block mt-2 bg-amber-700 hover:bg-amber-600 px-4 py-2 rounded-lg w-max">Order Online</a>
            </div>
        </div>
    </nav>

<section class="hero-container">
        
        <div class="hero-slide active" style="background-image: url('https://images.unsplash.com/photo-1445116572660-236099ec97a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80');"></div>
        <div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
        <div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80');"></div>
        <div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
        <div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1558160074-4d7d8bdf4256?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
        
        
        <div class="hero-content flex items-center justify-center h-full text-center text-white py-32 px-6">
            <div class="container mx-auto">
                <h1 class="font-cursive text-5xl md:text-7xl mb-6">Coffee & Tea</h1>
                <p class="text-xl md:text-2xl mb-8">Artisanal Coffee & Premium Tea Blends</p>
                <a href="#menu" class="bg-amber-700 hover:bg-amber-600 text-white px-8 py-3 rounded-lg text-lg font-semibold">View Our Menu</a>
            </div>
        </div>
    </section>

<section id="menu" class="py-16 bg-amber-50">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center text-amber-900 mb-4">Our Menu</h2>
            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Discover our carefully crafted selection of artisanal coffees and premium teas from around the world.</p>
            
            
            <div class="mb-16">
                <h3 class="text-2xl font-semibold text-amber-800 mb-6 flex items-center">
                    <i class="fas fa-coffee mr-3"></i> Coffee Selection
                </h3>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Rwandan Bourbon</h4>
                            <span class="text-amber-700 font-bold">2,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">A smooth, well-balanced coffee with notes of citrus and chocolate, grown in the volcanic soils of Rwanda.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot/Iced</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Espresso</h4>
                            <span class="text-amber-700 font-bold">2,000 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Our signature espresso blend with rich crema, caramel sweetness, and a smooth finish.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Single/Double</span>
                            <span>1oz / 2oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Cappuccino</h4>
                            <span class="text-amber-700 font-bold">3,000 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Espresso with steamed milk and a silky layer of foam, dusted with cocoa or cinnamon.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Regular/Large</span>
                            <span>8oz / 12oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Iced Latte</h4>
                            <span class="text-amber-700 font-bold">3,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Espresso chilled with milk and ice, customizable with flavored syrups.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Regular/Large</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Mocha</h4>
                            <span class="text-amber-700 font-bold">3,800 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Espresso blended with rich chocolate and steamed milk, topped with whipped cream.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Regular/Large</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Cold Brew</h4>
                            <span class="text-amber-700 font-bold">3,200 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Slow-steeped for 18 hours for a smooth, less acidic coffee experience.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Regular/Large</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="mb-16">
                <h3 class="text-2xl font-semibold text-amber-800 mb-6 flex items-center">
                    <i class="fas fa-leaf mr-3"></i> Tea Selection
                </h3>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Rwandan Green Tea</h4>
                            <span class="text-amber-700 font-bold">2,000 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Premium green tea grown in the highlands of Rwanda, with fresh grassy notes.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot/Iced</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Earl Grey</h4>
                            <span class="text-amber-700 font-bold">2,200 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Classic black tea flavored with bergamot oil, aromatic and refreshing.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot/Iced</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Chamomile</h4>
                            <span class="text-amber-700 font-bold">2,000 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Caffeine-free herbal tea with calming properties and a mild apple-like flavor.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot Only</span>
                            <span>12oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Masala Chai</h4>
                            <span class="text-amber-700 font-bold">2,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Spiced black tea with cinnamon, cardamom, ginger, and cloves, served with milk.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot Only</span>
                            <span>12oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Rooibos</h4>
                            <span class="text-amber-700 font-bold">2,200 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Caffeine-free South African herbal tea with a naturally sweet, nutty flavor.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot/Iced</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Matcha Latte</h4>
                            <span class="text-amber-700 font-bold">3,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Premium Japanese matcha powder whisked with steamed milk for a creamy texture.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot/Iced</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div>
                <h3 class="text-2xl font-semibold text-amber-800 mb-6 flex items-center">
                    <i class="fas fa-bread-slice mr-3"></i> Pastries & Snacks
                </h3>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Croissant</h4>
                            <span class="text-amber-700 font-bold">2,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Buttery, flaky French-style croissant, plain or with chocolate filling.</p>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Banana Bread</h4>
                            <span class="text-amber-700 font-bold">2,000 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Moist homemade banana bread with walnuts, served warm.</p>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Muffin</h4>
                            <span class="text-amber-700 font-bold">2,200 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Daily selection of blueberry, chocolate, or bran muffins.</p>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Avocado Toast</h4>
                            <span class="text-amber-700 font-bold">4,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Sourdough bread with smashed avocado, cherry tomatoes, and chili flakes.</p>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Fruit Salad</h4>
                            <span class="text-amber-700 font-bold">3,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Seasonal fresh fruits with optional yogurt and honey.</p>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Cheese Sandwich</h4>
                            <span class="text-amber-700 font-bold">4,800 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Grilled sandwich with local cheese, tomatoes, and herbs.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="py-16 bg-amber-900 text-white">
        <div class="container mx-auto px-6">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-12">
                    <h2 class="text-3xl font-bold mb-6">Our Story</h2>
                    <p class="mb-4">Founded in 2018 in the heart of Rwanda, Coffee & Tea began as a small passion project between two friends who shared a love for quality beverages and community spaces.</p>
                    <p class="mb-4">We source our coffee beans directly from Rwandan farmers in the volcanic regions, ensuring fair trade practices and supporting local agriculture. Our teas are carefully selected from the finest gardens around the world.</p>
                    <p class="mb-6">What started as a modest café has grown into a beloved gathering place where people come not just for exceptional drinks, but for the warm atmosphere and sense of connection.</p>
                    <div class="flex space-x-4">
                        <div class="bg-amber-800 p-4 rounded-lg text-center flex-1">
                            <div class="text-3xl font-bold mb-1">5+</div>
                            <div class="text-sm">Years in Business</div>
                        </div>
                        <div class="bg-amber-800 p-4 rounded-lg text-center flex-1">
                            <div class="text-3xl font-bold mb-1">12</div>
                            <div class="text-sm">Local Farmers</div>
                        </div>
                        <div class="bg-amber-800 p-4 rounded-lg text-center flex-1">
                            <div class="text-3xl font-bold mb-1">50+</div>
                            <div class="text-sm">Happy Employees</div>
                        </div>
                    </div>
                </div>
                <div class="lg:w-1/2">
                    <div class="relative rounded-xl overflow-hidden shadow-2xl">
                        <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" 
                             alt="Coffee shop interior"
                             class="w-full h-auto">
                        <div class="absolute inset-0 bg-gradient-to-t from-amber-900/80 to-transparent flex items-end p-6">
                            <div>
                                <h3 class="text-xl font-semibold mb-2">Our Café in Rutsiro</h3>
                                <p class="text-sm">Visit us at our flagship location in Bwiza, Rutsiro</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="mt-16">
                <h2 class="text-3xl font-bold text-center mb-12">Meet Our Team</h2>
                <div class="grid md:grid-cols-3 gap-8">
                    
                    <div class="bg-amber-800 rounded-lg overflow-hidden shadow-lg">
                        <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1361&q=80" 
                             alt="Anne Dukundimana"
                             class="w-full h-64 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-1">Anne Dukundimana</h3>
                            <p class="text-amber-200 mb-3">Founder & Head Barista</p>
                            <p class="text-sm">Anne's passion for coffee began during her travels through East Africa's coffee regions. She oversees our coffee sourcing and barista training.</p>
                        </div>
                    </div>
                    
                    
                    <div class="bg-amber-800 rounded-lg overflow-hidden shadow-lg">
                        <img src="https://images.unsplash.com/photo-1562788869-4ed32648eb72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                             alt="Noela"
                             class="w-full h-64 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-1">Noela</h3>
                            <p class="text-amber-200 mb-3">Tea Specialist</p>
                            <p class="text-sm">Noela curates our tea selection and develops unique blends. Her knowledge of tea traditions from around the world is unparalleled.</p>
                        </div>
                    </div>
                    
                    
                    <div class="bg-amber-800 rounded-lg overflow-hidden shadow-lg">
                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1588&q=80" 
                             alt="Jean Paul"
                             class="w-full h-64 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-1">Jean Paul</h3>
                            <p class="text-amber-200 mb-3">Pastry Chef</p>
                            <p class="text-sm">Jean Paul brings French pastry techniques to Rwandan ingredients, creating our delicious selection of baked goods.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="py-16 bg-amber-800 text-white">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12">Contact Us</h2>
            
            <div class="flex flex-col lg:flex-row gap-12">
                
                <div class="lg:w-1/2">
                    <form class="contact-form space-y-6">
                        <div>
                            <label for="name" class="block mb-2">Your Name</label>
                            <input type="text" id="name" placeholder="Enter your name" 
                                   class="w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
                        </div>
                        
                        <div>
                            <label for="email" class="block mb-2">Email Address</label>
                            <input type="email" id="email" placeholder="Enter your email" 
                                   class="w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
                        </div>
                        
                        <div>
                            <label for="phone" class="block mb-2">Phone Number</label>
                            <input type="tel" id="phone" placeholder="Enter your phone number" 
                                   class="w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
                        </div>
                        
                        <div>
                            <label for="message" class="block mb-2">Your Message</label>
                            <textarea id="message" rows="5" placeholder="How can we help you?" 
                                      class="w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
                        </div>
                        
                        <button type="submit" class="bg-amber-700 hover:bg-amber-600 text-white px-6 py-3 rounded-lg font-semibold w-full">
                            Send Message
                        </button>
                    </form>
                </div>
                
                
                <div class="lg:w-1/2">
                    <div class="bg-amber-900/50 rounded-xl p-8 h-full">
                        <h3 class="text-2xl font-semibold mb-6">Get in Touch</h3>
                        
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="text-amber-300 text-xl mt-1 mr-4">
                                    <i class="fas fa-map-marker-alt"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">Location</h4>
                                    <p>Bwiza Center, Rutsiro<br>Rwanda</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="text-amber-300 text-xl mt-1 mr-4">
                                    <i class="fas fa-envelope"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">Email</h4>
                                    <a href="mailto:annedukundimana@gmail.com" class="hover:text-amber-200">annedukundimana@gmail.com</a>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="text-amber-300 text-xl mt-1 mr-4">
                                    <i class="fas fa-phone-alt"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">Phone</h4>
                                    <p>+250 79 *******</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="text-amber-300 text-xl mt-1 mr-4">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">Opening Hours</h4>
                                    <p>Monday - Friday: 7:00 AM - 8:00 PM<br>
                                    Saturday: 8:00 AM - 9:00 PM<br>
                                    Sunday: 9:00 AM - 6:00 PM</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="text-amber-300 text-xl mt-1 mr-4">
                                    <i class="fas fa-share-alt"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-3">Follow Us</h4>
                                    <div class="flex space-x-4">
                                        <a href="#" class="text-amber-300 hover:text-white text-2xl">
                                            <i class="fab fa-facebook"></i>
                                        </a>
                                        <a href="#" class="text-amber-300 hover:text-white text-2xl">
                                            <i class="fab fa-instagram"></i>
                                        </a>
                                        <a href="#" class="text-amber-300 hover:text-white text-2xl">
                                            <i class="fab fa-twitter"></i>
                                        </a>
                                        <a href="#" class="text-amber-300 hover:text-white text-2xl">
                                            <i class="fab fa-whatsapp"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="mt-16 rounded-xl overflow-hidden shadow-2xl">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3987.634075490593!2d29.28472981475393!3d-1.944298998633664!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x19dc3b1a0f0a1a3b%3A0xf8b1b3d3f3f3f3f4!2sRutsiro%2C%20Rwanda!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" 
                        width="100%" 
                        height="450" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy"
                        class="rounded-xl"></iframe>
            </div>
        </div>
    </section>

<section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center text-amber-900 mb-12">Why Choose Us</h2>
            <div class="grid md:grid-cols-3 gap-8">
                
                <div class="feature-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/
                                                <img src="https://images.unsplash.com/photo-1453614512568-c4024d13c247?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" 
                             alt="Fresh Ingredients"
                             class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <div class="text-amber-600 text-3xl mb-4">
                            <i class="fas fa-seedling"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">Premium Ingredients</h3>
                        <p class="text-gray-600">We source only the finest coffee beans and tea leaves, working directly with local Rwandan farmers and international suppliers who share our commitment to quality.</p>
                    </div>
                </div>
                
                
                <div class="feature-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                             alt="Skilled Baristas"
                             class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <div class="text-amber-600 text-3xl mb-4">
                            <i class="fas fa-mug-hot"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">Expert Preparation</h3>
                        <p class="text-gray-600">Our baristas undergo rigorous training to master both traditional techniques and innovative brewing methods, ensuring every cup meets our high standards.</p>
                    </div>
                </div>
                
                
                <div class="feature-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" 
                             alt="Cozy Atmosphere"
                             class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <div class="text-amber-600 text-3xl mb-4">
                            <i class="fas fa-heart"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">Warm Atmosphere</h3>
                        <p class="text-gray-600">Our café is designed to be a welcoming space where you can relax, work, or connect with others while enjoying your favorite beverage.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-amber-50">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center text-amber-900 mb-12">What Our Customers Say</h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="text-amber-500 text-2xl mr-2">
                            <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>
                    </div>
                    <p class="text-gray-600 mb-6">"The Rwandan Bourbon coffee is simply exceptional. I come here every morning before work and it's the perfect start to my day. The staff remembers my order and always greets me with a smile."</p>
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" 
                             alt="Customer"
                             class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h4 class="font-semibold">Alexis N.</h4>
                            <p class="text-sm text-gray-500">Regular Customer</p>
                        </div>
                    </div>
                </div>
                
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="text-amber-500 text-2xl mr-2">
                            <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>
                    </div>
                    <p class="text-gray-600 mb-6">"As a tea enthusiast, I appreciate their extensive selection and knowledgeable staff. Noela helped me discover several new favorites. The chamomile with local honey is my go-to for relaxation."</p>
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" 
                             alt="Customer"
                             class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h4 class="font-semibold">Marie Claire U.</h4>
                            <p class="text-sm text-gray-500">Tea Lover</p>
                        </div>
                    </div>
                </div>
                
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="text-amber-500 text-2xl mr-2">
                            <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>
                    </div>
                    <p class="text-gray-600 mb-6">"The perfect place to work remotely. Great WiFi, comfortable seating, and amazing coffee. The avocado toast is delicious too! I've recommended this place to all my colleagues."</p>
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" 
                             alt="Customer"
                             class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h4 class="font-semibold">Eric K.</h4>
                            <p class="text-sm text-gray-500">Digital Nomad</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-amber-900 text-white">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-3xl font-bold mb-4">Join Our Community</h2>
            <p class="max-w-2xl mx-auto mb-8">Subscribe to our newsletter for exclusive offers, new product announcements, and coffee/tea brewing tips.</p>
            
            <form class="max-w-md mx-auto flex">
                <input type="email" placeholder="Your email address" 
                       class="flex-1 px-4 py-3 rounded-l-lg focus:outline-none text-gray-900">
                <button type="submit" class="bg-amber-700 hover:bg-amber-600 px-6 py-3 rounded-r-lg font-semibold">
                    Subscribe
                </button>
            </form>
            
            <div class="mt-8 flex justify-center space-x-6">
                <a href="#" class="text-white hover:text-amber-200 text-2xl">
                    <i class="fab fa-facebook"></i>
                </a>
                <a href="#" class="text-white hover:text-amber-200 text-2xl">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="#" class="text-white hover:text-amber-200 text-2xl">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="#" class="text-white hover:text-amber-200 text-2xl">
                    <i class="fab fa-whatsapp"></i>
                </a>
            </div>
        </div>
    </section>

<footer class="bg-amber-950 text-white py-12">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-8">
                
                <div>
                    <h3 class="font-cursive text-2xl mb-4">Coffee & Tea</h3>
                    <p class="mb-4">Artisanal coffee and premium tea blends in the heart of Rwanda.</p>
                    <p>© 2023 Coffee & Tea. All rights reserved.</p>
                </div>
                
                
                <div>
                    <h4 class="font-semibold text-lg mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="index.html" class="hover:text-amber-300">Home</a></li>
                        <li><a href="#menu" class="hover:text-amber-300">Menu</a></li>
                        <li><a href="#about" class="hover:text-amber-300">About Us</a></li>
                        <li><a href="#contact" class="hover:text-amber-300">Contact</a></li>
                        <li><a href="#" class="hover:text-amber-300">Order Online</a></li>
                    </ul>
                </div>
                
                
                <div>
                    <h4 class="font-semibold text-lg mb-4">Information</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-amber-300">Privacy Policy</a></li>
                        <li><a href="#" class="hover:text-amber-300">Terms of Service</a></li>
                        <li><a href="#" class="hover:text-amber-300">Shipping Policy</a></li>
                        <li><a href="#" class="hover:text-amber-300">Refund Policy</a></li>
                        <li><a href="#" class="hover:text-amber-300">FAQ</a></li>
                    </ul>
                </div>
                
                
                <div>
                    <h4 class="font-semibold text-lg mb-4">Contact Info</h4>
                    <address class="not-italic">
                        <p class="mb-2">Bwiza Center, Rutsiro</p>
                        <p class="mb-2">Rwanda</p>
                        <p class="mb-2">Email: <a href="mailto:annedukundimana@gmail.com" class="hover:text-amber-300">annedukundimana@gmail.com</a></p>
                        <p>Phone: +250 79 *******</p>
                    </address>
                </div>
            </div>
            
            <div class="border-t border-amber-800 mt-12 pt-8 text-center text-sm text-gray-400">
                <p>All images used are for demonstration purposes only. All content is property of Coffee & Tea unless otherwise noted.</p>
            </div>
        </div>
    </footer>

<button id="back-to-top" class="fixed bottom-8 right-8 bg-amber-700 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300">
        <i class="fas fa-arrow-up"></i>
    </button>

<script>
        // Mobile menu toggle
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // Hero background slideshow
        const heroSlides = document.querySelectorAll('.hero-slide');
        let currentSlide = 0;
        
        function showSlide(n) {
            heroSlides.forEach(slide => slide.classList.remove('active'));
            heroSlides[n].classList.add('active');
        }
        
        function nextSlide() {
            currentSlide = (currentSlide + 1) % heroSlides.length;
            showSlide(currentSlide);
        }
        
        // Change slide every 5 seconds
        setInterval(nextSlide, 5000);
        
        // Back to top button
        const backToTopButton = document.getElementById('back-to-top');
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopButton.classList.remove('opacity-0', 'invisible');
                backToTopButton.classList.add('opacity-100', 'visible');
            } else {
                backToTopButton.classList.remove('opacity-100', 'visible');
                backToTopButton.classList.add('opacity-0', 'invisible');
            }
        });
        
        backToTopButton.addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
    </script>
</body>
</html>s

Related Examples

Background image section

Author:
Marc

1 year ago

5.5k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

3 months ago

641
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

3 months ago

845
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

3 months ago

951
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

2 months ago

726
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

2 months ago

302
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

2 months ago

139
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

3 weeks ago

200
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

2 weeks ago

41
Hero

Author:
ORGIN_DREAMS

2 weeks ago

101
Life Tree
by salvator

Author:
Baraka Salvator

1 week ago

15
Typical SAAS hero section

Author:
Eamon Carter

1 year ago

8.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components