websitesi / index.html
ziffir's picture
Add 1 files
c667b9c verified
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PATSO IN Şanlıurfa | Lezzetin Adresi</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">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root {
--primary: #FF5722;
--secondary: #FFC107;
--accent: #4CAF50;
--dark: #212121;
--light: #F5F5F5;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f8f4e9;
color: var(--dark);
scroll-behavior: smooth;
}
.hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center;
background-size: cover;
height: 100vh;
min-height: 600px;
}
.menu-item {
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--primary);
}
.menu-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--secondary);
}
.category-title {
position: relative;
display: inline-block;
color: white;
}
.category-title::after {
content: '';
position: absolute;
width: 50%;
height: 3px;
background-color: var(--secondary);
bottom: -5px;
left: 25%;
border-radius: 3px;
}
.map-container {
position: relative;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.map-marker {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
color: var(--primary);
font-size: 2.5rem;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: translate(-50%, -100%) scale(1); }
50% { transform: translate(-50%, -100%) scale(1.1); }
100% { transform: translate(-50%, -100%) scale(1); }
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background-color: var(--secondary);
bottom: 0;
left: 0;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.active-nav::after {
width: 100%;
}
.floating-btn {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.scroll-top {
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.scroll-top.active {
opacity: 1;
visibility: visible;
}
.food-card {
transition: all 0.3s ease;
overflow: hidden;
}
.food-card:hover .food-img {
transform: scale(1.05);
}
.food-img {
transition: all 0.5s ease;
}
.price-tag {
background-color: var(--primary);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-weight: bold;
position: absolute;
top: 1rem;
right: 1rem;
}
.section-title {
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
width: 70%;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
bottom: -8px;
left: 15%;
border-radius: 4px;
}
/* 3D Social Media Icons */
.social-icon {
transition: all 0.3s ease;
transform-style: preserve-3d;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
border-radius: 50%;
}
.social-icon:hover {
transform: translateY(-5px) rotateX(20deg);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
}
.facebook-icon {
background: linear-gradient(145deg, #3b5998, #4c70ba);
color: white;
}
.instagram-icon {
background: linear-gradient(145deg, #833ab4, #fd1d1d, #fcb045);
color: white;
}
.twitter-icon {
background: linear-gradient(145deg, #1da1f2, #1a91da);
color: white;
}
.youtube-icon {
background: linear-gradient(145deg, #ff0000, #cc0000);
color: white;
}
.whatsapp-icon {
background: linear-gradient(145deg, #25D366, #128C7E);
color: white;
}
.delivery-icon {
background: linear-gradient(145deg, #FF5722, #E64A19);
color: white;
}
</style>
</head>
<body>
<!-- Scroll to Top Button -->
<button id="scrollTop" class="scroll-top fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg z-50">
<i class="fas fa-arrow-up text-xl"></i>
</button>
<!-- Navigation -->
<nav class="bg-white shadow-md sticky top-0 z-40">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center">
<a href="#" class="flex items-center">
<img src="https://i.imgur.com/JqYeZ0P.png" alt="PATSO IN Şanlıurfa Logo" class="h-10 mr-3">
<span class="text-xl font-bold text-primary">PATSO IN <span class="text-secondary">Şanlıurfa</span></span>
</a>
</div>
<div class="hidden md:flex space-x-8">
<a href="#home" class="nav-link active-nav text-dark font-medium">Ana Sayfa</a>
<a href="#menu" class="nav-link text-dark font-medium">Menü</a>
<a href="#about" class="nav-link text-dark font-medium">Hakkımızda</a>
<a href="#contact" class="nav-link text-dark font-medium">İletişim</a>
</div>
<div class="md:hidden">
<button id="mobileMenuButton" class="text-dark focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobileMenu" class="hidden md:hidden bg-white shadow-lg">
<div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
<a href="#home" class="nav-link active-nav text-dark font-medium py-2">Ana Sayfa</a>
<a href="#menu" class="nav-link text-dark font-medium py-2">Menü</a>
<a href="#about" class="nav-link text-dark font-medium py-2">Hakkımızda</a>
<a href="#contact" class="nav-link text-dark font-medium py-2">İletişim</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero-section flex items-center justify-center text-center text-white">
<div class="container mx-auto px-4">
<h1 class="text-4xl md:text-6xl font-bold mb-6">Şanlıurfa'nın <span class="text-secondary">En Lezzetli</span> Patso'su</h1>
<p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Taze ve kaliteli malzemelerle hazırlanan özel lezzetler!</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#menu" class="bg-primary hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
<i class="fas fa-utensils mr-2"></i> Menüyü Gör
</a>
<a href="#contact" class="bg-secondary hover:bg-yellow-500 text-dark font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
<i class="fas fa-phone-alt mr-2"></i> Sipariş Ver
</a>
</div>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2">
<a href="#menu" class="text-white text-2xl floating-btn">
<i class="fas fa-chevron-down"></i>
</a>
</div>
</section>
<!-- Features Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12 section-title">Neden <span class="text-primary">Biz?</span></h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center p-6 rounded-lg bg-gradient-to-b from-gray-50 to-white hover:shadow-xl transition duration-300 border border-gray-100">
<div class="bg-primary text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-award text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Kaliteli Malzemeler</h3>
<p class="text-gray-600">Tüm ürünlerimizde en taze ve kaliteli malzemeleri kullanıyoruz. Günlük taze ekmek ve özenle seçilmiş etler.</p>
</div>
<div class="text-center p-6 rounded-lg bg-gradient-to-b from-gray-50 to-white hover:shadow-xl transition duration-300 border border-gray-100">
<div class="bg-accent text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-clock text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Hızlı Servis</h3>
<p class="text-gray-600">Siparişleriniz en kısa sürede hazırlanır ve sıcak bir şekilde size ulaştırılır. Ortalama 10 dakika!</p>
</div>
<div class="text-center p-6 rounded-lg bg-gradient-to-b from-gray-50 to-white hover:shadow-xl transition duration-300 border border-gray-100">
<div class="bg-secondary text-dark w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-heart text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Özel Tarifler</h3>
<p class="text-gray-600">Yılların tecrübesiyle geliştirdiğimiz özel soslar ve tariflerle benzersiz lezzetler sunuyoruz.</p>
</div>
</div>
</div>
</section>
<!-- Popular Items -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12 section-title">Öne Çıkan <span class="text-primary">Lezzetler</span></h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Item 1 -->
<div class="food-card bg-white rounded-lg overflow-hidden shadow-md">
<div class="relative h-48 overflow-hidden">
<img src="https://i.imgur.com/5X8Q2Zr.jpg" alt="Karışık Patso" class="food-img w-full h-full object-cover">
<span class="price-tag">70₺</span>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-2">Karışık Patso</h3>
<p class="text-gray-600 text-sm">Sucuk, sosis, kaşar ve özel soslarımızla hazırlanan nefis patso</p>
</div>
</div>
<!-- Item 2 -->
<div class="food-card bg-white rounded-lg overflow-hidden shadow-md">
<div class="relative h-48 overflow-hidden">
<img src="https://i.imgur.com/9zJbWQq.jpg" alt="Dana Burger Menü" class="food-img w-full h-full object-cover">
<span class="price-tag">200₺</span>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-2">Dana Burger Menü</h3>
<p class="text-gray-600 text-sm">Yanında Soğan Halkası, Patates, Turşu ve İçecek</p>
</div>
</div>
<!-- Item 3 -->
<div class="food-card bg-white rounded-lg overflow-hidden shadow-md">
<div class="relative h-48 overflow-hidden">
<img src="https://i.imgur.com/3QvV7tT.jpg" alt="Karışık Çıtır Pizza" class="food-img w-full h-full object-cover">
<span class="price-tag">220₺</span>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-2">Karışık Çıtır Pizza</h3>
<p class="text-gray-600 text-sm">İnce ve çıtır hamur üzerinde zengin malzemeler</p>
</div>
</div>
<!-- Item 4 -->
<div class="food-card bg-white rounded-lg overflow-hidden shadow-md">
<div class="relative h-48 overflow-hidden">
<img src="https://i.imgur.com/7KjYV9p.jpg" alt="Ayvalık Tost" class="food-img w-full h-full object-cover">
<span class="price-tag">80₺</span>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-2">Ayvalık Tost</h3>
<p class="text-gray-600 text-sm">Ayvalık usulü özel tostumuz</p>
</div>
</div>
</div>
<div class="text-center mt-10">
<a href="#menu" class="inline-block bg-primary hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
Tüm Menüyü Gör <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Menu Section -->
<section id="menu" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-4 section-title">Menümüz</h2>
<p class="text-center text-gray-600 mb-12">Geniş çeşit yelpazesi ile Şanlıurfa'nın en sevilen patso ve fast food menüsü</p>
<!-- Menu Categories -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Patso Category -->
<div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg">
<div class="bg-primary text-white py-3 px-4">
<h3 class="text-xl font-bold category-title">Patso Çeşitleri</h3>
</div>
<div class="p-4">
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Klasik Patso</h4>
<p class="text-gray-600 text-sm">Özel soslarımızla hazırlanan nefis patso</p>
</div>
<span class="font-bold text-primary">50₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Sucuklu Patso</h4>
<p class="text-gray-600 text-sm">Bol sucuklu özel patso</p>
</div>
<span class="font-bold text-primary">70₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Kaşarlı Patso</h4>
<p class="text-gray-600 text-sm">Bol kaşarlı özel patso</p>
</div>
<span class="font-bold text-primary">70₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Sosisli Patso</h4>
<p class="text-gray-600 text-sm">Sosis ve patso birlikte</p>
</div>
<span class="font-bold text-primary">70₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Karışık Patso</h4>
<p class="text-gray-600 text-sm">Sucuk, sosis, kaşar hepsi bir arada</p>
</div>
<span class="font-bold text-primary">70₺</span>
</div>
</div>
</div>
</div>
<!-- Tabak Patso Category -->
<div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg">
<div class="bg-accent text-white py-3 px-4">
<h3 class="text-xl font-bold category-title">Tabak Patso</h3>
</div>
<div class="p-4">
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Tabak Patso</h4>
<p class="text-gray-600 text-sm">Tabakta servis edilen patso</p>
</div>
<span class="font-bold text-primary">60₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Kaşarlı Tabak Patso</h4>
<p class="text-gray-600 text-sm">Tabakta bol kaşarlı</p>
</div>
<span class="font-bold text-primary">80₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Sosisli Tabak Patso</h4>
<p class="text-gray-600 text-sm">Tabakta sosisli</p>
</div>
<span class="font-bold text-primary">80₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Sucuklu Tabak Patso</h4>
<p class="text-gray-600 text-sm">Tabakta sucuklu</p>
</div>
<span class="font-bold text-primary">80₺</span>
</div>
</div>
</div>
</div>
<!-- Burger Category -->
<div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg">
<div class="bg-secondary text-dark py-3 px-4">
<h3 class="text-xl font-bold category-title">Burger Çeşitleri</h3>
</div>
<div class="p-4">
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Tavuk Burger</h4>
<p class="text-gray-600 text-sm">Nefis tavuk burger</p>
</div>
<span class="font-bold text-primary">70₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Tavuk Burger Double</h4>
<p class="text-gray-600 text-sm">Çift kat tavuk burger</p>
</div>
<span class="font-bold text-primary">100₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Tavuk Burger Menü</h4>
<p class="text-gray-600 text-sm">Yanında Soğan Halkası, Patates, Turşu, İçecek</p>
</div>
<span class="font-bold text-primary">100₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Köfte Burger</h4>
<p class="text-gray-600 text-sm">Özel köfteli burger</p>
</div>
<span class="font-bold text-primary">80₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Dana Burger Menü</h4>
<p class="text-gray-600 text-sm">Yanında Soğan Halkası, Patates, Turşu, İçecek</p>
</div>
<span class="font-bold text-primary">200₺</span>
</div>
</div>
</div>
</div>
<!-- Pizza Category -->
<div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg">
<div class="bg-primary text-white py-3 px-4">
<h3 class="text-xl font-bold category-title">Pizza Çeşitleri</h3>
</div>
<div class="p-4">
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Karışık Çıtır Pizza</h4>
<p class="text-gray-600 text-sm">İnce ve çıtır hamur üzerinde karışık malzemeler</p>
</div>
<span class="font-bold text-primary">220₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Karışık Pizza</h4>
<p class="text-gray-600 text-sm">Klasik karışık pizza</p>
</div>
<span class="font-bold text-primary">200₺</span>
</div>
</div>
</div>
</div>
<!-- Tost Category -->
<div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg">
<div class="bg-accent text-white py-3 px-4">
<h3 class="text-xl font-bold category-title">Tost Çeşitleri</h3>
</div>
<div class="p-4">
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Karışık Tost</h4>
<p class="text-gray-600 text-sm">Öğrenci dostu karışık tost</p>
</div>
<span class="font-bold text-primary">60₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Kaşarlı Tost</h4>
<p class="text-gray-600 text-sm">Bol kaşarlı tost</p>
</div>
<span class="font-bold text-primary">60₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Sucuklu Tost</h4>
<p class="text-gray-600 text-sm">Sucuklu tost</p>
</div>
<span class="font-bold text-primary">60₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Ayvalık Tost</h4>
<p class="text-gray-600 text-sm">Ayvalık usulü özel tost</p>
</div>
<span class="font-bold text-primary">80₺</span>
</div>
</div>
</div>
</div>
<!-- İçecek Category -->
<div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg">
<div class="bg-secondary text-dark py-3 px-4">
<h3 class="text-xl font-bold category-title">İçecekler</h3>
</div>
<div class="p-4">
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Kutu Kola</h4>
<p class="text-gray-600 text-sm">330ml kutu kola</p>
</div>
<span class="font-bold text-primary">40₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Şişe Kola</h4>
<p class="text-gray-600 text-sm">250ml şişe kola</p>
</div>
<span class="font-bold text-primary">36₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Litre Kola</h4>
<p class="text-gray-600 text-sm">1lt kola</p>
</div>
<span class="font-bold text-primary">60₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Çamlıca</h4>
<p class="text-gray-600 text-sm">Meyveli soda</p>
</div>
<span class="font-bold text-primary">30₺</span>
</div>
</div>
<div class="menu-item bg-white rounded-lg p-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg">Çay</h4>
<p class="text-gray-600 text-sm">Sıcak çay</p>
</div>
<span class="font-bold text-primary">10₺</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
<h2 class="text-3xl font-bold mb-6 section-title">PATSO IN <span class="text-primary">Şanlıurfa</span></h2>
<p class="text-gray-600 mb-4">Patso, Şanlıurfa Haliliye'de taze ve kaliteli malzemelerle hazırlanan fast food lezzetlerini sunan bir restoran. Uygun fiyatlarla, hızlı servisimiz ve lezzetli menümüzle sizi memnun etmeyi amaçlıyoruz.</p>
<p class="text-gray-600 mb-4">Menümüz patso çeşitlerinden burgerlere, tostlara ve özel yemeklere kadar her damak zevkine hitap ediyor. Patso çeşitlerimiz arasında klasik patso, tabak patso, sucuklu patso, kaşarlı patso ve sosisli patso bulunmaktadır.</p>
<p class="text-gray-600 mb-4">Burger ve sandviçlerimiz dana burger, tavuk burger ve sucuk sandviçten ibarettir. Tostlarımız karışık tost, kaşarlı tost ve sucuklu tost şeklindedir. Atıştırmalıklarımız nugget, şinitzel, soğan halkası ve cips'ten oluşmaktadır.</p>
<p class="text-gray-600">Özel yemeklerimiz kumru, mexicano, fahetta, wesmix ve köfte'dir. Siparişinizi Yemeksepeti, Trendyol ve diğer online sipariş platformlarından verebilirsiniz.</p>
<div class="mt-8 grid grid-cols-2 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm">
<div class="text-primary text-2xl mb-2">
<i class="fas fa-users"></i>
</div>
<h4 class="font-bold">10.000+</h4>
<p class="text-gray-600 text-sm">Mutlu Müşteri</p>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm">
<div class="text-primary text-2xl mb-2">
<i class="fas fa-utensils"></i>
</div>
<h4 class="font-bold">50+</h4>
<p class="text-gray-600 text-sm">Menü Çeşidi</p>
</div>
</div>
<!-- Delivery Platforms -->
<div class="mt-8">
<h4 class="font-semibold mb-4">Online Sipariş Platformları</h4>
<div class="flex flex-wrap gap-4">
<a href="#" class="delivery-icon social-icon w-12 h-12 flex items-center justify-center">
<i class="fas fa-motorcycle"></i>
</a>
<a href="#" class="bg-yellow-400 social-icon w-12 h-12 flex items-center justify-center">
<i class="fas fa-shopping-bag"></i>
</a>
<a href="#" class="bg-blue-500 social-icon w-12 h-12 flex items-center justify-center">
<i class="fas fa-store"></i>
</a>
</div>
</div>
</div>
<div class="lg:w-1/2">
<div class="grid grid-cols-2 gap-4">
<div class="rounded-lg overflow-hidden shadow-lg h-48">
<img src="https://i.imgur.com/8zJqX9a.jpg" alt="Restoran İçi" class="w-full h-full object-cover">
</div>
<div class="rounded-lg overflow-hidden shadow-lg h-48">
<img src="https://i.imgur.com/3kLmJ9T.jpg" alt="Patso Hazırlık" class="w-full h-full object-cover">
</div>
<div class="rounded-lg overflow-hidden shadow-lg h-48">
<img src="https://i.imgur.com/5X8Q2Zr.jpg" alt="Patso Çeşitleri" class="w-full h-full object-cover">
</div>
<div class="rounded-lg overflow-hidden shadow-lg h-48">
<img src="https://i.imgur.com/9zJbWQq.jpg" alt="Burger Çeşitleri" class="w-full h-full object-cover">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12 section-title">Müşteri <span class="text-primary">Yorumları</span></h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Ayşe K." class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Ayşe K.</h4>
<div class="flex text-yellow-400">
<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>
</div>
<p class="text-gray-600">"Şanlıurfa'da yediğim en lezzetli patso! Özellikle karışık patso ve ayran ikilisi muhteşem. Fiyat/performans oranı çok iyi."</p>
</div>
<!-- Testimonial 2 -->
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Mehmet T." class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Mehmet T.</h4>
<div class="flex text-yellow-400">
<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>
</div>
<p class="text-gray-600">"Öğrenci dostu fiyatlar ve bol porsiyonlar. Tavuk burger menü favorim, yanındaki patatesler de çok lezzetli."</p>
</div>
<!-- Testimonial 3 -->
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Zeynep A." class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Zeynep A.</h4>
<div class="flex text-yellow-400">
<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>
</div>
<p class="text-gray-600">"Çalışanlar çok ilgili ve güler yüzlü. Karışık çıtır pizza inanılmaz lezzetli, mutlaka denemelisiniz!"</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-primary text-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12 section-title">Bize <span class="text-secondary">Ulaşın</span></h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div>
<h3 class="text-xl font-semibold mb-6">İletişim Bilgileri</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-secondary text-dark p-3 rounded-full mr-4">
<i class="fas fa-map-marker-alt"></i>
</div>
<div>
<h4 class="font-semibold">Adres</h4>
<p class="text-gray-200">Ulubatlı, Yunus Emre Cd. No:95, 63300 Şanlıurfa Merkez, 63300 Haliliye/Şanlıurfa</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-secondary text-dark p-3 rounded-full mr-4">
<i class="fas fa-phone-alt"></i>
</div>
<div>
<h4 class="font-semibold">Telefon</h4>
<p class="text-gray-200">0414 123 45 67</p>
<p class="text-gray-200">0555 123 45 67 (WhatsApp)</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-secondary text-dark p-3 rounded-full mr-4">
<i class="fas fa-envelope"></i>
</div>
<div>
<h4 class="font-semibold">Email</h4>
<p class="text-gray-200">info@patsosanliurfa.com</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-secondary text-dark p-3 rounded-full mr-4">
<i class="fas fa-clock"></i>
</div>
<div>
<h4 class="font-semibold">Çalışma Saatleri</h4>
<p class="text-gray-200">Pazartesi - Cumartesi: 09:00 - 23:00</p>
<p class="text-gray-200">Pazar: 10:00 - 22:00</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="font-semibold mb-4">Sosyal Medya</h4>
<div class="flex space-x-4">
<a href="#" class="facebook-icon social-icon w-12 h-12 flex items-center justify-center">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="instagram-icon social-icon w-12 h-12 flex items-center justify-center">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="twitter-icon social-icon w-12 h-12 flex items-center justify-center">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="youtube-icon social-icon w-12 h-12 flex items-center justify-center">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="whatsapp-icon social-icon w-12 h-12 flex items-center justify-center">
<i class="fab fa-whatsapp"></i>
</a>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-6">Konumumuz</h3>
<div class="map-container h-96 bg-gray-200 relative">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Haliliye,Şanlıurfa&zoom=15&size=800x400&maptype=roadmap&markers=color:red%7CHaliliye,Şanlıurfa&key=YOUR_API_KEY" alt="Harita" class="w-full h-full object-cover">
<div class="map-marker">
<i class="fas fa-map-pin"></i>
</div>
</div>
<div class="mt-6">
<h4 class="font-semibold mb-4">Hızlı Sipariş</h4>
<form class="space-y-4">
<div>
<input type="text" placeholder="Adınız" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent">
</div>
<div>
<input type="tel" placeholder="Telefon Numaranız" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent">
</div>
<div>
<textarea placeholder="Siparişiniz ve Adres Bilgileriniz" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent"></textarea>
</div>
<button type="submit" class="bg-secondary hover:bg-yellow-500 text-dark font-bold py-3 px-6 rounded-lg transition duration-300 w-full">
<i class="fas fa-paper-plane mr-2"></i> Sipariş Gönder
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<a href="#" class="flex items-center">
<img src="https://i.imgur.com/JqYeZ0P.png" alt="PATSO IN Şanlıurfa Logo" class="h-10 mr-3">
<span class="text-xl font-bold text-white">PATSO IN <span class="text-secondary">Şanlıurfa</span></span>
</a>
<p class="mt-2 text-gray-400">Lezzetin Adresi</p>
</div>
<div class="flex flex-col items-center md:items-end">
<p class="text-gray-400 mb-2">© 2023 PATSO IN Şanlıurfa. Tüm hakları saklıdır.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Gizlilik Politikası</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Kullanım Şartları</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Çerez Politikası</a>
</div>
</div>
</div>
</div>
</footer>
<script>
// Mobile Menu Toggle
const mobileMenuButton = document.getElementById('mobileMenuButton');
const mobileMenu = document.getElementById('mobileMenu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Smooth Scrolling for Navigation Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu if open
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
});
});
// Update active navigation link on scroll
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-link');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - 300) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active-nav');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active-nav');
}
});
// Show/hide scroll to top button
const scrollTopBtn = document.getElementById('scrollTop');
if (window.pageYOffset > 300) {
scrollTopBtn.classList.add('active');
} else {
scrollTopBtn.classList.remove('active');
}
});
// Scroll to top functionality
document.getElementById('scrollTop').addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Form submission (prevent default for demo)
const forms = document.querySelectorAll('form');
forms.forEach(form => {
form.addEventListener('submit', (e) => {
e.preventDefault();
alert('Teşekkür ederiz! Siparişiniz alınmıştır. En kısa sürede sizinle iletişime geçilecektir.');
});
});
</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=ziffir/websitesi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>