Bu tarz script yapmak için nasıl bir yol izlenmeli ?

Demo

ahmet.arslan@mail.com
admin123

Asıl sorum tarayıcıdan bile girdiğimizde tablet responsive modunda göstermek ve tek url üzerinden sayfa geçişleri , next js ile mi tasarlanmış ? mobil modunda ise mobil görünüme geçiyor
cursor ile bir kaç tasarım çalıştım tarayıcı modunda da tek sayfa responsive gözükmesi için beceremedim

Responsive ayarı dogrudan js ye falan girmeden yapılabilir. Yani Boostrap kullanıyorsanız grid(col- diye yazılır) boyutlarını mobil/masaüstü şeklinde ayarlarsanız 2, mobil/tablet/masaüstü/ şeklinde ayarlarsanız 3 farklı responsive mod elde edersiniz.

hocamın dediği gibi, boostrap ile mobil görünümü komple değiştirip farklı bir arayüz bile oluşturabilirsiniz

Tek url üzerinden geçiş konusu büyük ihtimalle route değiştirmekten çok içeride aktif sayfayı değiştirerek yapılmış. Yani anasayfa, ilanlar, talepler, profil gibi alanlar aynı url içinde component olarak
değişiyor. O yüzden tıklayınca sayfa yenilenmiyor, sadece içerik değişiyor.

Cursor ile yaptırırken bence direkt şunu tarif etmek lazım; desktop görünümde klasik admin panel gibi genişlemesin, ortada mobil/tablet app görünümünde kalsın. Alt menüden geçişlerde de url değişmeden içerik
değişsin dersen daha doğru sonuç verir.

Next js ile yapılır, react vite ile de yapılır. Burda önemli olan frameworkten çok app shell mantığını doğru kurmak.

Geçişlerde gördüğümüz bütün elementler aslında DOM’da mevcut görünüyor. Kaynak koda baktığımda [f, m] = useState("home") yapısı var ve m state'ine göre elementlerin görünürlüğü değişiyor. Örneğin: "js ("button", { onClick: () => m("meetings")" (chunk dosyasından aldım), bu butona tıklandığında "f" state'i "meetings" oluyor ve toplantılarla ilgili element görünür hale geliyor. Yani route değişmiyor, sadece React state'i üzerinden conditional render yapılıyor

yorumlarınız için teşekkür ederim