Spaces:

nkjoy
/

savory-eats-delight

Running

App Files Files Community

savory-eats-delight / index.html

nkjoy

전체 한국어로 줘요

03a2ff7 verified 3 months ago

raw

history blame contribute delete

26.1 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Savory Eats Delight \| Gourmet Dining Experience</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
	<script src="components/navbar.js"></script>
	<script src="components/footer.js"></script>
	<script src="components/review-card.js"></script>
	</head>
	<body class="bg-gray-50">
	<custom-navbar></custom-navbar>

	<!-- Hero Section -->
	<section class="relative h-screen flex items-center justify-center bg-cover bg-center" style="background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('http://static.photos/food/1200x630/42');">
	<div class="container mx-auto px-6 text-center text-white">
	<h1 class="text-5xl md:text-7xl font-bold mb-6">Savory Eats Delight</h1>
	<p class="text-xl md:text-2xl mb-8">Where every bite tells a story</p>
	<div class="flex flex-col md:flex-row justify-center gap-4">
	<a href="#menu" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-lg text-lg font-semibold transition duration-300">View Menu</a>
	<a href="#reservation" class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 text-white px-8 py-3 rounded-lg text-lg font-semibold transition duration-300">Reserve Table</a>
	</div>
	</div>
	</section>

	<!-- Signature Dishes -->
	<section class="py-20 bg-white">
	<div class="container mx-auto px-6">
	<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">시그니처 요리</h2>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<!-- Dish 1 -->
	<div class="bg-white shadow-xl rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
	<img src="http://static.photos/food/640x360/1" alt="Truffle Pasta" class="w-full h-64 object-cover">
	<div class="p-6">
	<h3 class="text-2xl font-semibold mb-2">트러플 페이스트</h3>
	<p class="text-gray-600 mb-4">수제 파스타에 블랙 트러플과 파르메산 크림 소스</p>
	<span class="text-amber-600 font-bold text-xl">$24.99</span>
	</div>
	</div>
	<!-- Dish 2 -->
	<div class="bg-white shadow-xl rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
	<img src="http://static.photos/food/640x360/2" alt="Beef Wellington" class="w-full h-64 object-cover">
	<div class="p-6">
	<h3 class="text-2xl font-semibold mb-2">클래식 비프 웰링턴</h3>
	<p class="text-gray-600 mb-4">프리미엄 쇠고기 안심을 퍼프 페이스트리로 감싸 완성</p>
	<span class="text-amber-600 font-bold text-xl">$38.99</span>
	</div>
	</div>
	<!-- Dish 3 -->
	<div class="bg-white shadow-xl rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
	<img src="http://static.photos/food/640x360/3" alt="Chocolate Souffle" class="w-full h-64 object-cover">
	<div class="p-6">
	<h3 class="text-2xl font-semibold mb-2">초콜릿 수플레</h3>
	<p class="text-gray-600 mb-4">진한 다크 초콜릿 수플레에 바닐라 빈 아이스크림</p>
	<span class="text-amber-600 font-bold text-xl">$14.99</span>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Menu Section -->
	<section id="menu" class="py-20 bg-gray-100">
	<div class="container mx-auto px-6">
	<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">메뉴</h2>
	<!-- Appetizers -->
	<div class="mb-16">
	<h3 class="text-2xl font-semibold mb-8 border-b-2 border-amber-600 pb-2 inline-block">애피타이저</h3>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div class="bg-white p-6 shadow-md rounded-lg">
	<div class="flex justify-between items-start">
	<div>
	<h4 class="text-xl font-semibold">브루스케타 트리오</h4>
	<p class="text-gray-600">구운 빵 위에 토마토, 바질, 발사믹 글레이즈</p>
	</div>
	<span class="text-amber-600 font-bold">$12.99</span>
	</div>
	</div>
	<div class="bg-white p-6 shadow-md rounded-lg">
	<div class="flex justify-between items-start">
	<div>
	<h4 class="text-xl font-semibold">바삭한 오징어 튀김</h4>
	<p class="text-gray-600">레몬 아이올리와 마리나라 소스가 곁들여진 오징어 튀김</p>
	</div>
	<span class="text-amber-600 font-bold">$14.99</span>
	</div>
	</div>
	<div class="bg-white p-6 shadow-md rounded-lg">
	<div class="flex justify-between items-start">
	<div>
	<h4 class="text-xl font-semibold">트러플 감자튀김</h4>
	<p class="text-gray-600">수제 감자튀김에 트러플 오일과 파르메산</p>
	</div>
	<span class="text-amber-600 font-bold">$10.99</span>
	</div>
	</div>
	<div class="bg-white p-6 shadow-md rounded-lg">
	<div class="flex justify-between items-start">
	<div>
	<h4 class="text-xl font-semibold">크랩 케이크</h4>
	<p class="text-gray-600">통게살에 코리앤더 라임 소스</p>
	</div>
	<span class="text-amber-600 font-bold">$16.99</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Main Courses -->
	<div class="mb-16">
	<h3 class="text-2xl font-semibold mb-8 border-b-2 border-amber-600 pb-2 inline-block">메인 코스</h3>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div class="bg-white p-6 shadow-md rounded-lg">
	<div class="flex justify-between items-start">
	<div>
	<h4 class="text-xl font-semibold">필레 미뇽</h4>
	<p class="text-gray-600">8온스 초식 쇠고기에 레드 와인 소스</p>
	</div>
	<span class="text-amber-600 font-bold">$32.99</span>
	</div>
	</div>
	<div class="bg-white p-6 shadow-md rounded-lg">
	<div class="flex justify-between items-start">
	<div>
	<h4 class="text-xl font-semibold">그릴 연어</h4>
	<p class="text-gray-600">야생 연어에 레몬 버터 소스</p>
	</div>
	<span class="text-amber-600 font-bold">$26.99</span>
	</div>
	</div>
	<div class="bg-white p-6 shadow-md rounded-lg">
	<div class="flex justify-between items-start">
	<div>
	<h4 class="text-xl font-semibold">버섯 리조또</h4>
	<p class="text-gray-600">크리미한 아르보리오 쌀과 야생 버섯</p>
	</div>
	<span class="text-amber-600 font-bold">$22.99</span>
	</div>
	</div>
	<div class="bg-white p-6 shadow-md rounded-lg">
	<div class="flex justify-between items-start">
	<div>
	<h4 class="text-xl font-semibold">램 립</h4>
	<p class="text-gray-600">허브 크러스트에 민트 주스와 계절 야채</p>
	</div>
	<span class="text-amber-600 font-bold">$29.99</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Desserts -->
	<div>
	<h3 class="text-2xl font-semibold mb-8 border-b-2 border-amber-600 pb-2 inline-block">디저트</h3>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div class="bg-white p-6 shadow-md rounded-lg">
	<div class="flex justify-between items-start">
	<div>
	<h4 class="text-xl font-semibold">크렘 브륄레</h4>
	<p class="text-gray-600">클래식 바닐라 빈 커스터드에 카라멜라이즈드 설탕</p>
	</div>
	<span class="text-amber-600 font-bold">$9.99</span>
	</div>
	</div>
	<div class="bg-white p-6 shadow-md rounded-lg">
	<div class="flex justify-between items-start">
	<div>
	<h4 class="text-xl font-semibold">티라미수</h4>
	<p class="text-gray-600">커피에 적신 레이디핑거와 마스카르포네 층층이</p>
	</div>
	<span class="text-amber-600 font-bold">$10.99</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Chef's Special -->
	<section class="py-20 bg-white">
	<div class="container mx-auto px-6">
	<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">셰프의 시그니처 메뉴</h2>
	<div class="flex flex-col md:flex-row items-center gap-12 bg-gray-100 rounded-xl p-8 shadow-lg">
	<div class="md:w-1/2">
	<img src="http://static.photos/people/640x360/5" alt="마리아 로드리게스 셰프" class="w-full h-auto rounded-lg object-cover">
	</div>
	<div class="md:w-1/2">
	<h3 class="text-2xl font-semibold mb-4">마리아 로드리게스 셰프를 소개합니다</h3>
	<p class="text-gray-600 mb-6">유럽의 미쉐린 스타 레스토랑에서 15년 이상의 경력을 쌓은 마리아 셰프는 신선한 제철 재료에 대한 열정으로 모든 요리에 정성을 다합니다.</p>
	<div class="bg-white p-6 rounded-lg shadow-md mb-6">
	<h4 class="text-xl font-semibold mb-2 text-amber-600">이번 주 특선</h4>
	<p class="text-gray-600">체리 컴포트와 야생 밥을 곁들인 오리 콩피 - 28,900원</p>
	</div>
	<div class="bg-white p-6 rounded-lg shadow-md">
	<h4 class="text-xl font-semibold mb-2 text-amber-600">셰프 추천</h4>
	<p class="text-gray-600">"홈메이드 소스와 함께하는 오늘의 신선한 해산물 타워를 2인분으로 즐겨보세요"</p>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Reservation Section -->
	<section id="reservation" class="py-20 bg-gray-100">
	<div class="container mx-auto px-6">
	<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">예약하기</h2>
	<div class="max-w-3xl mx-auto bg-white shadow-xl rounded-lg overflow-hidden">
	<div class="md:flex">
	<div class="md:w-1/2 bg-cover bg-center p-8" style="background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('http://static.photos/restaurant/640x360/8');">
	<h3 class="text-2xl font-semibold text-white mb-4">다이닝 경험</h3>
	<p class="text-white mb-6">탁월한 요리와 서비스를 즐기기 위해 지금 테이블을 예약하세요.</p>
	<div class="text-white">
	<div class="flex items-center mb-4">
	<i data-feather="phone" class="mr-3"></i>
	<span>(123) 456-7890</span>
	</div>
	<div class="flex items-center mb-4">
	<i data-feather="mail" class="mr-3"></i>
	<span>reservations@savoryeats.com</span>
	</div>
	<div class="flex items-center">
	<i data-feather="map-pin" class="mr-3"></i>
	<span>123 Gourmet Street, Foodville</span>
	</div>
	</div>
	</div>
	<div class="md:w-1/2 p-8">
	<form id="reservationForm" class="space-y-4">
	<div>
	<label for="name" class="block text-gray-700 mb-2">성함</label>
	<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500" required>
	</div>
	<div>
	<label for="email" class="block text-gray-700 mb-2">Email</label>
	<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500" required>
	</div>
	<div>
	<label for="phone" class="block text-gray-700 mb-2">전화번호</label>
	<input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500" required>
	</div>
	<div>
	<label for="date" class="block text-gray-700 mb-2">날짜</label>
	<input type="date" id="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500" required>
	</div>
	<div>
	<label for="time" class="block text-gray-700 mb-2">시간</label>
	<input type="time" id="time" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500" required>
	</div>
	<div>
	<label for="guests" class="block text-gray-700 mb-2">인원 수</label>
	<select id="guests" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
	<option value="1">1 Person</option>
	<option value="2">2 People</option>
	<option value="3">3 People</option>
	<option value="4">4 People</option>
	<option value="5">5 People</option>
	<option value="6">6 People</option>
	<option value="7">7 People</option>
	<option value="8">8+ People</option>
	</select>
	</div>
	<button type="submit" class="w-full bg-amber-600 hover:bg-amber-700 text-white font-semibold py-3 rounded-lg transition duration-300">예약하기</button>
	</form>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Map and Hours -->
	<section class="py-20 bg-white">
	<div class="container mx-auto px-6">
	<div class="flex flex-col md:flex-row">
	<div class="md:w-1/2 mb-10 md:mb-0 md:pr-8">
	<h2 class="text-3xl md:text-4xl font-bold mb-8">위치</h2>
	<div id="map" class="h-96 w-full rounded-xl shadow-lg"></div>
	</div>
	<div class="md:w-1/2 md:pl-8">
	<h2 class="text-3xl md:text-4xl font-bold mb-8">영업시간</h2>
	<div class="bg-gray-100 p-8 rounded-xl shadow-lg">
	<div class="space-y-6">
	<div class="flex justify-between border-b border-gray-300 pb-2">
	<span class="font-semibold">월요일 - 목요일</span>
	<span>오전 11:00 - 오후 10:00</span>
	</div>
	<div class="flex justify-between border-b border-gray-300 pb-2">
	<span class="font-semibold">금요일 - 토요일</span>
	<span>오전 11:00 - 오후 11:00</span>
	</div>
	<div class="flex justify-between">
	<span class="font-semibold">일요일</span>
	<span>오전 10:00 - 오후 9:00</span>
	</div>
	</div>
	<div class="mt-8">
	<h3 class="text-xl font-semibold mb-4">특별 안내</h3>
	<p class="text-gray-600">주말 브런치는 토,일 오전 10:00 - 오후 2:00</p>
	<p class="text-gray-600">해피아워 월-금 오후 4:00 - 6:00</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Customer Reviews -->
	<section class="py-20 bg-gray-100">
	<div class="container mx-auto px-6">
	<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">What Our Guests Say</h2>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<custom-review-card name="Michael Johnson" rating="5" date="March 15, 2023">
	The best dining experience I've had in years! The beef Wellington was cooked to perfection, and the service was impeccable.
	</custom-review-card>
	<custom-review-card name="Sarah Williams" rating="4" date="February 28, 2023">
	Wonderful atmosphere and delicious food. The chocolate soufflé was to die for. Will definitely be back!
	</custom-review-card>
	<custom-review-card name="David Chen" rating="5" date="January 10, 2023">
	Chef Maria is a genius. Every dish was a work of art. The wine pairing suggestions were spot on. A must-visit restaurant!
	</custom-review-card>
	</div>
	</div>
	</section>

	<custom-footer></custom-footer>

	<script src="script.js"></script>
	<script>
	feather.replace();

	// Initialize Google Map
	function initMap() {
	const location = { lat: 40.7128, lng: -74.0060 }; // Replace with your actual coordinates
	const map = new google.maps.Map(document.getElementById("map"), {
	zoom: 15,
	center: location,
	styles: [
	{
	"featureType": "all",
	"elementType": "labels.text.fill",
	"stylers": [
	{
	"color": "#ffffff"
	}
	]
	},
	{
	"featureType": "all",
	"elementType": "labels.text.stroke",
	"stylers": [
	{
	"color": "#000000"
	},
	{
	"lightness": 13
	}
	]
	},
	{
	"featureType": "administrative",
	"elementType": "geometry.fill",
	"stylers": [
	{
	"color": "#000000"
	}
	]
	},
	{
	"featureType": "administrative",
	"elementType": "geometry.stroke",
	"stylers": [
	{
	"color": "#144b53"
	},
	{
	"lightness": 14
	},
	{
	"weight": 1.4
	}
	]
	},
	{
	"featureType": "landscape",
	"elementType": "all",
	"stylers": [
	{
	"color": "#08304b"
	}
	]
	},
	{
	"featureType": "poi",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#0c4152"
	},
	{
	"lightness": 5
	}
	]
	},
	{
	"featureType": "road.highway",
	"elementType": "geometry.fill",
	"stylers": [
	{
	"color": "#000000"
	}
	]
	},
	{
	"featureType": "road.highway",
	"elementType": "geometry.stroke",
	"stylers": [
	{
	"color": "#0b434f"
	},
	{
	"lightness": 25
	}
	]
	},
	{
	"featureType": "road.arterial",
	"elementType": "geometry.fill",
	"stylers": [
	{
	"color": "#000000"
	}
	]
	},
	{
	"featureType": "road.arterial",
	"elementType": "geometry.stroke",
	"stylers": [
	{
	"color": "#0b3d51"
	},
	{
	"lightness": 16
	}
	]
	},
	{
	"featureType": "road.local",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#000000"
	}
	]
	},
	{
	"featureType": "transit",
	"elementType": "all",
	"stylers": [
	{
	"color": "#146474"
	}
	]
	},
	{
	"featureType": "water",
	"elementType": "all",
	"stylers": [
	{
	"color": "#021019"
	}
	]
	}
	]
	});
	const marker = new google.maps.Marker({
	position: location,
	map: map,
	title: "Savory Eats Delight",
	icon: {
	url: "https://maps.google.com/mapfiles/ms/icons/red-dot.png"
	}
	});
	}

	// Call the initMap function when the window loads
	window.onload = function() {
	initMap();

	// Set minimum date for reservation to today
	const today = new Date().toISOString().split('T')[0];
	document.getElementById('date').min = today;

	// Form submission
	document.getElementById('reservationForm').addEventListener('submit', function(e) {
	e.preventDefault();
	// Here you would typically send the form data to your server
	alert('Reservation submitted successfully! We will contact you shortly to confirm.');
	this.reset();
	});
	};
	</script>
	<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
	</body>
	</html>