Harika bir fikir! Bolt.new altyapısı üzerine inşa edilecek, YouTube Reels Otomasyonu hizmeti sunan bir web sitesi için detaylı, adım adım bir prompt hazırlayalım. Bu prompt, dosya ve klasör düzeninden, her sayfanın içeriğine, kullanılacak bileşenlere ve hatta veri yönetimine kadar her şeyi kapsayacak. Her adım sonunda kontrol mekanizması ile ilerleyeceğiz.
PROMPT BAŞLANGICI
PROJE ADI: YouTube Reels Otomasyonu Hizmet Sitesi (Bolt.new Altyapısı)
GENEL AMAÇ: YouTube Shorts/Reels oluşturma ve yayınlama süreçlerini otomatize eden bir SaaS (Hizmet Olarak Yazılım) ürününü tanıtmak ve potansiyel müşterileri çekmek için modern, hızlı ve kullanıcı dostu bir web sitesi oluşturmak.
TEKNOLOJİ YIĞINI: Bolt.new (Next.js, MDX, React, Tailwind CSS tabanlı bir statik site jeneratörü olduğunu varsayıyoruz.)
İSTENEN ÖZELLİK: Eksiksiz dosya ve klasör düzeni, her sayfa için detaylı içerik yönergeleri, yeniden kullanılabilir bileşenlerin belirlenmesi, SEO odaklı yapı.

ADIM 1: Proje Genel Bakışı, Amaç ve İlk Ayarlar (Dizin Yapısı)

AMAÇ: Projenin ana hatlarını belirlemek, temel dizin ve dosya yapısını oluşturmak ve Bolt.new için gerekli başlangıç konfigürasyonlarını ayarlamak.
TALİMATLAR:

1. Anlayışı Onayla: Bu projenin, Bolt.new'in sağladığı hızlı geliştirme ve performans avantajlarından yararlanarak YouTube Reels otomasyonu hizmetini tanıtacak bir web sitesi olduğunu anladığını teyit et.
2. Kök Dizin Oluşturma: Proje için ana dizini oluştur: youtube-reels-otomasyon-sitesi
3. Temel Bolt.new Dizin Yapısı:youtube-reels-otomasyon-sitesi dizininin içine aşağıdaki temel dizinleri oluştur:
   • src/: Tüm kaynak kodunun (sayfalar, bileşenler, stil) bulunduğu ana dizin.
   • public/: Statik varlıkların (resimler, fontlar, favikonlar) sunulduğu dizin.
   • data/: Sabit verilerin (fiyatlandırma planları, SSS, özellik listeleri vb.) tutulduğu dizin.
4. Temel Yapılandırma Dosyaları (Placeholder):
   • src/globals.css: Tailwind CSS importları ve temel global stiller için boş bir dosya oluştur.
   • tailwind.config.js: Boş bir Tailwind CSS yapılandırma dosyası oluştur (varsayılan ayarlarla başlayabilir).
   • next.config.js: Boş bir Next.js yapılandırma dosyası oluştur (Bolt.new'in Next.js üzerine kurulu olduğu varsayımıyla).
   • package.json: Projenin bağımlılıklarını yönetecek boş bir package.json dosyası oluştur (elle veya npm init -y ile).

KONTROL NOKTASI 1:
Yukarıdaki tüm dizinlerin ve boş dosyaların doğru bir şekilde oluşturulduğunu ve adlandırmaların eksiksiz olduğunu kontrol et. Onaylandıktan sonra bir sonraki adıma geç.

ADIM 2: Temel Bileşenler ve Global Layout (src/components)

AMAÇ: Sitenin genel görünümünü ve navigasyonunu sağlayacak temel bileşenleri ve global layout yapısını oluşturmak.
TALİMATLAR:

1. src/components Dizin Yapısı:src/components altına aşağıdaki dizinleri oluştur (modülerlik için):
   • src/components/layout/
   • src/components/ui/
   • src/components/sections/
2. src/components/layout/Layout.jsx:
   • Tüm sayfaları sarmalayacak ana layout bileşenini oluştur.
   • İçerisinde Navbar ve Footer bileşenlerini içerecek bir yapıya sahip olmalı.
   • children prop'unu alarak sayfa içeriğini render etmeli.
   • SEOHead bileşenini (bir sonraki adımda oluşturulacak) de bu layout içerisinde kullanabilirsin.
3. src/components/layout/Navbar.jsx:
   • Sitenin üst navigasyon çubuğunu oluştur.
   • Logo (sol üstte), ana menü bağlantıları (Özellikler, Nasıl Çalışır, Fiyatlandırma, Hakkımızda, Blog, İletişim), ve sağda bir "Giriş Yap" / "Hemen Dene" (CTA) butonu içermeli.
   • Duyarlı tasarım için mobil menü (hamburger ikonu) desteği düşünülmeli.
4. src/components/layout/Footer.jsx:
   • Sitenin alt bilgi (footer) kısmını oluştur.
   • Şirket logosu ve kısa açıklama.
   • Hızlı bağlantılar (Ana Sayfa, Özellikler, Fiyatlandırma, Blog, SSS, İletişim).
   • Yasal bağlantılar (Gizlilik Politikası, Kullanım Şartları).
   • Sosyal medya ikonları (YouTube, Instagram, Twitter/X, LinkedIn).
   • Telif hakkı bilgisi (© Yıl Şirket Adı. Tüm Hakları Saklıdır.).
5. src/components/ui/SEOHead.jsx:
   • Her sayfanın head bölümüne eklenecek SEO meta etiketlerini yöneten bir bileşen.
   • title, description, keywords, og:image, og:url gibi temel prop'ları almalı.

KONTROL NOKTASI 2:
src/components altındaki dizinlerin ve temel bileşen dosyalarının (Layout, Navbar, Footer, SEOHead) doğru yerlerde ve adlandırmalarla oluşturulduğunu kontrol et. Her bir dosyanın içeriğinin belirtilen genel yapıyı yansıttığından emin ol. Onaylandıktan sonra bir sonraki adıma geç.

ADIM 3: Anasayfa Oluşturma (src/pages/index.mdx)

AMAÇ: Sitenin en önemli sayfası olan anasayfayı, hizmeti ve faydalarını net bir şekilde vurgulayarak tasarlamak.
TALİMATLAR:

1. src/pages/index.mdx Dosyasını Oluştur: Anasayfa içeriğini bu MDX dosyasında tanımla. Bolt.new, MDX desteği sayesinde içeriği Markdown olarak yazıp React bileşenlerini içine gömme esnekliği sunar.
2. MDX İçerik Yapısı:index.mdx dosyası içerisinde aşağıdaki bölümleri ve kullanılacak bileşenleri tanımla:
   • Frontmatter:
     ---
     title: YouTube Reels Otomasyonu - Saniyeler İçinde Viral Ol!
     description: Yapay zeka destekli platformumuzla YouTube Shorts ve Reels'lerinizi otomatik olarak oluşturun ve yayınlayın. Zaman ve efordan tasarruf edin! keywords: youtube reels otomasyonu, shorts otomasyonu, yapay zeka video, viral video, youtube shorts, otomatik video oluşturma ---
   • Importlar:
     import Layout from '@/components/layout/Layout';
     import SEOHead from '@/components/ui/SEOHead';
     import HeroSection from '@/components/sections/HeroSection';
     import FeatureShowcase from '@/components/sections/FeatureShowcase';
     import HowItWorksSection from '@/components/sections/HowItWorksSection';
     import TestimonialSection from '@/components/sections/TestimonialSection';
     import PricingPreview from '@/components/sections/PricingPreview';
     import CallToAction from '@/components/sections/CallToAction';
     import FAQSection from '@/components/sections/FAQSection';
     export const getStaticProps = async () => { // Gerekli verileri burada çekebilirsin (örneğin pricing plans, features, faqs) // Bu örnekte sadece placeholder bırakıyoruz. const features = []; // Gerçek veri için data/features.js'den çekilebilir const testimonials = []; // data/testimonials.js'den çekilebilir const pricingPlans = []; // data/pricingPlans.js'den çekilebilir const faqs = []; // data/faqs.js'den çekilebilir
     return { props: { features, testimonials, pricingPlans, faqs, }, }; };
     <Layout> <SEOHead title={frontmatter.title} description={frontmatter.description} keywords={frontmatter.keywords} /> {/* Anasayfa İçeriği */} <HeroSection /> <FeatureShowcase /> <HowItWorksSection /> <TestimonialSection /> <PricingPreview /> <FAQSection /> <CallToAction /> </Layout>
     IGNORE_WHEN_COPYING_START
     content_copy download Use code with caution. JsxIGNORE_WHEN_COPYING_END
3. Anasayfa İçin Gerekli Yeni Bileşenler (src/components/sections/ altına):
   • src/components/sections/HeroSection.jsx:
     • Başlık: "YouTube Reels Otomasyonu: Viral Potansiyelinizi Harekete Geçirin!" veya benzeri, dikkat çekici, büyük bir başlık.
     • Alt Başlık/Açıklama: "Yapay zeka destekli platformumuzla dakikalar içinde ilgi çekici YouTube Shorts ve Reels videoları oluşturun, planlayın ve yayınlayın. Zamandan tasarruf edin, etkileşimi artırın."
     • Ana CTA Butonları: "Hemen Ücretsiz Dene" ve "Nasıl Çalışır?"
     • Görsel/Video: Ürünün nasıl çalıştığını gösteren kısa bir demo videosu (otomatik oynayan, sessiz) veya yüksek kaliteli bir ekran görüntüsü/illüstrasyon.
   • src/components/sections/FeatureShowcase.jsx:
     • Hizmetin en çarpıcı 3-4 temel özelliğini kısa ve öz bir şekilde tanıt.
     • Başlık: "Neden Bizimle Çalışmalısınız?" veya "Öne Çıkan Özelliklerimiz".
     • Her özellik için bir ikon, kısa başlık ve 1-2 cümlelik açıklama. (Örnek: "Yapay Zeka Destekli Video Oluşturma", "Otomatik Planlama ve Yayınlama", "Performans Analizi", "Sınırsız Şablon").
     • Daha fazla özellik için "Tüm Özellikleri Gör" bağlantısı.
   • src/components/sections/HowItWorksSection.jsx:
     • Hizmetin 3-4 adımda nasıl çalıştığını anlatan basit bir bölüm.
     • Başlık: "Nasıl Çalışır?"
     • Her adım için kısa bir açıklama ve numara/ikon. (Örnek: 1. İçeriği Yükle, 2. AI Sihrini İzle, 3. Yayınla ve İzle).
     • Daha detaylı anlatım için "Detaylı Rehbere Git" bağlantısı.
   • src/components/sections/TestimonialSection.jsx:
     • Müşteri referansları (yorumlar).
     • Başlık: "Başarılı Müşterilerimizin Yorumları".
     • Slider veya grid yapısında 2-3 adet müşteri yorumu. Her yorumda: Müşteri adı, unvanı/şirketi, fotoğrafı ve yorum metni.
   • src/components/sections/PricingPreview.jsx:
     • Fiyatlandırma hakkında kısa bir özet.
     • Başlık: "Uygun Fiyatlarla Başlayın".
     • En popüler 1-2 fiyatlandırma planının temel özellikleri ve fiyatı.
     • "Tüm Fiyatlandırma Planlarını Gör" bağlantısı.
   • src/components/sections/FAQSection.jsx:
     • En sık sorulan 3-4 soruyu ve yanıtlarını içeren akordeon (açılır/kapanır) bölüm.
     • Başlık: "Sıkça Sorulan Sorular".
     • "Tüm SSS'leri Gör" bağlantısı.
   • src/components/sections/CallToAction.jsx:
     • Güçlü bir harekete geçirici mesaj.
     • Başlık: "Reels Üretiminizi Otomatikleştirin!" veya "Hemen Başlayın ve İçeriğinizi Ölçeklendirin."
     • Kısa açıklama.
     • Büyük bir "Hemen Ücretsiz Dene" butonu.

KONTROL NOKTASI 3:
src/pages/index.mdx dosyasının oluşturulduğunu ve Frontmatter ile Layout yapısını içerdiğini kontrol et. Anasayfada kullanılacak tüm bileşenlerin (src/components/sections/ altında) boş JSX dosyaları olarak oluşturulduğunu ve her birinin amacının net olduğunu teyit et. Onaylandıktan sonra bir sonraki adıma geç.

ADIM 4: Alt Sayfalar Oluşturma (src/pages/)

AMAÇ: Sitenin ana hizmet ve bilgi sayfalarını detaylı içeriklerle oluşturmak.
TALİMATLAR:
Her sayfa için src/pages/ altında bir MDX dosyası oluştur. Her MDX dosyası, index.mdx'teki gibi bir Frontmatter ve Layout yapısını içermelidir. Sayfa başlığı ve açıklaması Frontmatter'da tanımlanmalıdır.

1. src/pages/ozellikler.mdx (Özellikler Sayfası)
   • Frontmatter: title: Özelliklerimiz, description: YouTube Reels otomasyonu platformumuzun tüm detaylı özellikleri.
   • İçerik:
     • Hero Bölümü: Başlık ("YouTube Reels Otomasyonu Platformu Özellikleri"), kısa açıklama.
     • Detaylı Özellik Listesi:Her bir özelliğin detaylı bir şekilde açıklandığı bölümler. İkonlar, başlıklar, paragraflar ve ilgili görsel/GIF'ler ile desteklenmeli.
       • Yapay Zeka Destekli İçerik Oluşturma (Metinden videoya, anahtar kelimeden videoya, uzun videodan kısa videoya)
       • Otomatik Müzik ve Seslendirme Seçimi
       • Özelleştirilebilir Şablonlar ve Marka Kitleri
       • Planlama ve Otomatik Yayınlama (YouTube Shorts, Instagram Reels)
       • Gelişmiş Analitik ve Performans Takibi
       • Toplu Video Oluşturma
       • Çoklu Dil Desteği
       • Kolay Entegrasyonlar (depolama, diğer platformlar)
     • CTA Bölümü: "Hemen Ücretsiz Dene" veya "Demo Talep Et"
2. src/pages/nasil-calisir.mdx (Nasıl Çalışır Sayfası)
   • Frontmatter: title: Nasıl Çalışır?, description: YouTube Reels otomasyonu sürecinin adım adım rehberi.
   • İçerik:
     • Hero Bölümü: Başlık ("Platformumuz Nasıl Çalışır?"), kısa açıklama.
     • Adım Adım Rehber:Her adım için ayrı bir bölüm. Büyük sayılar, başlıklar, kısa açıklamalar ve ilgili ekran görüntüleri/gif'ler kullanılmalı.
       • Adım 1: İçeriğinizi Yükleyin/Belirleyin: Metin, uzun video URL'si, anahtar kelimeler veya ses dosyası yükleme.
       • Adım 2: AI Sihrini İzleyin: Platformun yapay zeka ile nasıl video oluşturduğunu (metin analizi, görsel seçimi, müzik senkronizasyonu vb.) açıkla.
       • Adım 3: Özelleştirin ve Önizleyin: Oluşturulan videoyu düzenleme, şablon seçimi, marka öğeleri ekleme imkanı.
       • Adım 4: Planlayın ve Yayınlayın: Belirli tarihte veya hemen YouTube Shorts/Reels'e otomatik yayınlama.
       • Adım 5: Performansınızı Takip Edin: Yayınlanan videoların performansını (izlenme, etkileşim) platform içinden izleme.
     • CTA Bölümü: "Hemen Başla" veya "Video Rehberi İzle"
3. src/pages/fiyatlandirma.mdx (Fiyatlandırma Sayfası)
   • Frontmatter: title: Fiyatlandırma, description: YouTube Reels otomasyonu planlarımızı keşfedin.
   • İçerik:
     • Hero Bölümü: Başlık ("İhtiyaçlarınıza Uygun Planı Bulun"), kısa açıklama.
     • Fiyatlandırma Tablosu/Kartları:Farklı planlar (Örn: Başlangıç, Profesyonel, Kurumsal) ve her planın özellikleri, fiyatı (aylık/yıllık seçenekleriyle).
       • Her planda kaç video, kaç dakika, hangi özellikler dahil olduğu belirtilmeli.
       • "En Popüler" veya "Tavsiye Edilen" plan vurgusu.
       • "Özel Teklif" veya "Kurumsal Plan için İletişime Geçin" seçeneği.
     • SSS (Sıkça Sorulan Sorular) Bölümü: Fiyatlandırma ile ilgili sık sorulan sorular (ödeme yöntemleri, iptal politikası, yükseltme/düşürme). Bu, data/faqs.js dosyasından filtrelenerek getirilebilir.
     • CTA Bölümü: "Ücretsiz Hesap Oluştur" veya "Planınızı Seçin"
4. src/pages/referanslar.mdx (Referanslar/Başarı Hikayeleri Sayfası)
   • Frontmatter: title: Başarı Hikayeleri, description: Müşterilerimizin YouTube Reels otomasyonu ile elde ettiği başarıları keşfedin.
   • İçerik:
     • Hero Bölümü: Başlık ("Müşterilerimizin Başarıları"), kısa açıklama.
     • Detaylı Referanslar/Vaka Çalışmaları:
       • Her bir vaka çalışması için ayrı blok. İçerisinde: Müşteri logosu, müşteri adı, unvanı, fotoğrafı, kısa bir özet, problemleri, çözümlerimiz, elde edilen sonuçlar (yüzdesel artışlar, zaman tasarrufu vb.).
       • "Videolu Referanslar" veya "Örnek Reels'ler" linkleri olabilir.
     • CTA Bölümü: "Siz de Başarılı Olun" veya "Hemen Deneyin"
5. src/pages/sss.mdx (Sıkça Sorulan Sorular Sayfası)
   • Frontmatter: title: Sıkça Sorulan Sorular, description: YouTube Reels otomasyonu platformumuz hakkında merak ettikleriniz.
   • İçerik:
     • Hero Bölümü: Başlık ("Sıkça Sorulan Sorular"), kısa açıklama.
     • Kategorilere Ayrılmış SSS: Örneğin: Genel Sorular, Hesap ve Fiyatlandırma, Teknik Sorular, Video Oluşturma.
     • Her kategori altında akordeon (açılır/kapanır) yapısında sorular ve detaylı cevapları.
     • Arama çubuğu özelliği düşünülmeli.
     • CTA Bölümü: "Aradığınızı Bulamadınız mı? Bize Ulaşın."
6. src/pages/hakkimizda.mdx (Hakkımızda Sayfası)
   • Frontmatter: title: Hakkımızda, description: YouTube Reels otomasyonu misyonumuz ve ekibimiz.
   • İçerik:
     • Hero Bölümü: Başlık ("Misyonumuz ve Ekibimiz"), kısa açıklama.
     • Misyon ve Vizyon: Şirketin kuruluş amacı, misyonu ve geleceğe yönelik vizyonu.
     • Hikayemiz: Şirketin nasıl kurulduğu, neyi çözmek için yola çıktığı.
     • Ekibimiz (Opsiyonel): Ekip üyelerinin fotoğrafları, isimleri ve kısa tanıtımları.
     • Değerlerimiz: Şirketin temel değerleri (inovasyon, müşteri odaklılık, güvenilirlik vb.).
     • CTA Bölümü: "Kariyer Olanakları" veya "Bizimle İletişime Geçin"
7. src/pages/iletisim.mdx (İletişim Sayfası)
   • Frontmatter: title: İletişim, description: YouTube Reels otomasyonu hizmetimiz hakkında bize ulaşın.
   • İçerik:
     • Hero Bölümü: Başlık ("Bize Ulaşın"), kısa açıklama.
     • İletişim Formu: Ad, Soyad, E-posta, Konu, Mesaj alanlarını içeren basit bir form. (Gerçek gönderme işlevi backend gerektirecektir, bu sadece arayüz için).
     • Diğer İletişim Bilgileri:
       • E-posta adresi (destek, satış)
       • Telefon numarası (varsa)
       • Adres (varsa)
       • Çalışma saatleri
     • Sosyal Medya Linkleri: Navbar'da zaten var ama burada tekrar listelenebilir.
     • Harita (Opsiyonel): Şirket lokasyonu varsa Google Haritalar embed'i.
8. src/pages/blog.mdx (Blog Ana Sayfası)
   • Frontmatter: title: Blog, description: YouTube Reels otomasyonu, video pazarlama ve içerik üretimi üzerine güncel makaleler.
   • İçerik:
     • Hero Bölümü: Başlık ("En Son Blog Yazılarımız"), kısa açıklama.
     • Blog Yazıları Listesi:Her blog yazısı için bir BlogPostCard bileşeni kullanılmalı.
       • Her kartta: Yazı başlığı, kısa özet, yayın tarihi, yazar, okunma süresi, görsel.
       • Sayfalama (Pagination) düşünülmeli.
       • Kategori filtreleme veya arama çubuğu (opsiyonel).
9. src/pages/blog/[slug].mdx (Blog Yazısı Şablonu)
   • Bu bir MDX dosyası değil, dinamik rota için bir placeholder. Bolt.new'in getStaticPaths ve getStaticProps kullanarak blog yazılarını nasıl çekeceğini belirtecektir. İçerik MDX olarak yazılacaktır.
   • Frontmatter: title, description, date, author, image, tags.
   • İçerik: Blog yazısının tam metni. Yazar bilgisi, yayın tarihi, okuma süresi, sosyal paylaşım butonları.
10. src/pages/gizlilik-politikasi.mdx (Gizlilik Politikası)
    • Frontmatter: title: Gizlilik Politikası, description: YouTube Reels Otomasyonu hizmetimizin gizlilik politikası.
    • İçerik: Standart bir gizlilik politikası metni. Kişisel veri toplama, kullanma, saklama ve paylaşma prensipleri. Çerez politikası.
11. src/pages/kullanim-sartlari.mdx (Kullanım Şartları)
    • Frontmatter: title: Kullanım Şartları, description: YouTube Reels Otomasyonu hizmetimizin kullanım şartları ve koşulları.
    • İçerik: Hizmetin kullanımına ilişkin yasal şartlar ve koşullar. Sorumluluk reddi, fikri mülkiyet hakları, kullanıcı yükümlülükleri vb.
12. src/pages/giris.mdx (Giriş Sayfası - Opsiyonel)
    • Frontmatter: title: Giriş Yap, description: YouTube Reels Otomasyonu hesabınıza giriş yapın.
    • İçerik: E-posta/Kullanıcı Adı ve Şifre alanları, "Şifremi Unuttum" linki, "Hesabın Yok mu? Kayıt Ol" linki.
13. src/pages/kayit.mdx (Kayıt Sayfası - Opsiyonel)
    • Frontmatter: title: Kayıt Ol, description: YouTube Reels Otomasyonu için yeni bir hesap oluşturun.
    • İçerik: Ad, Soyad, E-posta, Şifre, Şifre Tekrarı alanları, "Kullanım Şartlarını kabul ediyorum" onayı, "Zaten hesabın var mı? Giriş Yap" linki.

KONTROL NOKTASI 4:
Tüm belirtilen alt sayfaların src/pages altında MDX dosyaları olarak oluşturulduğunu ve her birinin Frontmatter ile Layout yapısını içerdiğini kontrol et. Her sayfanın içeriğinin belirtilen ana hatlarıyla yer tutucularla da olsa mevcut olduğundan emin ol. Onaylandıktan sonra bir sonraki adıma geç.

ADIM 5: Yeniden Kullanılabilir Ek Bileşenler ve UI Elemanları (src/components/ui/ & src/components/sections/)

AMAÇ: Sayfalar arasında tekrar eden ve daha spesifik olan UI elemanlarını ve bölüm bileşenlerini tanımlamak.
TALİMATLAR:

1. src/components/ui/ İçin Bileşenler:
   • FeatureCard.jsx: Anasayfada ve Özellikler sayfasında her bir özelliği göstermek için kullanılacak kart bileşeni. Prop'lar: icon, title, description.
   • PricingCard.jsx: Fiyatlandırma sayfasında ve anasayfa önizlemesinde her bir fiyatlandırma planını göstermek için kullanılacak kart bileşeni. Prop'lar: planName, price, featuresList (dizi), ctaText, isPopular (boolean).
   • TestimonialCard.jsx: Müşteri referanslarını göstermek için kullanılacak kart. Prop'lar: quote, customerName, customerTitle, customerImage.
   • FAQItem.jsx: SSS sayfalarında akordeon öğesi olarak kullanılacak. Prop'lar: question, answer.
   • CTAButton.jsx: Uygulama genelinde kullanılacak standart buton bileşeni. Prop'lar: text, href, primary (boolean), onClick.
   • Input.jsx / Textarea.jsx: İletişim formu ve diğer formlar için temel input ve textarea bileşenleri (Tailwind sınıflarıyla stilize edilmiş).
   • BlogPostCard.jsx: Blog ana sayfasında her blog yazısı için kart bileşeni. Prop'lar: title, excerpt, date, author, image, slug.
2. src/components/sections/ İçin Ek Bileşenler:
   • ContactForm.jsx: İletişim sayfasındaki formu kapsayan bileşen. Input ve Textarea bileşenlerini kullanmalı.
   • DetailedFeatureSection.jsx: Özellikler sayfasında her bir detayı açıklamak için kullanılacak bir şablon bileşeni. Prop'lar: title, description, image/video, featureList (varsa).
   • StepByStepGuide.jsx: Nasıl Çalışır sayfasında her adımı göstermek için kullanılacak bir şablon bileşeni. Prop'lar: stepNumber, title, description, image.

KONTROL NOKTASI 5:
Yukarıda listelenen tüm UI ve section bileşenlerinin src/components/ui/ ve src/components/sections/ altında boş JSX dosyaları olarak oluşturulduğunu ve her birinin alması gereken prop'ların belirtildiğini kontrol et. Onaylandıktan sonra bir sonraki adıma geç.

ADIM 6: Veri Yönetimi (src/data/)

AMAÇ: Sitedeki dinamik veya sık değişen verileri merkezi bir konumda yönetmek, sayfaların ve bileşenlerin bu verilere kolayca erişmesini sağlamak.
TALİMATLAR:

1. src/data/features.js:
   • YouTube Reels Otomasyonu hizmetinin tüm özelliklerini içeren bir JavaScript dizisi (array of objects) oluştur.
   • Her objede: id, icon (veya iconPath), title, description, detailedDescription (özellikler sayfası için), image (özellikler sayfası için) alanları olmalı.
2. // src/data/features.js
   const features = [ { id: 'ai-video-creation', icon: '/images/icons/ai.svg', // public/images altında olacak title: 'Yapay Zeka Destekli Video Oluşturma', description: 'Metin, ses veya uzun videolardan saniyeler içinde kısa, dikkat çekici Reelslar üretin.', detailedDescription: 'Gelişmiş AI algoritmalarımız, yüklediğiniz içeriği analiz ederek en ilgi çekici bölümleri seçer, uygun görseller, müzikler ve seslendirmelerle otomatik olarak birleştirir.', image: '/images/features/ai-creation.png', }, // Diğer özellikler...
   ];
   export default features;
   IGNORE_WHEN_COPYING_START
   content_copy download Use code with caution. JavaScriptIGNORE_WHEN_COPYING_END
3. src/data/pricingPlans.js:
   • Farklı fiyatlandırma planlarını (Başlangıç, Profesyonel, Kurumsal vb.) içeren bir JavaScript dizisi oluştur.
   • Her objede: id, name, priceMonthly, priceYearly, currency, features (dizi), isPopular (boolean), ctaLink alanları olmalı.
4. src/data/faqs.js:
   • Sıkça Sorulan Soruları ve yanıtlarını içeren bir JavaScript dizisi oluştur.
   • Her objede: id, question, answer, category (Örn: "Genel", "Fiyatlandırma", "Teknik") alanları olmalı.
5. src/data/testimonials.js:
   • Müşteri referanslarını içeren bir JavaScript dizisi oluştur.
   • Her objede: id, quote, customerName, customerTitle, customerCompany, customerImage alanları olmalı.
6. src/data/navigation.js:
   • Navbar ve Footer'da kullanılacak navigasyon bağlantılarını içeren bir JavaScript dizisi oluştur.
   • Her objede: id, name, href, isExternal (boolean) alanları olmalı.

KONTROL NOKTASI 6:
src/data dizini altında belirtilen tüm JavaScript dosyalarının oluşturulduğunu ve her bir dosyanın içeriğinin belirtilen örnek yapıya uygun, boş diziler veya örnek objelerle hazırlandığını kontrol et. Onaylandıktan sonra bir sonraki adıma geç.

ADIM 7: Görsel Varlıklar ve Medya Yönetimi (public/)

AMAÇ: Sitenin logo, ikonlar, ana görseller ve demo videoları gibi statik varlıklarını düzenli bir şekilde saklamak.
TALİMATLAR:

1. public/images/ Dizinini Oluştur:Sitede kullanılacak tüm görselleri bu dizin altına yerleştir.
   • public/images/logo.svg (Şirket Logosu)
   • public/images/hero-main.png (Anasayfa Hero bölümü ana görseli)
   • public/images/icons/ (Özellik ikonları, sosyal medya ikonları vb.)
   • public/images/features/ (Özellikler sayfasındaki görseller)
   • public/images/testimonials/ (Müşteri fotoğrafları)
   • public/images/placeholder.png (Geliştirme aşamasında kullanılabilecek genel bir yer tutucu görsel)
2. public/videos/ Dizinini Oluştur (Opsiyonel):
   • Anasayfa Hero bölümünde veya Nasıl Çalışır sayfasında kullanılacak demo videoları için.
   • public/videos/demo-reels-automation.mp4
3. public/favicons/ Dizinini Oluştur:
   • Tarayıcı sekmesinde görünen favikonları ve diğer uygulama ikonlarını içerir.
   • public/favicons/favicon.ico, public/favicons/apple-touch-icon.png vb.

KONTROL NOKTASI 7:
public dizini altında images, videos (opsiyonel) ve favicons dizinlerinin oluşturulduğunu ve her birinin içerisine en az bir adet ilgili dosya yer tutucusu olarak bırakıldığını kontrol et (örn: logo.svg yerine logo-placeholder.svg gibi). Onaylandıktan sonra bir sonraki adıma geç.

ADIM 8: Stil ve Temalandırma (Tailwind CSS)

AMAÇ: Sitenin görsel tutarlılığını ve duyarlılığını sağlamak için temel stil ayarlarını ve Tailwind CSS entegrasyonunu kontrol etmek.
TALİMATLAR:

1. tailwind.config.js Güncellemesi:
   • Temel renk paletini (marka renkleri) theme.extend.colors altında tanımla.
   • Kullanılacak fontları theme.extend.fontFamily altında tanımla (Google Fonts veya özel fontlar).
   • Gelecekteki genişlemeler için özel sınıflar veya eklentiler eklenebilir.
2. // tailwind.config.js
   /** @type {import('tailwindcss').Config} */
   module.exports = { content: [ './src/**/*.{js,jsx,ts,tsx,mdx}', './public/**/*.html', ], theme: { extend: { colors: { primary: '#FF4500', // YouTube Red'e yakın secondary: '#1A202C', // Koyu gri accent: '#38A169', // Vurgu rengi // Diğer renkler... }, fontFamily: { sans: ['Inter', 'sans-serif'], // Örnek font heading: ['Montserrat', 'sans-serif'], // Başlıklar için farklı bir font }, }, }, plugins: [], };
   IGNORE_WHEN_COPYING_START
   content_copy download Use code with caution. JavaScriptIGNORE_WHEN_COPYING_END
3. src/globals.css Güncellemesi:
   • Tailwind CSS'in temel stillerini import et:
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     /* Genel temel stiller ve font tanımlamaları */
     html, body { font-family: 'Inter', sans-serif; color: #2D3748; /* Veya theme'deki secondary renk */ scroll-behavior: smooth; }
     
     h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #1A202C; /* Veya theme'deki secondary renk */
     }
     a { @apply text-primary hover:underline; }
     /* Diğer global stiller */
     IGNORE_WHEN_COPYING_START
     content_copy download Use code with caution. CssIGNORE_WHEN_COPYING_END
4. Duyarlı Tasarım İlkeleri:
   • Tüm bileşen ve sayfa tasarımları mobil öncelikli (mobile-first) yaklaşımla geliştirilmeli.
   • Tailwind'in duyarlı sınıfları (sm:, md:, lg aktif olarak kullanılmalı.

KONTROL NOKTASI 8:
tailwind.config.js ve src/globals.css dosyalarının yukarıdaki örnekleri takip ederek güncellendiğini ve temel renk/font tanımlamalarının yapıldığını kontrol et. Duyarlı tasarım prensiplerinin akılda tutulduğunu teyit et. Onaylandıktan sonra bir sonraki adıma geç.

ADIM 9: SEO, Performans ve Erişilebilirlik Optimizasyonları

AMAÇ: Sitenin arama motorlarında daha iyi sıralanmasını, hızlı yüklenmesini ve tüm kullanıcılar için erişilebilir olmasını sağlamak.
TALİMATLAR:

1. SEO Odaklı Meta Etiketler:
   • Tüm MDX sayfalarında Frontmatter içerisinde title, description ve keywords alanlarının dolu olduğundan emin ol.
   • SEOHead bileşeninde Open Graph (OG) etiketleri (og:title, og:description, og:image, og:url, og:type) ve Twitter Card etiketleri (twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description, twitter:image) için yer tutucular veya varsayılan değerler belirle.
   • public/robots.txt ve public/sitemap.xml dosyaları için placeholder oluştur (gerçek içerikleri daha sonra doldurulacak).
2. Görsel Optimizasyonu:
   • Tüm görseller için alt etiketleri kullanılmalı.
   • Bolt.new/Next.js'in <Image> bileşeni kullanılarak otomatik optimizasyon ve lazy loading sağlanmalı.
3. Performans:
   • Gereksiz JavaScript yüklemesini engellemek için bileşenlerin ve sayfaların sadece gerekli olduğunda yüklendiğinden emin ol (Code Splitting).
   • Statik site jeneratörü olmanın avantajından yararlanarak önceden oluşturulmuş HTML dosyaları ile hızlı yüklenme sağlamak.
4. Erişilebilirlik (Accessibility):
   • Tüm interaktif elementler (<button>, <a>, <input>) klavye ile gezinilebilir olmalı.
   • Renk kontrast oranları yeterli olmalı.
   • Anlamsal HTML etiketleri (<header>, <main>, <nav>, <footer>, <section>, <article>) doğru şekilde kullanılmalı.
   • aria-label veya aria-describedby gibi ARIA nitelikleri gerekli yerlerde kullanılmalı.

KONTROL NOKTASI 9:
Her MDX sayfasında SEO Frontmatter'larının doğru olduğunu, SEOHead bileşeninin kapsayıcı olduğunu kontrol et. public dizininde robots.txt ve sitemap.xml için yer tutucuların olduğunu teyit et. Genel olarak, görsel ve performans optimizasyonları ile erişilebilirlik prensiplerinin projenin yapısında uygulandığından emin ol. Onaylandıktan sonra bir sonraki adıma geç.

ADIM 10: Son Kontrol ve Geliştirme Ortamı Hazırlığı

AMAÇ: Tüm adımların eksiksiz olduğunu teyit etmek ve projeyi geliştirme için hazır hale getirmek.
TALİMATLAR:

1. Dizin ve Dosya Yapısını Son Kez Kontrol Et: Tüm dizinlerin ve dosyaların doğru yerlerde ve doğru adlandırmalarla olduğundan emin ol.
   youtube-reels-otomasyon-sitesi/ ├── src/ │ ├── components/ │ │ ├── layout/ │ │ │ ├── Layout.jsx
   │ │ │ ├── Navbar.jsx
   │ │ │ └── Footer.jsx
   │ │ ├── sections/ │ │ │ ├── HeroSection.jsx
   │ │ │ ├── FeatureShowcase.jsx
   │ │ │ ├── HowItWorksSection.jsx
   │ │ │ ├── TestimonialSection.jsx
   │ │ │ ├── PricingPreview.jsx
   │ │ │ ├── CallToAction.jsx
   │ │ │ ├── FAQSection.jsx
   │ │ │ ├── ContactForm.jsx
   │ │ │ ├── DetailedFeatureSection.jsx
   │ │ │ └── StepByStepGuide.jsx
   │ │ └── ui/ │ │ ├── SEOHead.jsx
   │ │ ├── FeatureCard.jsx
   │ │ ├── PricingCard.jsx
   │ │ ├── TestimonialCard.jsx
   │ │ ├── FAQItem.jsx
   │ │ ├── CTAButton.jsx
   │ │ ├── Input.jsx
   │ │ ├── Textarea.jsx
   │ │ └── BlogPostCard.jsx
   │ ├── data/ │ │ ├── features.js
   │ │ ├── pricingPlans.js
   │ │ ├── faqs.js
   │ │ ├── testimonials.js
   │ │ └── navigation.js
   │ ├── pages/ │ │ ├── index.mdx
   │ │ ├── ozellikler.mdx
   │ │ ├── nasil-calisir.mdx
   │ │ ├── fiyatlandirma.mdx
   │ │ ├── referanslar.mdx
   │ │ ├── sss.mdx
   │ │ ├── hakkimizda.mdx
   │ │ ├── iletisim.mdx
   │ │ ├── blog.mdx
   │ │ ├── blog/ │ │ │ └── [slug].mdx
   │ │ ├── gizlilik-politikasi.mdx
   │ │ └── kullanim-sartlari.mdx
   │ │ ├── giris.mdx (Opsiyonel) │ │ └── kayit.mdx (Opsiyonel) │ └── globals.css
   ├── public/ │ ├── images/ │ │ ├── logo.svg
   │ │ ├── hero-main.png
   │ │ ├── icons/ │ │ └── ... (diğer görsel alt dizinleri) │ ├── videos/ (Opsiyonel) │ │ └── demo-reels-automation.mp4
   │ ├── favicons/ │ │ └── favicon.ico
   │ ├── robots.txt
   │ └── sitemap.xml
   ├── package.json
   ├── tailwind.config.js
   └── next.config.js
   IGNORE_WHEN_COPYING_START
   content_copy download Use code with caution. IGNORE_WHEN_COPYING_END
2. Bağımlılıkları Kurma:package.json dosyasını düzenle ve Bolt.new (Next.js, React, Tailwind CSS) için gerekli temel bağımlılıkları ekle. Ardından npm install veya yarn install komutunu çalıştır.
   • Örnek temel bağımlılıklar: react, react-dom, next, tailwindcss, postcss, autoprefixer, @mdx-js/react, @next/mdx. (Bolt.new'in kendi starter'ı genellikle bunları otomatik getirir).
3. Geliştirme Sunucusunu Başlatma: Proje dizininde npm run dev veya yarn dev komutunu çalıştırarak sitenin yerel geliştirme ortamında sorunsuz bir şekilde çalıştığından emin ol. Tarayıcıda açıldığında temel layout'un ve anasayfa yapısının göründüğünü doğrula.

KONTROL NOKTASI 10 (SON KONTROL):
Tüm dizin ve dosya yapısının eksiksiz ve hatasız olduğunu görsel olarak kontrol et. package.json'daki bağımlılıkların doğru olduğunu ve npm install ile sorunsuz kurulduğunu teyit et. Projenin yerel olarak başarılı bir şekilde başlatıldığını ve ana sayfanın tarayıcıda göründüğünü onayla.
PROMPT SONU
Bu detaylı prompt ile YouTube Reels Otomasyonu hizmet sitesi için Bolt.new altyapısında sıfırdan, eksiksiz ve hatasız bir yapı oluşturabilirsin. Her adım, modülerliği, düzeni ve performans/SEO gibi önemli faktörleri göz önünde bulundurarak hazırlandı. Başarılar!