Cafee shop

help to buy something that can help you to relax

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

Other

Author INGRIDE MUZIRANENGE

1.3k

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>

</body>
</html>

Related Examples

5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

8 months ago

468
responsive home page
the best home page

Author:
irahoza daniel

9 months ago

1.1k
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Author:
Walid Ahmad

1 year ago

1.4k
background animation
background animation

Author:
Anonymous

2 years ago

50.8k
Coffee Menu

Author:
ariaw

4 months ago

552
Icon group

Author:
Conan Hilton

3 years ago

10.1k
admindashboard
creates a responsive, interactive admin dashboard using Tailwind CSS, Font Awesome, Chart.js, and custom JavaScript animations. It's called "Materially Dashboard" and is designed for presenting key statistics and analytics data in a visually appealing manner.

Author:
ishimwe shadad

9 months ago

799
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Author:
Tofayel Islam

2 months ago

346
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

602
Stepper - Without Buttons

Author:
farisubuntu

1 year ago

1.6k
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Author:
Hamza Atig

2 months ago

162
Apple Dock Navigation Bar

Author:
Cristian

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components