Saat 09:00 — Bir fikriniz var.

Saat 20:00 — Web siteniz canlıda.

Bu artık bir hayal değil. Vibe Coding ile yapay zeka araçlarını doğru kullandığınızda, tek bir günde profesyonel bir web sitesi geliştirebilirsiniz.

Bu yazıda, gerçek bir web sitesini nasıl 1 günde yaptığımızı adım adım anlatacağız.

Önce Gerçekçi Olalım

"1 günde web sitesi" derken ne kastettiğimizi netleştirelim:

✅ Yapılabilir:

• Profesyonel landing page
• Kişisel portfolio sitesi
• Küçük ölçekli kurumsal site
• Randevu/iletişim sitesi
• Hizmet tanıtım sayfası

❌ 1 günde olmaz:

• Tam e-ticaret platformu
• Kullanıcı hesap sistemi
• Karmaşık veritabanı yapısı
• Mobil uygulama

Bugünkü hedefimiz: Tamamen fonksiyonel, modern, canlıya alınmış bir landing page.

---

Kullanacağınız Araçlar

| Araç | Görev | Süre | |------|-------|------| | Cursor AI | Kod yazma | Gün boyu | | Claude / ChatGPT | İçerik ve fikir | İhtiyaç oldukça | | Vercel | Yayınlama | 10 dakika | | GitHub | Kod saklama | 5 dakika |

Maliyet: 0 TL (ücretsiz planlarla yapılabilir)

---

Saat 09:00 — Fikri Netleştirin (30 dakika)

Klavyeye dokunmadan önce 30 dakika düşünün.

Şu soruları cevaplayın:

1. Site kimin için?

• Hedef kitle: Kim bu siteyi görecek?
• Amaç: Ne yapmasını istiyorsunuz?

2. Ana mesaj nedir?

• Ziyaretçi 5 saniyede ne anlamalı?

3. Hangi bölümler olacak? Tipik landing page yapısı:

• Hero (başlık + CTA)
• Özellikler / Faydalar
• Nasıl çalışır
• Referanslar / Sosyal kanıt
• Fiyatlandırma (varsa)
• İletişim / CTA

4. Renk ve stil?

• Koyu mu açık mı?
• Hangi renkler?
• Minimal mi yoksa zengin içerikli mi?

Örnek proje: Bir danışmanlık şirketi için landing page. Hedef: Potansiyel müşterileri randevuya yönlendirmek.

---

Saat 09:30 — Proje Kurulumu (20 dakika)

Cursor'u açın. Terminal panelini açın (Ctrl + `` ).

1. Next.js projesi oluşturun:

npx create-next-app@latest danismanlik-sitesi --typescript --tailwind --app --src-dir=false
cd danismanlik-sitesi
code .

2. Cursor Chat'i açın (Ctrl+L) ve projeyi tanıtın:

Bu proje bir danışmanlık şirketinin landing page'i.
Tech stack: Next.js 14, TypeScript, Tailwind CSS.
Renk paleti: Koyu (#0F172A arka plan), turkuaz aksan (#06B6D4), beyaz yazılar.
Font: Inter (Google Fonts).
Tasarım stili: Modern, premium, profesyonel.

Önce globals.css'i bu tasarıma göre düzenle,
temel renk değişkenlerini ve font import'unu ekle.

---

Saat 10:00 — Bölüm Bölüm Geliştirme (6 saat)

Her bölümü ayrı ayrı yapın. Küçük adımlar, hızlı ilerleme.

Hero Bölümü (45 dakika)

app/components/Hero.tsx dosyası oluştur.

İçerik:
- Rozet: "⚡ Türkiye'nin Lider Danışmanlık Firması"
- Başlık: "İşinizi Bir Sonraki Seviyeye Taşıyın"
- Alt başlık: "Stratejik danışmanlık hizmetlerimizle şirketinizin büyümesini hızlandırın."
- İki buton: "Ücretsiz Görüşme Al" (birincil), "Hizmetlerimiz" (ikincil)
- Sağda animasyonlu stat kartları: 500+ müşteri, %95 memnuniyet, 10+ yıl deneyim

Tasarım: gradient arka plan, floating animasyonlar, glassmorphism kartlar.

Özellikler Bölümü (45 dakika)

app/components/Features.tsx oluştur.

6 özellik kartı (3x2 grid):
1. "Stratejik Planlama" - iş hedeflerinize ulaşın
2. "Süreç Optimizasyonu" - verimliliği artırın
3. "Dijital Dönüşüm" - teknolojiyi kullanın
4. "Ekip Gelişimi" - yetenekleri güçlendirin
5. "Pazar Analizi" - fırsatları belirleyin
6. "Risk Yönetimi" - riskleri minimize edin

Her kart: ikon, başlık, açıklama.
Hover'da kart yüksele, turkuaz border belire.

Nasıl Çalışır (30 dakika)

app/components/HowItWorks.tsx oluştur.

4 adımlı süreç (yatay timeline):
1. "Ücretsiz Görüşme" - İhtiyaçlarınızı anlıyoruz
2. "Analiz" - Detaylı durum analizi yapıyoruz
3. "Strateji" - Özel yol haritası hazırlıyoruz
4. "Uygulama" - Hedeflerinize birlikte ulaşıyoruz

Adımlar arasında bağlantı çizgisi.
Her adım numaralı, ikonlu.

Referanslar (30 dakika)

app/components/Testimonials.tsx oluştur.

3 referans kartı, karusel (swipe edilebilir):
- "Danışmanlık hizmetleri sayesinde ciromuz %40 arttı." — Ahmet Y., CEO
- "Süreçlerimizi optimize ettiler, zamandan %60 tasarruf ettik." — Fatma K., Genel Müdür
- "En iyi yatırımlarımızdan biri oldu." — Mehmet S., Kurucu

Her kart: alıntı, isim, unvan, 5 yıldız.

Fiyatlandırma (45 dakika)

app/components/Pricing.tsx oluştur.

3 plan:
1. Starter - 9.999₺/ay - Küçük işletmeler için
2. Professional - 24.999₺/ay - Büyüyen şirketler (EN POPÜLER)
3. Enterprise - Özel teklif - Kurumsal

Her planın özellikleri listesi.
Popüler plan: turkuaz border, rozet.
"Hemen Başla" / "Teklif Al" butonları.

İletişim Formu (30 dakika)

app/components/Contact.tsx oluştur.

İki kolon:
Sol: İletişim bilgileri, telefon, email, adres ikonlarıyla
Sağ: Form — Ad Soyad, Email, Telefon, Mesaj, Gönder butonu

Form validation (HTML5 required).
Gönder butonu: hover animasyon, yükleniyor state.

---

Saat 16:00 — Birleştirme ve Düzeltme (1 saat)

app/page.tsx dosyasına tüm bileşenleri ekle:
Hero → Features → HowItWorks → Testimonials → Pricing → Contact

Ayrıca Navbar oluştur:
- Logo (sol)
- Linkler: Hizmetler, Nasıl Çalışır, Referanslar, Fiyatlar
- "İletişime Geç" butonu (sağ)
- Sticky (scroll'da sabit kalır)
- Mobilde hamburger menü

Ve Footer:
- Logo + kısa açıklama
- Hızlı linkler
- İletişim bilgileri
- Copyright

---

Saat 17:00 — Mobil Uyum Kontrolü (30 dakika)

Tüm bileşenleri mobil görünüm için gözden geçir.
Sorunlu yerler varsa düzelt:
- Navbar hamburger menü çalışıyor mu?
- Hero metni küçük ekranda düzgün görünüyor mu?
- Grid'ler tek kolona geçiyor mu?
- Fiyatlandırma kartları üst üste mi geliyor?

Tarayıcı geliştirici araçları ile (F12 → Cihaz simülatörü) kontrol edin.

---

Saat 17:30 — GitHub'a Yükleyin (15 dakika)

git init
git add .
git commit -m "ilk commit: danismanlik landing page"

1. github.com → Yeni repo oluşturun
2. Verilen komutları terminalde çalıştırın

---

Saat 17:45 — Vercel'e Deploy Edin (15 dakika)

1. vercel.com → GitHub ile giriş
2. "Add New Project" → Repo'nuzu seçin
3. "Deploy" — 2-3 dakika bekleyin
4. ✅ Siteniz canlıda!

Vercel size otomatik olarak bir URL verir: danismanlik-sitesi.vercel.app

Özel domain bağlamak isterseniz (örnek.com): Vercel dashboard → Domains bölümünden ekleyin.

---

Saat 18:00 — Tebrikler 🎉

Siteniz canlıda. Ne yaptınız?

• ✅ Profesyonel landing page
• ✅ Mobil uyumlu
• ✅ Modern tasarım
• ✅ İletişim formu
• ✅ Ücretsiz HTTPS
• ✅ Otomatik deploy sistemi

Toplam süre: ~8 saat
Toplam maliyet: 0 TL

---

Sonraki Adımlar

1. Google Analytics ekleyin (trafiği takip edin)
2. SEO meta etiketleri düzenleyin
3. İletişim formu gerçek email gönderecek şekilde bağlayın (Resend veya EmailJS)
4. Google Search Console'a ekleyin
5. Özel domain alın (yıllık ~200-500 TL)

---

Daha Hızlı Olmak İster misiniz?

Bu rehberi okuyarak 1 günde site yapmak mümkün — ama eğitimle çok daha hızlı ve verimli yapabilirsiniz.

Birebir Vibe Coding eğitimimizde:

• Cursor'u profesyonelce kullanmayı öğrenin
• Prompt yazma tekniklerinde ustalaşın
• Kendi projeniz üzerinde çalışın
• Eğitim boyunca WhatsApp desteği alın

Vibe Coding Eğitimi hakkında bilgi alın →

Ücretsiz keşif görüşmesi için randevu alın →

---

İlgili Yazılar:

• Cursor AI ile Kod Yazma: Türkçe Başlangıç Rehberi
• Programlama Bilmeden Uygulama Geliştirme
• Vibe Coding ile SaaS Uygulama Geliştirme

Etiketler: #YapayZeka #WebSitesi #VibeCoding #Cursor #1Gün #LandingPage #Hızlı