FZS GYM FITNESS — Modern Fitness & Wellness Sitesi

FZS GYM FITNESS için tasarlanmış, satışa hazır, tek sayfalık modern fitness & wellness tanıtım sitesi. React 19 + Vite + Tailwind + Neon Postgres + Vercel Serverless ile tam dinamik içerik yönetimi.

---

✨ Özellikler

• Tek dosyalık build — npm run build sonrası dist/index.html tek dosya; her hostinge at-çalıştır
• 14 Bölüm — Hero (video + fallback), İstatistikler, Hakkımızda, Programlar, Üyelik Paketleri, Antrenörler, Galeri (lightbox), Ders Takvimi, Yorumlar, SSS, İletişim (WhatsApp form + harita), CTA
• WhatsApp entegrasyonu — Tüm üyelik paketleri ve iletişim formu doğrudan wa.me ile mesaj açar
• Tam responsive — Mobil hamburger menü, dokunmatik dostu, prefers-reduced-motion destekli animasyonlar
• SEO hazır — Türkçe içerik, semantik HTML, Open Graph meta
• Gerçek backend — Neon Postgres + Vercel Serverless Functions; admin panelindeki değişiklikler veritabanına yazılır ve tüm ziyaretçilere anında yansır
• Güvenli admin — scrypt hash, 256-bit token, oturum iptali

🚀 Hızlı Başlangıç

git clone https://github.com/Furkan1DEV/MuscleworldXL.git
cd MuscleworldXL
npm install

# .env.local oluştur
# DATABASE_URL=postgresql://USER:PASSWORD@HOST-pooler.REGION.aws.neon.tech/neondb?sslmode=require

npm run dev          # Vite dev — http://localhost:5173
vercel dev           # API + frontend birlikte — http://localhost:3000

Üretim

npm run build      # dist/index.html → tek dosya (vite-plugin-singlefile)
npm run preview    # üretim sürümünü test et
npm run typecheck  # tsc --noEmit

🔐 Yönetim Paneli (Admin)

• Erişim: /#/admin veya footer'daki Yönetici linki
• Varsayılan şifre: admin123 (Ayarlar → Güvenlik'ten değiştir)
• Yönetilen bölümler: Salon bilgileri, Medya & görseller, İstatistikler, Özellikler, Kayan yazı, Programlar, Üyelik paketleri, Kişisel antrenör, Antrenörler, Galeri, Ders takvimi, Yorumlar, SSS, Menü
• Her bölümde: ekle / sil / sırala / düzenle + canlı önizleme
• Yayınlama: Yayınla butonu PUT /api/content → Neon Postgres'e yazar, ziyaretçiler GET /api/content ile anında görür. Yayınlamadan önceki değişiklikler tarayıcı taslağında kalır.
• Yedekleme: JSON dışa/içe aktarma, varsayılanlara sıfırlama

🔐 Şifre sunucuda scrypt ile hash'lenir, token 256-bit rastgele üretilir. Şifre değiştirildiğinde diğer oturumlar iptal edilir.

🎨 İçerik Nasıl Değiştirilir?

Tüm varsayılan içerik tek dosyada:

src/data/content.ts

Alan	Açıklama
gym	Salon adı, slogan, telefon, WhatsApp, e-posta, adres, Instagram, saatler, harita
images	hero, interior, strength, crossfit, cardio, cta
stats	İstatistik kartları
features	Hakkımızda özellikleri
programs	Program kartları
plans / ptPlan	Üyelik paketleri + kişisel antrenör
trainers	Antrenör kadrosu
gallery	Galeri görselleri (Pexels URL)
schedule	Ders takvimi
testimonials	Müşteri yorumları
faqs	Sık sorulan sorular
nav	Menü bağlantıları

Tema renkleri src/index.css → @theme:

--color-fire-500: #f97316; /* ana turuncu */
--color-ink-950:  #07070a;  /* koyu zemin */

📁 Proje Yapısı

src/
├── data/content.ts           # Varsayılan içerik + tipler
├── content/
│   ├── ContentContext.tsx    # Provider: API'den çekme, taslak, auth, publish
│   └── utils.ts
├── admin/
│   ├── AdminApp.tsx          # Layout, sidebar, toasts
│   ├── Login.tsx
│   ├── sections.tsx          # Tüm bölüm editörleri
│   └── fields.tsx
├── components/               # Sayfa bölümleri + UI
├── assets/                   # hero, interior, strength, crossfit, cardio, cta
├── App.tsx
└── index.css
api/
├── content.ts                # GET (public) / PUT (admin)
├── auth/login.ts, me.ts, logout.ts, change-password.ts
├── admin/reset.ts
└── _lib/ db, crypto, http

🌍 Deploy (Vercel + Neon)

1. Veritabanı — Neon

neon auth
neon projects create --name fzs-gym-fitness --region-id aws-eu-central-1 --set-context
neon connection-string  # pooler host'lu URL'i al

2. Vercel Ortam Değişkenleri

vercel env add DATABASE_URL production
vercel env add DATABASE_URL preview
vercel env add DATABASE_URL development
# İsteğe bağlı: ADMIN_PASSWORD (ilk kurulum şifresi, yoksa admin123)

3. Deploy

Vercel'e repoyu bağla → Framework Preset: Vite (otomatik) → her push otomatik deploy. Yerel API testi için vercel dev.

Statik hosting (Netlify, GitHub Pages) backend gerektirdiğinden admin yayınlama için uygun değildir.

🛠 Teknolojiler

• React 19 + TypeScript 5
• Vite 7 + vite-plugin-singlefile
• Tailwind CSS 4
• lucide-react
• Neon Postgres + @neondatabase/serverless
• Vercel Serverless Functions

📄 Lisans

MIT — dilediğin gibi kullan, geliştir ve yayınla.

---

FZS GYM FITNESS — Bedenini Yeniden Şekillendir. Admin: /#/admin · İletişim: WhatsApp entegreli form