Hayırlı olsun hocam size ufak bir hediye
Ürün Görsellerini Kendin Eklersin linkleride shopier linklerini koy geç
<!DOCTYPE html>
<html lang="tr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>CilVil - Doğal Lezzetler</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#D4AF37", // A warm, luxurious gold
"background-light": "#F9F6F1", // A creamy off-white
"background-dark": "#1A1A1A", // A deep, rich black
"text-light": "#4B3F35",
"text-dark": "#E5E0D8",
"card-light": "#FFFFFF",
"card-dark": "#2C2C2C",
"accent-light": "#EFEAE4",
"accent-dark": "#3D3D3D",
},
fontFamily: {
display: ["Playfair Display", "serif"],
body: ["Poppins", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.5rem",
},
},
},
};
</script>
<style>
.material-icons-outlined {
font-size: inherit;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark font-body text-text-light dark:text-text-dark transition-colors duration-300">
<div class="relative" id="root">
<header class="sticky top-0 z-50 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-sm">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<a class="font-display text-2xl font-bold text-text-light dark:text-text-dark" href="#">CilVil</a>
<nav class="hidden md:flex items-center space-x-8">
<a class="hover:text-primary transition-colors" href="#products">Ürünlerimiz</a>
<a class="hover:text-primary transition-colors" href="#about">Hikayemiz</a>
<a class="hover:text-primary transition-colors" href="#contact">İletişim</a>
</nav>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full hover:bg-accent-light dark:hover:bg-accent-dark transition-colors">
<span class="material-icons-outlined">search</span>
</button>
<button class="p-2 rounded-full hover:bg-accent-light dark:hover:bg-accent-dark transition-colors relative">
<span class="material-icons-outlined">shopping_bag</span>
<span class="absolute top-0 right-0 h-2 w-2 bg-primary rounded-full"></span>
</button>
<button class="md:hidden p-2 rounded-full hover:bg-accent-light dark:hover:bg-accent-dark transition-colors">
<span class="material-icons-outlined">menu</span>
</button>
</div>
</div>
</div>
</header>
<main>
<section class="relative h-[60vh] md:h-[80vh] min-h-[500px] flex items-center">
<div class="absolute inset-0 bg-black/40 z-10"></div>
<img alt="Lush dates on a palm tree frond" class="absolute inset-0 w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAkPOysO9kRI8Cxi3z8lzWwhBXxXmOZcN3xvXO-26zRtMJB7DSRPAIw7J-UhMizU-_xym_h76oxL4Y7-zKAdpy4w9JqYQS6yD9cEAS1mN3Nnv2DnZyfGtWi4m7ElTemgsPHyQK6kQ-nXaqKXa0wDKhY9zwsZNYqJwMdZ8JgWN3hZDgAFSPcAjeKFSAVtFnB7_2ziYzjFJ_trm6rImqh7my-JvZpIku3XqtFC1QnkBSP1x3vqliO3HOmgtc60blbHHsVFAPTVIQdvPZY"/>
<div class="container mx-auto px-6 relative z-20 text-center">
<h1 class="font-display text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-4">Doğanın En Tatlı Hediyesi</h1>
<p class="text-white/90 text-lg md:text-xl max-w-2xl mx-auto mb-8">Birinci sınıf hurmalarla hazırlanan eşsiz koleksiyonumuzu keşfedin.</p>
<a class="bg-primary text-white font-semibold py-3 px-8 rounded-full hover:opacity-90 transition-opacity" href="#products">Koleksiyonu Keşfet</a>
</div>
</section>
<section class="py-16 sm:py-24" id="products">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="font-display text-3xl md:text-4xl font-semibold text-text-light dark:text-text-dark">Özenle Seçtiklerimiz</h2>
<p class="mt-4 text-lg text-text-light/80 dark:text-text-dark/80 max-w-xl mx-auto">Klasik Medjool hurmasından artizan lezzetlere uzanan geniş ürün yelpazesi.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow-sm overflow-hidden group flex flex-col">
<div class="relative overflow-hidden">
<img alt="A box of premium Medjool dates" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCkcX2m7KCBLlgQwYQrhANzV8l5jbr6-W-Gl7naOipZBJFw1bXS99QrKdyJASo78kF4fWTPCs1WP1-j4RK-DHpmjQCBNa0NgkEvSosFHTOi-mcq96_LpkHcIqheAOEtsHmRnmCGxAUZFx4yH7ngqIUeFbeW524CQcrma28WLZHdoOvGikmii06R4q5mJD2hw1HkfDS43AgEPeDtdmFm3tv_WTU9w5-eV8X66CQetPl8v3rMeAZOn3hwGyShvEmC7ppVxvQvhWtQsDtj"/>
<div class="absolute top-4 right-4 bg-primary/90 text-white text-xs font-semibold px-2 py-1 rounded">ÇOK SATAN</div>
</div>
<div class="p-6 flex-grow flex flex-col">
<h3 class="font-display text-xl font-semibold text-text-light dark:text-text-dark mb-2">Medjool Hurma Kutusu</h3>
<p class="text-text-light/70 dark:text-text-dark/70 text-sm mb-4 flex-grow">Özenle paketlenmiş, dolgun ve lezzetli Medjool hurmaları. Doğanın en saf hali.</p>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-semibold text-primary">349.99 ₺</span>
<button class="bg-primary text-white py-2 px-4 rounded-md hover:opacity-90 transition-opacity flex items-center gap-2 text-sm">
<span class="material-icons-outlined text-base">add_shopping_cart</span>
Ekle
</button>
</div>
</div>
</div>
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow-sm overflow-hidden group flex flex-col">
<div class="relative overflow-hidden">
<img alt="Pistachio-filled chocolate covered dates" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdSlWhsCnOWdyFX7DCussMPgsO27fZGSSK4e2NE3rj9OZ1EDE39axGnpmRGDvsULkXP8xVoAnv9t6Vrke1bZL5m7ql8HlUlD4b-E9HtKhCyzvpKLiCH4oJMD2pgViwghpZbp-DzQKlIm1Z7dMplPHLHNyizlddFV_7QDfgDEjtUBVd4sMUtyEKHqjWWBR6vV9IhbeWH4WqbKmdce9MpAUtTNHlQ2LKUV8bX9NtQ5rSrY4lzvb89NTGYbW6Vo79kr_RNudHWr-SfXYe"/>
<div class="absolute top-4 left-4 bg-teal-500 text-white text-xs font-semibold px-2 py-1 rounded">YENİ</div>
</div>
<div class="p-6 flex-grow flex flex-col">
<h3 class="font-display text-xl font-semibold text-text-light dark:text-text-dark mb-2">Antep Fıstıklı Hurma</h3>
<p class="text-text-light/70 dark:text-text-dark/70 text-sm mb-4 flex-grow">Pürüzsüz sütlü çikolata ile kaplanmış, içi kadifemsi Antep fıstığı kreması dolgulu hurmalar.</p>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-semibold text-primary">425.50 ₺</span>
<button class="bg-primary text-white py-2 px-4 rounded-md hover:opacity-90 transition-opacity flex items-center gap-2 text-sm">
<span class="material-icons-outlined text-base">add_shopping_cart</span>
Ekle
</button>
</div>
</div>
</div>
<div class="bg-card-light dark:bg-card-dark rounded-lg shadow-sm overflow-hidden group flex flex-col">
<div class="relative overflow-hidden">
<img alt="A jar of date molasses" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300" src="https://lh3.googleusercontent.com/aida-public/AB6AXuClHrLiyhmnnWqLoAfE1Ccs_XqKLg8WLwPP5XU1MHYNHv7EnjtroyHW_HJtoxfsF-dIteb_ch_kap4H4BrORiJD_wFUdhflnmmfG6XoxtawbCIPKq29tmVFinzC-mv7TBx6jTmixuVpumRqMponxG2pkoNGcQmlrDFoUNI7PEE1V6PzOorr4TOie8J_1fGLpgv3kVfqw9Lnm634LlBkqOfeaIIK8uPXqEZ1rr5-NLtaEDpE9Oaxg4aK7BCKrSI6hsNQKzirV5zkKNEf"/>
</div>
<div class="p-6 flex-grow flex flex-col">
<h3 class="font-display text-xl font-semibold text-text-light dark:text-text-dark mb-2">Hurma Pekmezi</h3>
<p class="text-text-light/70 dark:text-text-dark/70 text-sm mb-4 flex-grow">Doğal ve katkısız, kahvaltılarınızın ve tariflerinizin vazgeçilmezi olacak besleyici bir lezzet.</p>
<div class="flex justify-between items-center mt-auto">
<span class="text-lg font-semibold text-primary">149.99 ₺</span>
<button class="bg-primary text-white py-2 px-4 rounded-md hover:opacity-90 transition-opacity flex items-center gap-2 text-sm">
<span class="material-icons-outlined text-base">add_shopping_cart</span>
Ekle
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-accent-light dark:bg-accent-dark py-16 sm:py-24" id="about">
<div class="container mx-auto px-6">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<img alt="A beautiful oasis with palm trees and a clear sky" class="rounded-lg shadow-lg w-full h-auto object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCDOBCRM2YxtFxqm6CmcCYE5sK_qT3XlgElYlb9y1pPZIdlQUIbC3lhWVPJDvlkp6bVSvcwxl01GDaXk6bN1fcr154_FKASyBaXT880VZLJYiGykygXQvM86H4mNBr-zXyGeHPjs7ycPNVD4XXzyohFA75wQoX-k4j_bB0V8fqAdKFravM2ng2fiJ_O6H6kQLSsQBU1D442hl0L66UPAENdXXgL6cZ-kQ9VjrDjXtOO65_ULu9k4ZWkj1KN_3f339d6PNJbuMzXDsdg"/>
</div>
<div class="max-w-xl">
<h2 class="font-display text-3xl md:text-4xl font-semibold text-text-light dark:text-text-dark">Vahamızdan Sofranıza</h2>
<p class="mt-4 text-text-light/80 dark:text-text-dark/80">Hikayemiz, nesillerdir dünyanın en lezzetli hurmalarını yetiştirme sanatını mükemmelleştiren çiftçilerin bulunduğu, güneşli topraklarda başlıyor. Bu mirası, sadece en iyi meyveleri seçerek onurlandırıyor ve her lokmanın kalite ve geleneğin bir kanıtı olmasını sağlıyoruz.</p>
<p class="mt-4 text-text-light/80 dark:text-text-dark/80">CilVil olarak saflığa, zarafete ve paylaşmanın basit sevincine inanıyoruz. Misyonumuz, bu kadim süper meyveyi her duruma uygun modern bir lezzete dönüştürmektir.</p>
<a class="inline-block mt-8 bg-primary text-white font-semibold py-3 px-8 rounded-full hover:opacity-90 transition-opacity" href="#">Hakkımızda Daha Fazla Bilgi</a>
</div>
</div>
</div>
</section>
<section class="py-16 sm:py-24" id="contact">
<div class="container mx-auto px-6 text-center">
<h2 class="font-display text-3xl md:text-4xl font-semibold text-text-light dark:text-text-dark">İletişimde Kalın</h2>
<p class="mt-4 text-lg text-text-light/80 dark:text-text-dark/80 max-w-xl mx-auto">Özel teklifler almak ve yeni koleksiyonlardan ilk siz haberdar olmak için bültenimize kaydolun.</p>
<form class="mt-8 max-w-lg mx-auto flex flex-col sm:flex-row gap-4">
<input class="w-full flex-grow px-4 py-3 rounded-md border-gray-300 dark:border-gray-600 bg-background-light dark:bg-card-dark focus:ring-primary focus:border-primary transition-colors" placeholder="E-posta adresinizi girin" type="email"/>
<button class="bg-primary text-white font-semibold py-3 px-8 rounded-md hover:opacity-90 transition-opacity" type="submit">Abone Ol</button>
</form>
</div>
</section>
</main>
<footer class="bg-accent-light dark:bg-accent-dark border-t border-gray-200 dark:border-gray-700">
<div class="container mx-auto px-6 py-12">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8">
<div class="col-span-2 lg:col-span-2">
<a class="font-display text-2xl font-bold text-text-light dark:text-text-dark" href="#">CilVil</a>
<p class="mt-4 text-sm text-text-light/70 dark:text-text-dark/70 max-w-xs">Tarlalarımızdan sofranıza özenle ulaştırılan birinci sınıf hurmalar ve şekerlemeler.</p>
</div>
<div>
<h4 class="font-semibold text-text-light dark:text-text-dark mb-4">Mağaza</h4>
<ul class="space-y-2 text-sm text-text-light/70 dark:text-text-dark/70">
<li><a class="hover:text-primary transition-colors" href="#">Tüm Ürünler</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Hediye Kutuları</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Yeni Gelenler</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Kurumsal Hediyeler</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold text-text-light dark:text-text-dark mb-4">Hakkımızda</h4>
<ul class="space-y-2 text-sm text-text-light/70 dark:text-text-dark/70">
<li><a class="hover:text-primary transition-colors" href="#">Hikayemiz</a></li>
<li><a class="hover:text-primary transition-colors" href="#">İletişim</a></li>
<li><a class="hover:text-primary transition-colors" href="#">SSS</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold text-text-light dark:text-text-dark mb-4">Bizi Takip Edin</h4>
<div class="flex space-x-4">
<a class="text-text-light/70 dark:text-text-dark/70 hover:text-primary transition-colors" href="#">
<svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path clip-rule="evenodd" 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" fill-rule="evenodd"></path></svg>
</a>
<a class="text-text-light/70 dark:text-text-dark/70 hover:text-primary transition-colors" href="#">
<svg aria-hidden="true" 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.85s-.011 3.585-.069 4.85c-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.069-4.85.069s-3.585-.011-4.85-.069c-3.225-.149-4.771-1.664-4.919-4.919-.058-1.265-.069-1.645-.069-4.85s.011-3.585.069-4.85c.149-3.225 1.664-4.771 4.919-4.919 1.266-.058 1.644-.069 4.85-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948s.014 3.667.072 4.947c.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072s3.667-.014 4.947-.072c4.358-.2 6.78-2.618 6.98-6.98.059-1.281.073-1.689.073-4.948s-.014-3.667-.072-4.947c-.2-4.358-2.618-6.78-6.98-6.98C15.667.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.88 1.44 1.44 0 000-2.88z"></path></svg>
</a>
<a class="text-text-light/70 dark:text-text-dark/70 hover:text-primary transition-colors" href="#">
<svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.71v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg>
</a>
</div>
</div>
</div>
<div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-600 text-center text-sm text-text-light/60 dark:text-text-dark/60">
<p>© 2024 CilVil. Tüm Hakları Saklıdır.</p>
</div>
</div>
</footer>
</div>
</body></html>