Next.js 15 ile Startup Bekleme Listesi Sayfası Nasıl Oluşturulur?

Next.js 15'in sunduğu yenilikleri kullanarak startup projeleriniz için etkileyici bir bekleme listesi sayfası oluşturmak istiyorsanız, doğru yerdesiniz. Geliştiriciler ve girişimciler için özel olarak hazırlanan bir şablon projesi olan Orbit'in arkasındaki teknik kararları ve tasarım stratejilerini ayrıntılı olarak inceledik.

Neden Next.js 15 ve CSS Modülleri?

Çoğu şablon projesi Tailwind CSS kullanıyor olabilir, ancak satın alan kullanıcıların büyük bir kısmı için bu durum bazı zorlukları beraberinde getiriyor. Tailwind’in sunduğu esneklik ve hız avantajlarının yanı sıra, öğrenme eğrisi ve derleme süreci alıcıların sıklıkla şikayet ettiği noktalar arasında yer alıyor. Bu nedenle, temiz ve okunabilir CSS koduna sahip olmak isteyenler için CSS Modülleri ideal bir alternatif sunuyor.

CSS Modülleri tercih etmenin temel avantajları şunlar:

• Yerel olarak kapsüllenmiş sınıf adları sayesinde isim çatışmaları yaşanmaz.
• Standart CSS sözdizimi kullanıldığından, geliştiriciler yeni bir sentaks öğrenmek zorunda kalmaz.
• Sıfır çalışma zamanı maliyetiyle performans kaybı yaşanmaz.
• Next.js ile doğrudan entegre çalıştığından ek yapılandırmaya gerek kalmaz.

Tailwind’in tek avantajı olan tekrar eden yardımcı sınıfların kısa yazım biçimi, bu projede CSS Modülleri lehine feda edildi. Ancak bu fedakarlık, satışa sunulan bir ürün için okunabilir ve düzenlenebilir kodun önemini artırıyor.

Bento Grid Tasarımı ve 1 Piksellik Kenar Boşluğu Hilesi

Özellikler bölümünde kullanılan CSS Grid yapısı, modern web tasarımının en popüler trendlerinden biri olan bento grid'in temelini oluşturuyor. Üç sütunluk bir grid sistemi kullanılırken, ilk kartın iki sütun genişliğinde olması gerekiyor. Bu tasarımın en dikkat çekici yönü ise, kenar çizgilerinin nasıl oluşturulduğu.

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.bento .card:first-child {
  grid-column: span 2;
}

Geleneksel yaklaşımda her bir kartın kenarına ayrı ayrı sınır eklemek yaygınken, burada grid’in arka plan rengi sınır rengi olarak ayarlanıyor ve 1 piksellik boşluklar kullanılıyor. Kartların kendisinde ise herhangi bir sınır bulunmuyor. Bu yöntem, ekstra HTML etiketleri eklemeye gerek kalmadan mükemmel şekilde hizalanmış ızgara çizgileri oluşturuyor.

Görünümdeki Metrikler için Animasyonlu Sayaç Uygulaması

Metrikler bölümünde yer alan sayaçlar, kullanıcı sayfanın ilgili bölümüne geldiğinde otomatik olarak artmaya başlıyor. Bu animasyon, IntersectionObserver API’si kullanılarak gerçekleştiriliyor. Böylece, kullanıcı sayfanın o bölümünü gördüğünde sayaçlar canlanıyor ve sayılar artıyor.

const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting && !started.current) {
    started.current = true;
    const startTime = performance.now();

    const tick = (now: number) => {
      const progress = Math.min((now - startTime) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3); // Kübik yumuşatma
      setCount(Math.round(eased * end));

      if (progress < 1) {
        requestAnimationFrame(tick);
      }
    };

    requestAnimationFrame(tick);
  }
}, { threshold: 0.4 });

Burada started referansı, kullanıcı sayfadan uzaklaşır ve tekrar geri dönerse animasyonun yeniden tetiklenmesini engelliyor. Lineer animasyon yerine kübik yumuşatma fonksiyonu kullanılması, sayaçların doğal ve akıcı bir şekilde artmasını sağlıyor. Üçüncü parti bir kütüphaneye ihtiyaç duymadan, sadece 30 satır TypeScript kodu ile bu etkileyici animasyonu oluşturmak mümkün.

Sonsuz Logo Marquee Efekti (Sadece CSS)

Logo listesinin sürekli olarak sağdan sola kaydığı bir efekt oluşturmak için basit bir CSS çözümü kullanılıyor. Bu yöntem, ek JavaScript koduna ihtiyaç duymadan tamamen CSS ile gerçekleştiriliyor.

.row {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: marquee 24s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

Marquee efektinin anahtarı, logoların dizi olarak iki kez kopyalanması ve animasyonun -50% değerinde gerçekleştirilmesi. Bu sayede, animasyonun başlangıcından bitişine kadar olan geçiş mükemmel şekilde devam ediyor. Kenarlarda yumuşak bir geçiş efekti oluşturmak içinse, ana öğeye maskeleme uygulaması ekleniyor:

.track {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
}

Tüm İçeriklerin Tek Bir Dosyada Yönetilmesi

Orbit şablonunda, tüm düzenlenebilir içerikler — şirket adı, açıklamalar, gezinme bağlantıları, logolar, özellikler, metrikler, referanslar ve SSS — tek bir dosyada, src/lib/constants.ts adresinde toplanmış durumda. Bu sayede, alıcılar sadece bu dosyayı değiştirerek tüm sayfanın içeriğini güncelleyebiliyor. Bileşenler arasında dolaşmak zorunda kalmıyor ve zamandan ciddi anlamda tasarruf ediyor.

Tasarım Değişkenleri ile Kolayca Yeniden Markalaşma

Tüm şablonun görsel temasını değiştirmek için sadece sekiz tane tasarım değişkeni tanımlanıyor. Bu değişkenler, globals.css dosyasında yer alıyor:

:root {
  --color-accent: #f59e0b; /* Bu değeri değiştir → tüm markalaşma değişiyor */
  --color-bg: #09090b;
  --font-display: 'Sora', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --radius-lg: 16px;
}

Böylece, sadece bir renk kodunu değiştirerek tüm şablonun tonunu ve havasını kolayca yeniden düzenlemek mümkün hale geliyor.

Bekleme Listesi Formunun Entegrasyonu

Şablonla birlikte gelen bekleme listesi formu, simüle edilmiş bir gecikmeyle çalışıyor. Ancak gerçek bir projeye entegre etmek için bu kısmın değiştirilmesi gerekiyor. Formu ConvertKit, Loops veya başka bir hizmete bağlamak için aşağıdaki kod parçaları kullanılabilir:

// ConvertKit'e bağlanma
await fetch(` {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    api_key: KEY,
    email,
  }),
});

// Loops'a bağlanma
await fetch(' {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email,
  }),
});

Next.js 15’in sunduğu yenilikler ve özenle seçilmiş tasarım kararlarıyla oluşturulan Orbit, startup projeleriniz için hazır bir bekleme listesi sayfası oluşturmanın en etkili yollarından biri. Eğer siz de benzer bir proje için hızlı ve profesyonel bir çözüm arıyorsanız, bu şablon tam da ihtiyacınız olan şey olabilir.