|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>You & Me Pub & Hostel | Kampot, Cambodia</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
'sunset-yellow': '#FFD166', |
|
|
'sunset-orange': '#F4A261', |
|
|
'sunset-pink': '#EF476F', |
|
|
'sunset-purple': '#9C6ADE', |
|
|
'sunset-blue': '#118AB2', |
|
|
'electric-blue': '#06AED5', |
|
|
'amber': '#FF9F1C', |
|
|
}, |
|
|
fontFamily: { |
|
|
heading: ['Space Grotesk', 'sans-serif'], |
|
|
body: ['Inter', 'sans-serif'], |
|
|
}, |
|
|
backgroundImage: { |
|
|
'sunset-gradient': 'linear-gradient(to right, #FFD166, #F4A261, #EF476F, #9C6ADE, #118AB2)', |
|
|
'logo-gradient': 'radial-gradient(circle, #FFD166, #F4A261, #EF476F, #9C6ADE, #118AB2)', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.logo-circle { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.2); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
.logo-circle:hover { |
|
|
transform: rotate(15deg) scale(1.05); |
|
|
} |
|
|
.cocktail-icon { |
|
|
font-size: 40px; |
|
|
color: white; |
|
|
} |
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
.nav-link:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background: currentColor; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.nav-link:hover:after { |
|
|
width: 100%; |
|
|
} |
|
|
.gallery-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
gap: 1rem; |
|
|
} |
|
|
.loyalty-card { |
|
|
perspective: 1000px; |
|
|
} |
|
|
.loyalty-card-inner { |
|
|
transition: transform 0.6s; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
.loyalty-card:hover .loyalty-card-inner { |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
.loyalty-card-front, .loyalty-card-back { |
|
|
backface-visibility: hidden; |
|
|
} |
|
|
.loyalty-card-back { |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
.lazy-load { |
|
|
opacity: 0; |
|
|
transition: opacity 0.5s ease; |
|
|
} |
|
|
.lazy-load.loaded { |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-body bg-white text-gray-800"> |
|
|
|
|
|
<header class="sticky top-0 z-50 bg-white shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<a href="#" class="flex items-center"> |
|
|
<div class="logo-circle bg-gradient-to-br from-sunset-yellow to-sunset-blue mr-3"> |
|
|
<span class="cocktail-icon">🍹</span> |
|
|
</div> |
|
|
<span class="font-heading text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-sunset-yellow to-sunset-blue">You & Me</span> |
|
|
</a> |
|
|
|
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="nav-link font-medium text-sunset-blue hover:text-sunset-pink">Home</a> |
|
|
<a href="#events" class="nav-link font-medium text-sunset-blue hover:text-sunset-pink">Events</a> |
|
|
<a href="#book" class="nav-link font-medium text-sunset-blue hover:text-sunset-pink">Book a Bed</a> |
|
|
<a href="#join" class="nav-link font-medium text-sunset-blue hover:text-sunset-pink">Join Telegram</a> |
|
|
</nav> |
|
|
|
|
|
<button class="bg-amber text-white px-4 py-2 rounded-full font-medium shadow-md hover:shadow-lg transform hover:scale-105 transition-all"> |
|
|
Tonight's Free Shot Code |
|
|
</button> |
|
|
|
|
|
|
|
|
<button id="mobile-menu-button" class="md:hidden text-sunset-blue"> |
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-md"> |
|
|
<a href="#" class="block py-2 font-medium text-sunset-blue">Home</a> |
|
|
<a href="#events" class="block py-2 font-medium text-sunset-blue">Events</a> |
|
|
<a href="#book" class="block py-2 font-medium text-sunset-blue">Book a Bed</a> |
|
|
<a href="#join" class="block py-2 font-medium text-sunset-blue">Join Telegram</a> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="relative bg-gradient-to-b from-white to-sunset-yellow/10 py-20"> |
|
|
<div class="container mx-auto px-4 flex flex-col items-center text-center"> |
|
|
<div class="logo-circle bg-gradient-to-br from-sunset-yellow to-sunset-blue mb-8"> |
|
|
<span class="cocktail-icon">🍹</span> |
|
|
</div> |
|
|
|
|
|
<h1 class="font-heading text-4xl md:text-6xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-sunset-yellow to-sunset-blue"> |
|
|
Drink. Chill. Crash. Repeat. |
|
|
</h1> |
|
|
|
|
|
<p class="text-lg md:text-xl max-w-2xl mb-8 text-gray-700"> |
|
|
The only pub in Kampot where you can party, sleep, and wake up to do it again. |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<a href="#join" class="bg-electric-blue text-white px-8 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-105 transition-all"> |
|
|
Join Telegram |
|
|
</a> |
|
|
<a href="#book" class="bg-amber text-white px-8 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-105 transition-all"> |
|
|
Book a Bed |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white to-transparent"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="events" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="font-heading text-3xl font-bold mb-8 text-center text-sunset-blue"> |
|
|
Tonight at the Pub |
|
|
</h2> |
|
|
|
|
|
<div class="max-w-2xl mx-auto bg-gradient-to-r from-sunset-yellow/10 to-sunset-blue/10 p-6 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-sunset-pink text-white p-2 rounded-full mr-3"> |
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="font-heading text-xl font-bold text-sunset-pink">Live Events</h3> |
|
|
</div> |
|
|
|
|
|
<div id="event-content" class="space-y-3"> |
|
|
<p class="text-lg"><span class="font-bold">8:00 PM</span> - Open Mic Night</p> |
|
|
<p class="text-lg"><span class="font-bold">5:00-7:00 PM</span> - $1 Beers Happy Hour</p> |
|
|
<p class="text-lg font-bold text-sunset-pink">Free shot if you say: "Sticky Mango"</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-200"> |
|
|
<p class="text-sm text-gray-500">Events update daily. Join our Telegram for real-time updates.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="book" class="py-16 bg-gradient-to-b from-white to-sunset-blue/10"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="font-heading text-3xl font-bold mb-8 text-center text-sunset-blue"> |
|
|
Sleep with Us |
|
|
</h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-sunset-blue text-white p-2 rounded-full mr-3"> |
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="font-heading text-xl font-bold text-sunset-blue">10-Bed Mixed Dorm</h3> |
|
|
</div> |
|
|
|
|
|
<ul class="space-y-2 mb-6"> |
|
|
<li class="flex items-center"> |
|
|
<svg class="w-5 h-5 text-sunset-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>Only $5/night</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<svg class="w-5 h-5 text-sunset-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>Air-conditioned</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<svg class="w-5 h-5 text-sunset-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>Secure lockers</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<svg class="w-5 h-5 text-sunset-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>Free high-speed Wi-Fi</span> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<button class="w-full bg-sunset-blue text-white px-6 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-[1.02] transition-all"> |
|
|
Check Bed Availability |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-amber text-white p-2 rounded-full mr-3"> |
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="font-heading text-xl font-bold text-amber">Special Offers</h3> |
|
|
</div> |
|
|
|
|
|
<ul class="space-y-3 mb-6"> |
|
|
<li class="flex items-start"> |
|
|
<svg class="w-5 h-5 text-amber mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span><span class="font-bold">Stay 3+ nights</span> - Get 1 free drink per night</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<svg class="w-5 h-5 text-amber mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span><span class="font-bold">Weekly rate</span> - Only $30 (save $5)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<svg class="w-5 h-5 text-amber mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span><span class="font-bold">Late checkout</span> - Until 2PM for dorm guests</span> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<button class="w-full bg-amber text-white px-6 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-[1.02] transition-all"> |
|
|
See All Offers |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="font-heading text-3xl font-bold mb-8 text-center text-sunset-blue"> |
|
|
Life at You & Me |
|
|
</h2> |
|
|
|
|
|
<div class="gallery-grid"> |
|
|
<img src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Bar area" class="lazy-load rounded-lg shadow-md aspect-square object-cover" loading="lazy"> |
|
|
<img src="https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Dormitory" class="lazy-load rounded-lg shadow-md aspect-square object-cover" loading="lazy"> |
|
|
<img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Cocktails" class="lazy-load rounded-lg shadow-md aspect-square object-cover" loading="lazy"> |
|
|
<img src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Pub atmosphere" class="lazy-load rounded-lg shadow-md aspect-square object-cover" loading="lazy"> |
|
|
<img src="https://images.unsplash.com/photo-1527525443983-6e60c75fff46?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Guests socializing" class="lazy-load rounded-lg shadow-md aspect-square object-cover" loading="lazy"> |
|
|
<img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Hostel common area" class="lazy-load rounded-lg shadow-md aspect-square object-cover" loading="lazy"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="join" class="py-16 bg-gradient-to-b from-white to-sunset-pink/10"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 p-8"> |
|
|
<h2 class="font-heading text-3xl font-bold mb-4 text-sunset-pink"> |
|
|
Join the Party |
|
|
</h2> |
|
|
|
|
|
<p class="text-lg mb-6"> |
|
|
Insider deals. Secret events. Free drinks. Join the crew on Telegram. |
|
|
</p> |
|
|
|
|
|
<div class="flex items-center space-x-4 mb-6"> |
|
|
<div class="bg-gray-100 p-3 rounded-lg"> |
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://t.me/youandmepubkampot" alt="Telegram QR Code" class="w-32 h-32"> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500 mb-2">Scan or click below:</p> |
|
|
<a href="https://t.me/youandmepubkampot" class="inline-block bg-electric-blue text-white px-6 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-[1.02] transition-all"> |
|
|
Join Telegram Group |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<p class="text-sm text-gray-500"> |
|
|
500+ members. Daily updates. No spam. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2 bg-gradient-to-br from-sunset-yellow/20 to-sunset-pink/20 flex items-center justify-center p-8"> |
|
|
<div class="text-center"> |
|
|
<div class="text-6xl mb-4">🎉</div> |
|
|
<h3 class="font-heading text-xl font-bold mb-2 text-sunset-pink"> |
|
|
Exclusive Member Perks |
|
|
</h3> |
|
|
<ul class="space-y-2 text-left"> |
|
|
<li class="flex items-center"> |
|
|
<svg class="w-5 h-5 text-sunset-pink mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>Free birthday shot</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<svg class="w-5 h-5 text-sunset-pink mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>Member-only happy hours</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<svg class="w-5 h-5 text-sunset-pink mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>First access to special events</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h2 class="font-heading text-3xl font-bold mb-8 text-center text-sunset-blue"> |
|
|
Loyalty Rewards |
|
|
</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8 items-center"> |
|
|
<div class="loyalty-card"> |
|
|
<div class="loyalty-card-inner relative"> |
|
|
<div class="loyalty-card-front bg-gradient-to-br from-sunset-yellow/10 to-sunset-blue/10 p-6 rounded-xl shadow-md"> |
|
|
<h3 class="font-heading text-xl font-bold mb-4 text-sunset-blue">Punch Card</h3> |
|
|
<p class="mb-6">Buy 9 drinks, get your 10th free!</p> |
|
|
<div class="grid grid-cols-5 gap-2"> |
|
|
<div class="h-12 rounded-full border-2 border-sunset-blue flex items-center justify-center">1</div> |
|
|
<div class="h-12 rounded-full border-2 border-sunset-blue flex items-center justify-center">2</div> |
|
|
<div class="h-12 rounded-full border-2 border-sunset-blue flex items-center justify-center">3</div> |
|
|
<div class="h-12 rounded-full border-2 border-sunset-blue flex items-center justify-center">4</div> |
|
|
<div class="h-12 rounded-full border-2 border-sunset-blue flex items-center justify-center">5</div> |
|
|
<div class="h-12 rounded-full border-2 border-sunset-blue flex items-center justify-center">6</div> |
|
|
<div class="h-12 rounded-full border-2 border-sunset-blue flex items-center justify-center">7</div> |
|
|
<div class="h-12 rounded-full border-2 border-sunset-blue flex items-center justify-center">8</div> |
|
|
<div class="h-12 rounded-full border-2 border-sunset-blue flex items-center justify-center">9</div> |
|
|
<div class="h-12 rounded-full bg-sunset-blue text-white flex items-center justify-center">FREE</div> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-4">Ask at the bar for your physical card</p> |
|
|
</div> |
|
|
<div class="loyalty-card-back absolute inset-0 bg-gradient-to-br from-sunset-pink/10 to-amber/10 p-6 rounded-xl shadow-md flex flex-col justify-center"> |
|
|
<h3 class="font-heading text-xl font-bold mb-4 text-sunset-pink">Referral Bonus</h3> |
|
|
<p class="mb-6">Bring a friend, get a free shot!</p> |
|
|
<div class="bg-gray-100 p-3 rounded-lg mx-auto mb-4"> |
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://youandme.pub/refer" alt="Referral QR Code" class="w-32 h-32"> |
|
|
</div> |
|
|
<p class="text-sm text-center text-gray-500">Show this QR code when you arrive with a new guest</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-heading text-xl font-bold mb-4 text-amber">How It Works</h3> |
|
|
<ul class="space-y-4"> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-amber text-white rounded-full p-1 mr-3 mt-1"> |
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
</div> |
|
|
<span>Get your loyalty card at the bar (physical or digital)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-amber text-white rounded-full p-1 mr-3 mt-1"> |
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
</div> |
|
|
<span>Get a punch for each drink purchased</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-amber text-white rounded-full p-1 mr-3 mt-1"> |
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
</div> |
|
|
<span>10th drink is free (any drink under $5)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-amber text-white rounded-full p-1 mr-3 mt-1"> |
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
</div> |
|
|
<span>Refer friends for instant free shots</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-b from-white to-sunset-blue/10"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="font-heading text-3xl font-bold mb-8 text-center text-sunset-blue"> |
|
|
Find Us |
|
|
</h2> |
|
|
|
|
|
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="h-64 md:h-full rounded-lg overflow-hidden"> |
|
|
<iframe |
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3925.432183857843!2d104.1812723152776!3d10.48199219251801!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3108c3d2a5f3b3a5%3A0x5a9d5c639f3a3a1!2sKampot%20Old%20Market!5e0!3m2!1sen!2skh!4v1620000000000!5m2!1sen!2skh" |
|
|
width="100%" |
|
|
height="100%" |
|
|
style="border:0;" |
|
|
allowfullscreen="" |
|
|
loading="lazy" |
|
|
class="lazy-load" |
|
|
></iframe> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md mb-6"> |
|
|
<h3 class="font-heading text-xl font-bold mb-4 text-sunset-blue">Location</h3> |
|
|
<p class="mb-4">123 Riverside Road, Kampot, Cambodia</p> |
|
|
<p class="text-sm text-gray-500">3 minutes walk from the Old Market</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md mb-6"> |
|
|
<h3 class="font-heading text-xl font-bold mb-4 text-sunset-blue">Hours</h3> |
|
|
<p class="mb-2"><span class="font-bold">Pub:</span> 12PM – Late (every day)</p> |
|
|
<p><span class="font-bold">Reception:</span> 8AM – 10PM</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h3 class="font-heading text-xl font-bold mb-4 text-sunset-blue">Contact</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center"> |
|
|
<svg class="w-5 h-5 text-sunset-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> |
|
|
</svg> |
|
|
<span>+855 12 345 678</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<svg class="w-5 h-5 text-sunset-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path> |
|
|
</svg> |
|
|
<span>WhatsApp / Messenger</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<svg class="w-5 h-5 text-sunset-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> |
|
|
</svg> |
|
|
<span>hello@youandme.pub</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-sunset-blue text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center mb-8"> |
|
|
<div class="flex items-center mb-6 md:mb-0"> |
|
|
<div class="logo-circle bg-gradient-to-br from-sunset-yellow to-sunset-blue mr-3"> |
|
|
<span class="cocktail-icon">🍹</span> |
|
|
</div> |
|
|
<span class="font-heading text-xl font-bold">You & Me Pub & Hostel</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-6"> |
|
|
<a href="https://t.me/youandmepubkampot" class="text-white hover:text-sunset-yellow transition-colors"> |
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> |
|
|
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/> |
|
|
</svg> |
|
|
</a> |
|
|
<a href="https://facebook.com/youandmepubkampot" class="text-white hover:text-sunset-yellow transition-colors"> |
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> |
|
|
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/> |
|
|
</svg> |
|
|
</a> |
|
|
<a href="https://instagram.com/youandmepubkampot" class="text-white hover:text-sunset-yellow transition-colors"> |
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> |
|
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/> |
|
|
</svg> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-sunset-blue/30 pt-8 text-center"> |
|
|
<p class="text-sm text-sunset-yellow/80 mb-2">Designed by drunks. Refined by code.</p> |
|
|
<p class="text-xs text-white/60">© You & Me Pub & Hostel 2024. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const lazyLoadImages = document.querySelectorAll('.lazy-load'); |
|
|
|
|
|
const lazyLoad = function(target) { |
|
|
const io = new IntersectionObserver(function(entries, observer) { |
|
|
entries.forEach(function(entry) { |
|
|
if (entry.isIntersecting) { |
|
|
const img = entry.target; |
|
|
if (img.dataset.src) { |
|
|
img.src = img.dataset.src; |
|
|
} |
|
|
img.classList.add('loaded'); |
|
|
observer.unobserve(img); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
io.observe(target); |
|
|
}; |
|
|
|
|
|
lazyLoadImages.forEach(lazyLoad); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateEventContent() { |
|
|
const events = [ |
|
|
{ time: "8:00 PM", description: "Open Mic Night" }, |
|
|
{ time: "5:00-7:00 PM", description: "$1 Beers Happy Hour" }, |
|
|
{ description: "Free shot if you say: \"Sticky Mango\"", highlight: true } |
|
|
]; |
|
|
|
|
|
const eventContent = document.getElementById('event-content'); |
|
|
eventContent.innerHTML = ''; |
|
|
|
|
|
events.forEach(event => { |
|
|
const p = document.createElement('p'); |
|
|
p.className = 'text-lg'; |
|
|
|
|
|
if (event.time) { |
|
|
const timeSpan = document.createElement('span'); |
|
|
timeSpan.className = 'font-bold'; |
|
|
timeSpan.textContent = event.time; |
|
|
p.appendChild(timeSpan); |
|
|
p.appendChild(document.createTextNode(' - ' + event.description)); |
|
|
} else { |
|
|
p.className += ' font-bold'; |
|
|
if (event.highlight) { |
|
|
p.className += ' text-sunset-pink'; |
|
|
} |
|
|
p.textContent = event.description; |
|
|
} |
|
|
|
|
|
eventContent.appendChild(p); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
updateEventContent(); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const lazyImages = document.querySelectorAll('.lazy-load'); |
|
|
lazyImages.forEach(img => { |
|
|
img.classList.add('loaded'); |
|
|
}); |
|
|
}, 500); |
|
|
}); |
|
|
</script> |
|
|
|
|
|
|
|
|
<script type="application/ld+json"> |
|
|
{ |
|
|
"@context": "https://schema.org", |
|
|
"@type": "BarOrPub", |
|
|
"name": "You & Me Pub & Hostel", |
|
|
"image": "https://youandme.pub/logo.jpg", |
|
|
"@id": "https://youandme.pub", |
|
|
"url": "https://youandme.pub", |
|
|
"telephone": "+85512345678", |
|
|
"address": { |
|
|
"@type": "PostalAddress", |
|
|
"streetAddress": "123 Riverside Road", |
|
|
"addressLocality": "Kampot", |
|
|
"addressCountry": "KH" |
|
|
}, |
|
|
"geo": { |
|
|
"@type": "GeoCoordinates", |
|
|
"latitude": 10.481992, |
|
|
"longitude": 104.181272 |
|
|
}, |
|
|
"openingHoursSpecification": { |
|
|
"@type": "OpeningHoursSpecification", |
|
|
"dayOfWeek": [ |
|
|
"Monday", |
|
|
"Tuesday", |
|
|
"Wednesday", |
|
|
"Thursday", |
|
|
"Friday", |
|
|
"Saturday", |
|
|
"Sunday" |
|
|
], |
|
|
"opens": "12:00", |
|
|
"closes": "00:00" |
|
|
}, |
|
|
"priceRange": "$", |
|
|
"servesCuisine": "Bar food, Pub grub" |
|
|
} |
|
|
</script> |
|
|
|
|
|
|
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> |
|
|
<script> |
|
|
window.dataLayer = window.dataLayer || []; |
|
|
function gtag(){dataLayer.push(arguments);} |
|
|
gtag('js', new Date()); |
|
|
gtag('config', 'G-XXXXXXXXXX'); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=steake/uandme2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
