From 413fa5f5c6f4666c5cc78286888c36723531d27c Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sat, 18 Oct 2025 09:22:16 +0000 Subject: [PATCH] feat: Add initial website structure and styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit introduces the core HTML structure, custom CSS styling, and JavaScript functionality for the Doğa Kuruyemiş website. It includes the homepage, about page, and contact page, along with essential assets and scripts for interactivity and responsiveness. Co-authored-by: sefaaydin --- assets/css/style.css | 934 +++++++++++++++++++++++++++++++++++++++++++ assets/img/README.md | 42 ++ assets/js/main.js | 349 ++++++++++++++++ hakkimizda.html | 523 ++++++++++++++++++++++++ iletisim.html | 429 ++++++++++++++++++++ index.html | 798 ++++++++++++++++++++++++++++++++++++ 6 files changed, 3075 insertions(+) create mode 100644 assets/css/style.css create mode 100644 assets/img/README.md create mode 100644 assets/js/main.js create mode 100644 hakkimizda.html create mode 100644 iletisim.html create mode 100644 index.html diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..0e7c202 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,934 @@ +/** + * Doğa Kuruyemiş - Custom Styles + * Bootstrap 5.3.7 ile uyumlu özel stiller + */ + +/* ==================== CSS Variables ==================== */ +:root { + --clr-primary: #7A5C3E; + --clr-accent: #C19A6B; + --clr-bg: #F3E9DD; + --clr-text: #2B2B2B; + --clr-white: #FFFFFF; + --clr-light: #FAF7F2; + --transition-base: all 0.3s ease; + --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); + --shadow-md: 0 4px 16px rgba(0,0,0,0.12); + --shadow-lg: 0 8px 24px rgba(0,0,0,0.16); +} + +/* ==================== Global Styles ==================== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + color: var(--clr-text); + background-color: var(--clr-bg); + line-height: 1.6; + overflow-x: hidden; +} + +/* Smooth scrolling */ +html { + scroll-behavior: smooth; +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + font-weight: 700; + line-height: 1.3; + color: var(--clr-primary); + margin-bottom: 1rem; +} + +h1 { font-size: 2.5rem; } +h2 { font-size: 2rem; } +h3 { font-size: 1.75rem; } +h4 { font-size: 1.5rem; } +h5 { font-size: 1.25rem; } +h6 { font-size: 1rem; } + +p { + margin-bottom: 1rem; + color: var(--clr-text); +} + +a { + color: var(--clr-primary); + text-decoration: none; + transition: var(--transition-base); +} + +a:hover { + color: var(--clr-accent); +} + +/* ==================== Navbar Styles ==================== */ +.navbar { + background-color: var(--clr-white); + padding: 1rem 0; + transition: var(--transition-base); + box-shadow: var(--shadow-sm); +} + +.navbar.scrolled { + box-shadow: var(--shadow-md); +} + +.navbar-brand { + font-size: 1.5rem; + font-weight: 700; + color: var(--clr-primary) !important; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.navbar-brand i { + color: var(--clr-accent); + font-size: 1.75rem; +} + +.navbar-nav .nav-link { + color: var(--clr-text); + font-weight: 500; + padding: 0.5rem 1rem; + margin: 0 0.25rem; + transition: var(--transition-base); + position: relative; +} + +.navbar-nav .nav-link:hover, +.navbar-nav .nav-link.active { + color: var(--clr-primary); +} + +.navbar-nav .nav-link.active::after { + content: ''; + position: absolute; + bottom: 0; + left: 1rem; + right: 1rem; + height: 3px; + background-color: var(--clr-accent); + border-radius: 2px; +} + +.navbar-toggler { + border-color: var(--clr-primary); +} + +.navbar-toggler:focus { + box-shadow: 0 0 0 0.25rem rgba(122, 92, 62, 0.25); +} + +/* ==================== Hero/Carousel Styles ==================== */ +.hero-carousel .carousel-item { + height: 500px; + position: relative; +} + +.hero-carousel .carousel-item img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.hero-carousel .carousel-caption { + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(8px); + padding: 2rem; + border-radius: 12px; + bottom: 3rem; + left: 50%; + right: auto; + transform: translateX(-50%); + max-width: 600px; +} + +.hero-carousel .carousel-caption h2 { + color: var(--clr-white); + font-size: 2.5rem; + margin-bottom: 1rem; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); +} + +.hero-carousel .carousel-caption p { + color: var(--clr-white); + font-size: 1.25rem; + margin-bottom: 0; + text-shadow: 1px 1px 2px rgba(0,0,0,0.3); +} + +/* ==================== Button Styles ==================== */ +.btn-primary { + background-color: var(--clr-primary); + border-color: var(--clr-primary); + color: var(--clr-white); + font-weight: 600; + padding: 0.75rem 1.5rem; + border-radius: 8px; + transition: var(--transition-base); +} + +.btn-primary:hover { + background-color: var(--clr-accent); + border-color: var(--clr-accent); + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.btn-outline-primary { + border-color: var(--clr-primary); + color: var(--clr-primary); + font-weight: 600; + padding: 0.75rem 1.5rem; + border-radius: 8px; + transition: var(--transition-base); +} + +.btn-outline-primary:hover { + background-color: var(--clr-primary); + border-color: var(--clr-primary); + color: var(--clr-white); + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +/* ==================== Card Styles ==================== */ +.card { + border: none; + border-radius: 12px; + box-shadow: var(--shadow-sm); + transition: var(--transition-base); + background-color: var(--clr-white); + overflow: hidden; +} + +.card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-lg); +} + +.card-img-top { + height: 200px; + object-fit: cover; + transition: var(--transition-base); +} + +.card:hover .card-img-top { + transform: scale(1.05); +} + +.card-title { + color: var(--clr-primary); + font-weight: 600; + font-size: 1.25rem; +} + +.card-text { + color: var(--clr-text); + font-size: 0.95rem; +} + +/* Product Cards */ +.product-card { + height: 100%; + display: flex; + flex-direction: column; +} + +.product-card .card-body { + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.product-card .card-footer { + background-color: var(--clr-light); + border-top: 2px solid var(--clr-bg); + padding: 1rem; +} + +.product-price { + font-size: 1.5rem; + font-weight: 700; + color: var(--clr-primary); +} + +/* Category Cards */ +.category-card { + text-align: center; + padding: 2rem; +} + +.category-card i { + font-size: 3rem; + color: var(--clr-accent); + margin-bottom: 1rem; +} + +/* ==================== Section Styles ==================== */ +.section { + padding: 4rem 0; +} + +.section-title { + text-align: center; + margin-bottom: 3rem; + position: relative; +} + +.section-title h2 { + font-size: 2.5rem; + color: var(--clr-primary); + margin-bottom: 0.5rem; +} + +.section-title p { + font-size: 1.1rem; + color: var(--clr-text); + opacity: 0.8; +} + +.section-title::after { + content: ''; + display: block; + width: 80px; + height: 4px; + background: linear-gradient(to right, var(--clr-primary), var(--clr-accent)); + margin: 1rem auto 0; + border-radius: 2px; +} + +/* ==================== Feature Icons ==================== */ +.feature-icon { + width: 80px; + height: 80px; + background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent)); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + box-shadow: var(--shadow-md); +} + +.feature-icon i { + font-size: 2rem; + color: var(--clr-white); +} + +.feature-box { + text-align: center; + padding: 2rem; + background: var(--clr-white); + border-radius: 12px; + box-shadow: var(--shadow-sm); + transition: var(--transition-base); + height: 100%; +} + +.feature-box:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-lg); +} + +.feature-box h4 { + margin-bottom: 1rem; +} + +/* ==================== Testimonials ==================== */ +.testimonial-card { + background: var(--clr-white); + padding: 2rem; + border-radius: 12px; + box-shadow: var(--shadow-sm); + height: 100%; + position: relative; +} + +.testimonial-card::before { + content: '\f10d'; + font-family: 'bootstrap-icons'; + position: absolute; + top: 1rem; + left: 1.5rem; + font-size: 2rem; + color: var(--clr-accent); + opacity: 0.3; +} + +.testimonial-text { + font-style: italic; + margin-bottom: 1.5rem; + padding-top: 1rem; +} + +.testimonial-author { + display: flex; + align-items: center; + gap: 1rem; +} + +.testimonial-author img { + width: 50px; + height: 50px; + border-radius: 50%; + object-fit: cover; +} + +.testimonial-author-info h6 { + margin-bottom: 0.25rem; + color: var(--clr-primary); +} + +.testimonial-author-info .text-muted { + font-size: 0.9rem; +} + +.testimonial-stars { + color: #FFB800; + margin-bottom: 0.5rem; +} + +/* ==================== Accordion (FAQ) ==================== */ +.accordion-item { + border: none; + margin-bottom: 1rem; + border-radius: 8px; + overflow: hidden; + box-shadow: var(--shadow-sm); +} + +.accordion-button { + background-color: var(--clr-white); + color: var(--clr-primary); + font-weight: 600; + font-size: 1.1rem; + padding: 1.25rem 1.5rem; +} + +.accordion-button:not(.collapsed) { + background-color: var(--clr-primary); + color: var(--clr-white); + box-shadow: none; +} + +.accordion-button:focus { + border-color: var(--clr-accent); + box-shadow: 0 0 0 0.25rem rgba(122, 92, 62, 0.25); +} + +.accordion-body { + padding: 1.5rem; + background-color: var(--clr-white); + color: var(--clr-text); +} + +/* ==================== Newsletter Section ==================== */ +.newsletter-section { + background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent)); + padding: 3rem 0; + color: var(--clr-white); +} + +.newsletter-section h3 { + color: var(--clr-white); + margin-bottom: 0.5rem; +} + +.newsletter-section p { + color: var(--clr-white); + opacity: 0.9; +} + +.newsletter-form { + max-width: 600px; + margin: 2rem auto 0; +} + +.newsletter-form .form-control { + padding: 0.75rem 1rem; + border: none; + border-radius: 8px; +} + +.newsletter-form .form-check-label { + color: var(--clr-white); + font-size: 0.9rem; +} + +.newsletter-form .form-check-input { + border-color: var(--clr-white); +} + +.newsletter-form .form-check-input:checked { + background-color: var(--clr-white); + border-color: var(--clr-white); +} + +/* ==================== Footer Styles ==================== */ +.footer { + background-color: var(--clr-primary); + color: var(--clr-white); + padding: 3rem 0 1rem; + margin-top: 4rem; +} + +.footer h5 { + color: var(--clr-white); + margin-bottom: 1.5rem; + font-size: 1.25rem; +} + +.footer p, +.footer a { + color: rgba(255, 255, 255, 0.85); + font-size: 0.95rem; + margin-bottom: 0.75rem; +} + +.footer a:hover { + color: var(--clr-white); + transform: translateX(4px); + display: inline-block; +} + +.footer-link { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.75rem; +} + +.footer-link i { + color: var(--clr-accent); + font-size: 1.1rem; +} + +.social-links { + display: flex; + gap: 1rem; + margin-top: 1rem; +} + +.social-links a { + width: 40px; + height: 40px; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: var(--transition-base); +} + +.social-links a:hover { + background-color: var(--clr-accent); + transform: translateY(-4px); +} + +.social-links i { + font-size: 1.25rem; + color: var(--clr-white); +} + +.footer-bottom { + border-top: 1px solid rgba(255, 255, 255, 0.1); + margin-top: 2rem; + padding-top: 1.5rem; + text-align: center; +} + +.footer-bottom p { + margin-bottom: 0; + font-size: 0.9rem; + opacity: 0.7; +} + +/* ==================== Back to Top Button ==================== */ +.back-to-top { + position: fixed; + bottom: 80px; + right: 20px; + width: 50px; + height: 50px; + background-color: var(--clr-primary); + color: var(--clr-white); + border: none; + border-radius: 50%; + display: none; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 999; + box-shadow: var(--shadow-md); + transition: var(--transition-base); +} + +.back-to-top:hover { + background-color: var(--clr-accent); + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.back-to-top i { + font-size: 1.5rem; +} + +.back-to-top.show { + display: flex; +} + +/* ==================== WhatsApp Floating Button ==================== */ +.whatsapp-float { + position: fixed; + bottom: 20px; + right: 20px; + width: 60px; + height: 60px; + background-color: #25D366; + color: var(--clr-white); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: var(--shadow-lg); + z-index: 1000; + transition: var(--transition-base); + text-decoration: none; +} + +.whatsapp-float:hover { + background-color: #20BA5A; + transform: scale(1.1); + color: var(--clr-white); +} + +.whatsapp-float i { + font-size: 2rem; +} + +/* ==================== Timeline Styles ==================== */ +.timeline { + position: relative; + padding: 2rem 0; +} + +.timeline::before { + content: ''; + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 3px; + background: linear-gradient(to bottom, var(--clr-primary), var(--clr-accent)); + transform: translateX(-50%); +} + +.timeline-item { + position: relative; + margin-bottom: 3rem; + display: flex; + align-items: center; +} + +.timeline-item:nth-child(odd) { + flex-direction: row; +} + +.timeline-item:nth-child(even) { + flex-direction: row-reverse; +} + +.timeline-content { + width: 45%; + background: var(--clr-white); + padding: 1.5rem; + border-radius: 12px; + box-shadow: var(--shadow-sm); + position: relative; +} + +.timeline-item:nth-child(odd) .timeline-content { + text-align: right; +} + +.timeline-item:nth-child(even) .timeline-content { + text-align: left; +} + +.timeline-year { + width: 10%; + text-align: center; + font-weight: 700; + color: var(--clr-primary); + font-size: 1.5rem; +} + +.timeline-marker { + width: 20px; + height: 20px; + background-color: var(--clr-accent); + border: 4px solid var(--clr-white); + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + box-shadow: var(--shadow-sm); + z-index: 1; +} + +/* ==================== Badge Styles ==================== */ +.badge-custom { + background-color: var(--clr-accent); + color: var(--clr-white); + padding: 0.5rem 1rem; + border-radius: 20px; + font-weight: 500; + margin: 0.25rem; + display: inline-block; +} + +/* ==================== Contact Form ==================== */ +.contact-form { + background: var(--clr-white); + padding: 2rem; + border-radius: 12px; + box-shadow: var(--shadow-md); +} + +.contact-form .form-label { + font-weight: 600; + color: var(--clr-primary); + margin-bottom: 0.5rem; +} + +.contact-form .form-control, +.contact-form .form-select { + padding: 0.75rem 1rem; + border: 2px solid var(--clr-bg); + border-radius: 8px; + transition: var(--transition-base); +} + +.contact-form .form-control:focus, +.contact-form .form-select:focus { + border-color: var(--clr-primary); + box-shadow: 0 0 0 0.25rem rgba(122, 92, 62, 0.15); +} + +.contact-info-card { + background: var(--clr-white); + padding: 1.5rem; + border-radius: 12px; + box-shadow: var(--shadow-sm); + margin-bottom: 1.5rem; + transition: var(--transition-base); +} + +.contact-info-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-4px); +} + +.contact-info-card i { + font-size: 2rem; + color: var(--clr-accent); + margin-bottom: 1rem; +} + +.contact-info-card h5 { + color: var(--clr-primary); + margin-bottom: 0.5rem; +} + +.contact-info-card p, +.contact-info-card a { + color: var(--clr-text); + margin-bottom: 0; +} + +/* Map Container */ +.map-container { + border-radius: 12px; + overflow: hidden; + box-shadow: var(--shadow-md); + margin-bottom: 1.5rem; +} + +.map-container iframe { + width: 100%; + height: 300px; + border: none; +} + +/* ==================== Responsive Styles ==================== */ +@media (max-width: 991px) { + .hero-carousel .carousel-item { + height: 400px; + } + + .hero-carousel .carousel-caption h2 { + font-size: 2rem; + } + + .hero-carousel .carousel-caption p { + font-size: 1rem; + } + + .timeline::before { + left: 30px; + } + + .timeline-item { + flex-direction: row !important; + padding-left: 60px; + } + + .timeline-content { + width: 100%; + text-align: left !important; + } + + .timeline-year { + position: absolute; + left: 0; + width: auto; + } + + .timeline-marker { + left: 30px; + transform: translateX(-50%); + } +} + +@media (max-width: 767px) { + h1 { font-size: 2rem; } + h2 { font-size: 1.75rem; } + h3 { font-size: 1.5rem; } + + .section { + padding: 3rem 0; + } + + .section-title h2 { + font-size: 2rem; + } + + .hero-carousel .carousel-item { + height: 350px; + } + + .hero-carousel .carousel-caption { + padding: 1.5rem; + bottom: 1rem; + } + + .hero-carousel .carousel-caption h2 { + font-size: 1.5rem; + } + + .hero-carousel .carousel-caption p { + font-size: 0.9rem; + } + + .feature-icon { + width: 60px; + height: 60px; + } + + .feature-icon i { + font-size: 1.5rem; + } + + .whatsapp-float { + width: 50px; + height: 50px; + } + + .whatsapp-float i { + font-size: 1.5rem; + } + + .back-to-top { + width: 45px; + height: 45px; + bottom: 70px; + } +} + +@media (max-width: 576px) { + .hero-carousel .carousel-item { + height: 300px; + } + + .card-img-top { + height: 150px; + } + + .footer { + padding: 2rem 0 1rem; + } + + .newsletter-section { + padding: 2rem 0; + } +} + +/* ==================== Utility Classes ==================== */ +.text-primary-custom { + color: var(--clr-primary) !important; +} + +.text-accent { + color: var(--clr-accent) !important; +} + +.bg-primary-custom { + background-color: var(--clr-primary) !important; +} + +.bg-accent { + background-color: var(--clr-accent) !important; +} + +.bg-light-custom { + background-color: var(--clr-bg) !important; +} + +/* Modal Adjustments */ +.modal-content { + border: none; + border-radius: 12px; + overflow: hidden; +} + +.modal-header { + background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent)); + color: var(--clr-white); + border: none; +} + +.modal-header .btn-close { + filter: brightness(0) invert(1); +} + +.modal-title { + color: var(--clr-white); +} + +.modal-body { + padding: 2rem; +} + +/* Loading States */ +img[loading="lazy"] { + background: var(--clr-bg); +} diff --git a/assets/img/README.md b/assets/img/README.md new file mode 100644 index 0000000..2a6e43d --- /dev/null +++ b/assets/img/README.md @@ -0,0 +1,42 @@ +# Image Assets + +This directory contains placeholder images for the Doğa Kuruyemiş website. + +## Image Requirements + +### Required Images: +1. **favicon-16x16.png** - 16x16px favicon +2. **favicon-32x32.png** - 32x32px favicon +3. **apple-touch-icon.png** - 180x180px Apple touch icon +4. **og-image.jpg** - 1200x630px Open Graph image for social media +5. **twitter-image.jpg** - 1200x600px Twitter card image + +### Recommended Images: +- Logo images +- Product photos (nuts, dried fruits) +- Category images +- Production facility photos +- Team photos + +## Current Setup + +Currently, the website uses placeholder images from: +- **Picsum Photos**: https://picsum.photos/ for hero carousel and general images +- **Pravatar**: https://i.pravatar.cc/ for customer testimonial avatars + +## Usage Notes + +Replace placeholder image URLs in HTML files with actual product images: +- Hero carousel images (1920x500px) +- Category cards (300x200px) +- Product cards (300x250px) +- About page images (800x600px) +- Contact page images (800x600px) + +## Image Optimization + +For best performance: +- Use WebP format where possible +- Compress images before upload +- Use appropriate dimensions +- Add descriptive alt text for accessibility diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..50c4d40 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,349 @@ +/** + * Doğa Kuruyemiş - Main JavaScript + * Bootstrap 5.3.7 ile uyumlu interaktif davranışlar + */ + +(function() { + 'use strict'; + + // ==================== DOM Elements ==================== + const navbar = document.querySelector('.navbar'); + const backToTopBtn = document.querySelector('.back-to-top'); + + // ==================== Navbar Scroll Shadow ==================== + /** + * Sayfa scroll'unda navbar'a shadow efekti ekler + */ + function handleNavbarScroll() { + if (window.scrollY > 20) { + navbar?.classList.add('scrolled'); + } else { + navbar?.classList.remove('scrolled'); + } + } + + // ==================== Back to Top Button ==================== + /** + * Back to top butonunun görünürlüğünü kontrol eder + */ + function handleBackToTop() { + if (window.scrollY > 200) { + backToTopBtn?.classList.add('show'); + } else { + backToTopBtn?.classList.remove('show'); + } + } + + /** + * Sayfanın en üstüne smooth scroll yapar + */ + function scrollToTop() { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + } + + // ==================== Carousel Auto-Interval ==================== + /** + * Bootstrap carousel için otomatik geçiş süresini ayarlar (5 saniye) + */ + function initializeCarousel() { + const carouselElement = document.querySelector('#heroCarousel'); + if (carouselElement) { + const carousel = new bootstrap.Carousel(carouselElement, { + interval: 5000, + wrap: true, + keyboard: true, + pause: 'hover' + }); + } + } + + // ==================== Product Modal Dynamic Content ==================== + /** + * Ürün detay modalına data-* attribute'larından dinamik içerik aktarır + */ + function initializeProductModals() { + const productModal = document.getElementById('productModal'); + + if (productModal) { + productModal.addEventListener('show.bs.modal', function(event) { + // Modal'ı tetikleyen button + const button = event.relatedTarget; + + // Data attribute'larından bilgileri al + const productName = button.getAttribute('data-product-name'); + const productDesc = button.getAttribute('data-product-desc'); + const productPrice = button.getAttribute('data-product-price'); + const productImage = button.getAttribute('data-product-image'); + const productWeight = button.getAttribute('data-product-weight'); + const productOrigin = button.getAttribute('data-product-origin'); + const productRoast = button.getAttribute('data-product-roast'); + const productAllergen = button.getAttribute('data-product-allergen'); + + // Modal içeriğini güncelle + const modalTitle = productModal.querySelector('.modal-title'); + const modalImage = productModal.querySelector('#modalProductImage'); + const modalDesc = productModal.querySelector('#modalProductDesc'); + const modalPrice = productModal.querySelector('#modalProductPrice'); + const modalWeight = productModal.querySelector('#modalProductWeight'); + const modalOrigin = productModal.querySelector('#modalProductOrigin'); + const modalRoast = productModal.querySelector('#modalProductRoast'); + const modalAllergen = productModal.querySelector('#modalProductAllergen'); + + if (modalTitle) modalTitle.textContent = productName; + if (modalImage) modalImage.src = productImage; + if (modalDesc) modalDesc.textContent = productDesc; + if (modalPrice) modalPrice.textContent = productPrice; + if (modalWeight) modalWeight.textContent = productWeight; + if (modalOrigin) modalOrigin.textContent = productOrigin; + if (modalRoast) modalRoast.textContent = productRoast; + if (modalAllergen) modalAllergen.textContent = productAllergen; + }); + } + } + + // ==================== Form Validation Enhancement ==================== + /** + * Bootstrap form validation'ı geliştirir + */ + function initializeFormValidation() { + // Newsletter form + const newsletterForm = document.getElementById('newsletterForm'); + if (newsletterForm) { + newsletterForm.addEventListener('submit', function(event) { + event.preventDefault(); + event.stopPropagation(); + + if (newsletterForm.checkValidity()) { + const email = newsletterForm.querySelector('input[type="email"]').value; + alert(`Thank you for subscribing! We'll send updates to ${email}`); + newsletterForm.reset(); + newsletterForm.classList.remove('was-validated'); + } else { + newsletterForm.classList.add('was-validated'); + } + }); + } + + // Contact form + const contactForm = document.getElementById('contactForm'); + if (contactForm) { + contactForm.addEventListener('submit', function(event) { + event.preventDefault(); + event.stopPropagation(); + + if (contactForm.checkValidity()) { + const name = contactForm.querySelector('#name').value; + const email = contactForm.querySelector('#email').value; + const subject = contactForm.querySelector('#subject').value; + + // Gerçek backend olmadığı için şimdilik alert göster + alert(`Thank you ${name}! Your message about "${subject}" has been received. We'll contact you at ${email} soon.`); + contactForm.reset(); + contactForm.classList.remove('was-validated'); + } else { + contactForm.classList.add('was-validated'); + } + }); + } + } + + // ==================== Smooth Scroll for Anchor Links ==================== + /** + * Sayfa içi anchor linkler için smooth scroll + */ + function initializeSmoothScroll() { + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const href = this.getAttribute('href'); + + // # veya boş href'leri atla + if (href === '#' || href === '#!') { + return; + } + + const target = document.querySelector(href); + if (target) { + e.preventDefault(); + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); + }); + } + + // ==================== Lazy Loading Enhancement ==================== + /** + * Lazy loading için fallback (eski tarayıcılar) + */ + function initializeLazyLoading() { + if ('loading' in HTMLImageElement.prototype) { + // Tarayıcı native lazy loading destekliyor + return; + } + + // Fallback: Intersection Observer ile lazy loading + const images = document.querySelectorAll('img[loading="lazy"]'); + + if ('IntersectionObserver' in window) { + const imageObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const img = entry.target; + img.src = img.dataset.src || img.src; + img.classList.add('loaded'); + observer.unobserve(img); + } + }); + }); + + images.forEach(img => imageObserver.observe(img)); + } + } + + // ==================== Testimonials Carousel Auto-Play ==================== + /** + * Müşteri yorumları carousel'i için otomatik oynatma + */ + function initializeTestimonialsCarousel() { + const testimonialsCarousel = document.querySelector('#testimonialsCarousel'); + if (testimonialsCarousel) { + new bootstrap.Carousel(testimonialsCarousel, { + interval: 6000, + wrap: true, + keyboard: true, + pause: 'hover' + }); + } + } + + // ==================== Active Nav Link Highlighter ==================== + /** + * Mevcut sayfaya göre navbar linkini aktif yapar + */ + function highlightActiveNavLink() { + const currentPath = window.location.pathname; + const navLinks = document.querySelectorAll('.navbar-nav .nav-link'); + + navLinks.forEach(link => { + const linkPath = new URL(link.href).pathname; + + // Anasayfa için özel kontrol + if (currentPath === '/' || currentPath.endsWith('/index.html')) { + if (linkPath.endsWith('/index.html') || linkPath === '/') { + link.classList.add('active'); + link.setAttribute('aria-current', 'page'); + } + } else if (linkPath === currentPath) { + link.classList.add('active'); + link.setAttribute('aria-current', 'page'); + } + }); + } + + // ==================== Navbar Collapse on Link Click (Mobile) ==================== + /** + * Mobilde menü linkine tıklandığında menüyü kapat + */ + function initializeMobileMenuClose() { + const navLinks = document.querySelectorAll('.navbar-nav .nav-link'); + const navbarCollapse = document.querySelector('.navbar-collapse'); + + navLinks.forEach(link => { + link.addEventListener('click', () => { + if (navbarCollapse && navbarCollapse.classList.contains('show')) { + const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse); + if (bsCollapse) { + bsCollapse.hide(); + } + } + }); + }); + } + + // ==================== Initialize Tooltips ==================== + /** + * Bootstrap tooltip'lerini başlat + */ + function initializeTooltips() { + const tooltipTriggerList = [].slice.call( + document.querySelectorAll('[data-bs-toggle="tooltip"]') + ); + tooltipTriggerList.map(function(tooltipTriggerEl) { + return new bootstrap.Tooltip(tooltipTriggerEl); + }); + } + + // ==================== Scroll Event Listener ==================== + /** + * Scroll eventlerini optimize edilmiş şekilde dinle + */ + let scrollTimeout; + function handleScroll() { + if (scrollTimeout) { + window.cancelAnimationFrame(scrollTimeout); + } + + scrollTimeout = window.requestAnimationFrame(() => { + handleNavbarScroll(); + handleBackToTop(); + }); + } + + // ==================== Event Listeners ==================== + /** + * Tüm event listener'ları ekle + */ + function attachEventListeners() { + // Scroll events + window.addEventListener('scroll', handleScroll, { passive: true }); + + // Back to top button click + if (backToTopBtn) { + backToTopBtn.addEventListener('click', scrollToTop); + } + + // Load event + window.addEventListener('load', () => { + handleNavbarScroll(); + handleBackToTop(); + }); + } + + // ==================== Initialization ==================== + /** + * Sayfa yüklendiğinde tüm fonksiyonları başlat + */ + function init() { + console.log('🌰 Doğa Kuruyemiş - Initializing...'); + + // Temel fonksiyonları başlat + highlightActiveNavLink(); + initializeCarousel(); + initializeTestimonialsCarousel(); + initializeProductModals(); + initializeFormValidation(); + initializeSmoothScroll(); + initializeLazyLoading(); + initializeMobileMenuClose(); + initializeTooltips(); + attachEventListeners(); + + console.log('✅ Doğa Kuruyemiş - Ready!'); + } + + // ==================== DOM Ready ==================== + /** + * DOM hazır olduğunda init fonksiyonunu çalıştır + */ + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } + +})(); diff --git a/hakkimizda.html b/hakkimizda.html new file mode 100644 index 0000000..4deadcf --- /dev/null +++ b/hakkimizda.html @@ -0,0 +1,523 @@ + + + + + + + + + + Hakkımızda - Doğa Kuruyemiş | Doğal Enerji, Taze Lezzet + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+

Doğa Kuruyemiş

+

Doğal Enerji, Taze Lezzet.

+

Kuruyemiş tutkumuz 2010 yılında küçük bir atölyede başladı. Bugün, Türkiye'nin dört bir yanına taze ve kaliteli ürünler sunuyoruz.

+
+
+ About Doğa Kuruyemiş +
+
+
+
+ + +
+
+
+

Hikayemiz

+

Zanaat ve tutku ile başlayan yolculuğumuz

+
+
+
+
+
+

Doğa Kuruyemiş, 2010 yılında kuruyemiş sevdalısı bir ailenin tutkusuyla kuruldu. Küçük bir atölyede, geleneksel kavrum yöntemleriyle başlayan yolculuğumuz, bugün modern teknoloji ve zanaat ustalığının birleşimiyle devam ediyor.

+ +

Kuruyemiş sektöründe kalite ve tazelik standartlarını yükseltmek için yola çıktık. Her ürünümüz, seçilmiş menşeilerden temin ediliyor ve günlük olarak özenle kavrularak hazırlanıyor. Fındıklarımız Giresun ve Ordu'dan, Antep fıstıklarımız Gaziantep ve Siirt'ten, bademlerimiz Kaliforniya'dan ve cevizlerimiz Manisa'dan geliyor.

+ +

Doğallığa olan inancımız hiç değişmedi. Ürünlerimizde hiçbir katkı maddesi, koruyucu veya yapay aroma kullanmıyoruz. Sadece doğanın sunduğu en saf lezzetleri, taze kavrum ile sofralarınıza getiriyoruz.

+ +

Müşteri memnuniyeti bizim için her şeyden önemli. Hızlı teslimat, güvenilir tedarik ve sürekli kalite kontrolü ile sizlere en iyi hizmeti sunmak için çalışıyoruz. Her pakette aynı tazelik, her üründe aynı kalite - bu bizim sözümüz.

+ +

Bugün Türkiye'nin birçok şehrindeki müşterilerimize hizmet vermenin gururunu yaşıyoruz. Onların güveni ve memnuniyeti, bizi daha iyiye taşıyan en büyük motivasyonumuz. Doğa Kuruyemiş ailesi olarak, doğal ve taze ürünleri sevdiklerinizle paylaşmanızı sağlamak için buradayız.

+
+
+
+
+
+
+ + +
+
+
+

Kalite & Tazelik

+

Ürünlerimizde neden bu kadar iddialıyız?

+
+
+ +
+
+
+

Kalite Standartlarımız

+
    +
  • + + Seçilmiş Menşei: Tüm ürünlerimiz, kaliteleriyle bilinen bölgelerden temin edilir. +
    • +
  • + + Günlük Kavrum: Her gün taze kavrulur, hiçbir ürün bayatlamaz. +
    • +
  • + + Katkısız Üretim: %100 doğal, hiçbir katkı maddesi kullanılmaz. +
    • +
  • + + Hijyen Standartları: ISO 22000 gıda güvenliği standartlarına uygun üretim. +
    • +
  • + + Kalite Kontrolü: Her parti ürün, laboratuvar testlerinden geçer. +
    • +
  • + + Özenli Paketleme: Vakumlu ve hava geçirmez ambalajlarla tazelik korunur. +
    • +
  • + + Hızlı Teslimat: Aynı gün hazırlık, 1-3 gün içinde teslim. +
    • +
+
+
+
+ + +
+ Our production facility +
+
+
+

100%

+

Natural Products

+
+
+
+
+

15+

+

Years Experience

+
+
+
+
+

10K+

+

Happy Customers

+
+
+
+
+

50+

+

Product Varieties

+
+
+
+
+
+
+
+ + +
+
+
+

Yolculuğumuz

+

Doğa Kuruyemiş'in kilometre taşları

+
+
+ +
+
+
Kuruluş
+

Küçük bir atölyede, aile şirketi olarak kuruyemiş tutkusuyla yola çıktık. İlk ürünümüz kavrulmuş fındık oldu.

+
+
2010
+
+
+ + +
+
+
İlk Mağaza
+

İstanbul'da ilk perakende mağazamızı açtık. Müşterilerimizle yüz yüze buluşmanın keyfini yaşadık.

+
+
2014
+
+
+ + +
+
+
Üretim Tesisi
+

Modern ve hijyenik koşullarda üretim yapabileceğimiz kendi tesisimizi kurduk. Kapasite 10 kat arttı.

+
+
2017
+
+
+ + +
+
+
E-Ticaret Başlangıcı
+

Online satış kanalımızı açtık. Türkiye'nin her yerine taze ürünler göndermeye başladık.

+
+
2019
+
+
+ + +
+
+
ISO Sertifikası
+

ISO 22000 Gıda Güvenliği Yönetim Sistemi sertifikamızı aldık. Kalite taahhüdümüzü belgeledik.

+
+
2021
+
+
+ + +
+
+
Yeni Kavrum Hattı
+

En son teknoloji kavrum makineleriyle donatılmış yeni üretim hattımızı devreye aldık. Kapasite ve kalite bir üst seviyeye çıktı.

+
+
2024
+
+
+
+
+
+ + +
+
+
+

Sertifikalar & Ödüller

+

Kalite ve güvenilirliğimizin kanıtları

+
+
+ +
+
+
+
+ +
+
ISO 22000
+

Food Safety Management System

+
+
+
+ + +
+
+
+
+ +
+
HACCP
+

Hazard Analysis and Critical Control Points

+
+
+
+ + +
+
+
+
+ +
+
Organic Certificate
+

Certified Organic Products

+
+
+
+ + +
+
+
+
+ +
+
Quality Award
+

2023 Best Quality Producer

+
+
+
+ + +
+
+
+
+ +
+
Customer Choice
+

Most Preferred Brand 2024

+
+
+
+ + +
+
+
+
+ +
+
Fast Service Award
+

Excellence in Delivery

+
+
+
+
+
+
+ + +
+
+
+

Değerlerimiz

+

Doğa Kuruyemiş'i yönlendiren ilkeler

+
+
+ +
+
+
+ +
+

Tutkumuz

+

Kuruyemişe olan tutkumuz ve doğal ürünlere olan inancımız, işimizin temelini oluşturur.

+
+
+ + +
+
+
+ +
+

Kalite

+

Her üründe aynı kalite ve tazelik standardını korumak, asla taviz vermediğimiz ilkemizdir.

+
+
+ + +
+
+
+ +
+

Müşteri Odaklılık

+

Müşterilerimizin memnuniyeti bizim için her şeyden önemli. Onların güveni en büyük sermayemiz.

+
+
+ + +
+
+
+ +
+

Doğallık

+

Doğanın sunduğu en saf lezzetleri, hiçbir katkı maddesi kullanmadan sofralarınıza getiriyoruz.

+
+
+ + +
+
+
+ +
+

İnovasyon

+

Geleneksel yöntemleri modern teknolojiyle birleştirerek sürekli kendimizi geliştiriyoruz.

+
+
+ + +
+
+
+ +
+

Dürüstlük

+

Şeffaflık ve dürüstlük, iş ilişkilerimizin ve müşteri güveninin temelidir.

+
+
+
+
+
+ + +
+
+

Doğal Lezzetin Tadını Çıkarın

+

Geniş ürün yelpazemizi keşfedin ve taze kuruyemişlerimizi deneyin.

+
+ Ürünleri İncele + İletişime Geç +
+
+
+ + +
+
+
+ +
+
Doğa Kuruyemiş
+

Doğal enerji, taze lezzet. Her gün taze kavrulmuş, seçkin kalitede kuruyemişler.

+ +
+ + +
+
Contact Us
+
+ +

Örnek Mah., Lezzet Sk. No:10
İstanbul, Türkiye

+
+
+ + +90 555 111 22 33 +
+
+ + info@dogakuruyemis.com +
+
+ + +
+
Working Hours
+

Monday - Friday:
09:00 - 18:00

+

Saturday:
10:00 - 16:00

+

Sunday:
Closed

+
+
+ + +
+

© 2024 Doğa Kuruyemiş. All rights reserved.

+
+
+
+ + + + + + + + + + + + + + + + + diff --git a/iletisim.html b/iletisim.html new file mode 100644 index 0000000..ebf49f9 --- /dev/null +++ b/iletisim.html @@ -0,0 +1,429 @@ + + + + + + + + + + İletişim - Doğa Kuruyemiş | Bize Ulaşın + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Get in Touch

+

We're here to help and answer any questions you might have

+
+
+
+ + +
+
+
+ +
+
+

Send us a Message

+
+ +
+ + +
+ Please enter your name. +
+
+ + +
+ + +
+ Please enter a valid email address. +
+
+ + +
+ + +
+ Please enter a valid phone number. +
+
+ + +
+ + +
+ Please select a subject. +
+
+ + +
+ + +
+ Please enter your message. +
+
+ + +
+
+ + +
+ You must accept the privacy policy to submit the form. +
+
+
+ + + +
+
+
+ + +
+ +
+ +
+ + + +
+
+ +
Our Address
+

Örnek Mah., Lezzet Sk. No:10
Fatih/İstanbul, Türkiye

+
+
+ + +
+
+ +
Phone
+

+ +90 555 111 22 33 +

+
+ + Call Now + + + WhatsApp + +
+
+
+ + +
+
+ +
Email
+

+ info@dogakuruyemis.com +

+ + Send Email + +
+
+ + +
+
+ +
Working Hours
+
+

+ Monday - Friday:
+ 09:00 - 18:00 +

+

+ Saturday:
+ 10:00 - 16:00 +

+

+ Sunday:
+ Closed +

+
+
+
+
+
+
+
+ + +
+
+
+

Quick Contact Options

+

Choose your preferred way to reach us

+
+
+ +
+
+
+ +
+
Call Us
+

Speak directly with our customer service team

+ + +90 555 111 22 33 + +
+
+ + +
+
+
+ +
+
WhatsApp
+

Send us a message on WhatsApp

+ + Chat Now + +
+
+ + +
+
+
+ +
+
Email
+

Send us an email anytime

+ + Send Email + +
+
+ + +
+
+
+ +
+
Social Media
+

Follow us on social platforms

+ +
+
+
+
+
+ + +
+
+
+
+

Have Questions?

+

Check our frequently asked questions page for quick answers to common inquiries.

+

You might find the answer you're looking for without having to wait. Our FAQ section covers topics like:

+
    +
  • Product freshness and quality
    • +
  • Shipping and delivery
    • +
  • Returns and refunds
    • +
  • Storage recommendations
    • +
  • Product ingredients and allergens
    • +
+ + View FAQ + +
+
+ Customer support +
+
+
+
+ + +
+
+
+ +
+
Doğa Kuruyemiş
+

Doğal enerji, taze lezzet. Her gün taze kavrulmuş, seçkin kalitede kuruyemişler.

+ +
+ + +
+
Contact Us
+
+ +

Örnek Mah., Lezzet Sk. No:10
İstanbul, Türkiye

+
+
+ + +90 555 111 22 33 +
+
+ + info@dogakuruyemis.com +
+
+ + +
+
Working Hours
+

Monday - Friday:
09:00 - 18:00

+

Saturday:
10:00 - 16:00

+

Sunday:
Closed

+
+
+ + +
+

© 2024 Doğa Kuruyemiş. All rights reserved.

+
+
+
+ + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..cfd3d2b --- /dev/null +++ b/index.html @@ -0,0 +1,798 @@ + + + + + + + + + + Doğa Kuruyemiş - Doğal Enerji, Taze Lezzet | Anasayfa + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Kategorilerimiz

+

Geniş ürün yelpazemizden seçiminizi yapın

+
+
+ +
+
+ Hazelnuts category +
+ +

Fındık

+

Giresun ve Ordu menşeili, özenle seçilmiş fındıklar

+ İncele +
+
+
+ +
+
+ Pistachios category +
+ +

Antep Fıstığı

+

Siirt ve Gaziantep'ten gelen üstün kalite fıstıklar

+ İncele +
+
+
+ +
+
+ Almonds category +
+ +

Badem

+

İthal ve yerli, her zevke uygun badem çeşitleri

+ İncele +
+
+
+ +
+
+ Walnuts category +
+ +

Ceviz

+

Taze ve besleyici, omega-3 kaynağı cevizler

+ İncele +
+
+
+
+
+
+ + +
+
+
+

Öne Çıkan Ürünlerimiz

+

En çok tercih edilen ürünlerimizi keşfedin

+
+
+ +
+
+ Roasted hazelnuts product +
+
Kavrulmuş Fındık
+

250g • Giresun menşei

+
+
+ ₺— + +
+
+
+ +
+
+ Antep pistachios product +
+
Antep Fıstığı
+

200g • Gaziantep menşei

+
+
+ ₺— + +
+
+
+ +
+
+ Roasted almonds product +
+
Kavrulmuş Badem
+

300g • İthal

+
+
+ ₺— + +
+
+
+ +
+
+ Fresh walnuts product +
+
Taze Ceviz İçi
+

250g • Yerli

+
+
+ ₺— + +
+
+
+ +
+
+ Cashew nuts product +
+
Kaju
+

200g • İthal

+
+
+ ₺— + +
+
+
+ +
+
+ Mixed nuts product +
+
Karışık Kuruyemiş
+

500g • Premium Mix

+
+
+ ₺— + +
+
+
+ +
+
+ Salted pumpkin seeds product +
+
Tuzlu Çekirdek
+

300g • Yerli

+
+
+ ₺— + +
+
+
+ +
+
+ Dried fruits product +
+
Kuru Meyveler
+

400g • Doğal

+
+
+ ₺— + +
+
+
+
+
+
+ + +
+
+
+

Neden Biz?

+

Doğa Kuruyemiş'i tercih etmeniz için sebepler

+
+
+ +
+
+
+ +
+

Taze Kavrum

+

Ürünlerimiz her gün taze kavrulur. Hiçbir ürünümüz bayatlamaz, her zaman en taze lezzeti sunarız.

+
+
+ +
+
+
+ +
+

Güvenilir Tedarik

+

Tüm ürünlerimiz, güvenilir ve sertifikalı tedarikçilerden sağlanır. Kalite garantimiz vardır.

+
+
+ +
+
+
+ +
+

Hızlı Kargo

+

Siparişleriniz aynı gün hazırlanır ve hızlı kargo ile taze olarak elinize ulaşır.

+
+
+
+
+
+ + +
+
+
+

Müşteri Yorumları

+

Müşterilerimiz hakkımızda ne diyor?

+
+ +
+
+ + +
+
+
+

Sık Sorulan Sorular

+

Merak ettikleriniz hakkında bilgi alın

+
+
+
+
+ +
+

+ +

+
+
+ Our products are roasted fresh daily. We never sell stale products and ensure maximum freshness for every order. Your order is prepared on the same day and shipped immediately. +
+
+
+ +
+

+ +

+
+
+ No, we do not use any additives, preservatives, or artificial flavors. All our products are 100% natural and organic. We only use minimal salt in some products if requested. +
+
+
+ +
+

+ +

+
+
+ We ship orders on the same day if placed before 2 PM. Delivery typically takes 1-3 business days depending on your location. We use reliable courier services to ensure your products arrive fresh. +
+
+
+ +
+

+ +

+
+
+ We offer a 100% satisfaction guarantee. If you're not satisfied with your purchase, you can return unopened products within 14 days for a full refund. Opened products can be returned if there's a quality issue. +
+
+
+ +
+

+ +

+
+
+ Store products in a cool, dry place away from direct sunlight. After opening, keep them in airtight containers. Most products stay fresh for 2-3 months when stored properly. Refrigeration can extend freshness. +
+
+
+
+
+
+
+
+ + + + + +
+
+
+ +
+
Doğa Kuruyemiş
+

Doğal enerji, taze lezzet. Her gün taze kavrulmuş, seçkin kalitede kuruyemişler.

+ +
+ + +
+
Contact Us
+
+ +

Örnek Mah., Lezzet Sk. No:10
İstanbul, Türkiye

+
+
+ + +90 555 111 22 33 +
+
+ + info@dogakuruyemis.com +
+
+ + +
+
Working Hours
+

Monday - Friday:
09:00 - 18:00

+

Saturday:
10:00 - 16:00

+

Sunday:
Closed

+
+
+ + +
+

© 2024 Doğa Kuruyemiş. All rights reserved.

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +