redesign the homepage

2026-06-26 16:27:21 -04:00
parent 256ff0814e
commit d7fb7b7a7b
1030 changed files with 107374 additions and 2657 deletions
@@ -0,0 +1,159 @@
+import Link from 'next/link'
+import { marketplaceFetchOrDefault } from '@/lib/api'
+import { getMarketplaceLanguage } from '@/lib/i18n.server'
+import { formatCurrency } from '@rentaldrivego/types'
+
+interface CompanyProfile {
+  id: string
+  name: string
+  slug: string
+  brand: {
+    displayName: string
+    logoUrl: string | null
+    publicCity: string | null
+    publicCountry: string | null
+    publicPhone: string | null
+    whatsappNumber: string | null
+    marketplaceRating: number | null
+  } | null
+  vehicles: Array<{ id: string; make: string; model: string; dailyRate: number; photos: string[]; category: string; availability: boolean; nextAvailableAt: string | null }>
+  offers: Array<{ id: string; title: string; discountValue: number; validUntil: string }>
+}
+
+export default async function CompanyProfilePage({ params }: { params: { slug: string } }) {
+  const language = await getMarketplaceLanguage()
+  const dict = {
+    en: {
+      unavailable: 'Marketplace unavailable',
+      unavailableTitle: 'Company details are temporarily unavailable.',
+      unavailableBody: 'The marketplace API is running, but the database is not reachable in this local environment.',
+      backToExplore: 'Back to explore',
+      partner: 'Marketplace partner',
+      vehicles: 'vehicles',
+      offers: 'active offers',
+      rating: 'Rating',
+      new: 'New',
+      currentOffers: 'Current offers',
+      validUntil: 'Valid until',
+      noOffers: 'No active offers right now.',
+      fleet: 'Fleet',
+      viewVehicle: 'View vehicle',
+      availableFrom: 'Available from',
+      unavailableNoDate: 'Temporarily unavailable for new reservations.',
+    },
+    fr: {
+      unavailable: 'Marketplace indisponible',
+      unavailableTitle: "Les détails de l'entreprise sont temporairement indisponibles.",
+      unavailableBody: "L'API marketplace fonctionne, mais la base de données n'est pas accessible dans cet environnement local.",
+      backToExplore: "Retour à l'exploration",
+      partner: 'Partenaire marketplace',
+      vehicles: 'véhicules',
+      offers: 'offres actives',
+      rating: 'Note',
+      new: 'Nouveau',
+      currentOffers: 'Offres actuelles',
+      validUntil: "Valable jusqu'au",
+      noOffers: 'Aucune offre active pour le moment.',
+      fleet: 'Flotte',
+      viewVehicle: 'Voir le véhicule',
+      availableFrom: 'Disponible à partir du',
+      unavailableNoDate: 'Temporairement indisponible pour les nouvelles réservations.',
+    },
+    ar: {
+      unavailable: 'السوق غير متاح',
+      unavailableTitle: 'تفاصيل الشركة غير متاحة مؤقتاً.',
+      unavailableBody: 'واجهة السوق تعمل، لكن قاعدة البيانات غير متاحة في هذه البيئة المحلية.',
+      backToExplore: 'العودة إلى الاستكشاف',
+      partner: 'شريك في السوق',
+      vehicles: 'مركبات',
+      offers: 'عروض نشطة',
+      rating: 'التقييم',
+      new: 'جديد',
+      currentOffers: 'العروض الحالية',
+      validUntil: 'صالح حتى',
+      noOffers: 'لا توجد عروض نشطة حالياً.',
+      fleet: 'الأسطول',
+      viewVehicle: 'عرض السيارة',
+      availableFrom: 'متاح ابتداءً من',
+      unavailableNoDate: 'غير متاحة مؤقتاً للحجوزات الجديدة.',
+    },
+  }[language]
+  const company = await marketplaceFetchOrDefault<CompanyProfile | null>(`/marketplace/${params.slug}`, null)
+
+  if (!company) {
+    return (
+      <main className="site-page">
+        <div className="site-section">
+          <section className="card p-8">
+            <p className="text-sm uppercase tracking-[0.18em] text-orange-700 dark:text-orange-400">{dict.unavailable}</p>
+            <h1 className="mt-3 text-3xl font-black text-stone-900 dark:text-stone-100">{dict.unavailableTitle}</h1>
+            <p className="mt-3 text-stone-600 dark:text-stone-400">{dict.unavailableBody}</p>
+            <div className="mt-6">
+              <Link href="/explore" className="rounded-full bg-blue-900 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400">{dict.backToExplore}</Link>
+            </div>
+          </section>
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <main className="site-page">
+      <div className="site-section space-y-8">
+        <section className="card p-8">
+          <p className="text-sm uppercase tracking-[0.18em] text-orange-700 dark:text-orange-400">{company.brand?.publicCity ?? dict.partner}</p>
+          <h1 className="mt-3 text-4xl font-black text-stone-900 dark:text-stone-100">{company.brand?.displayName ?? company.name}</h1>
+          <p className="mt-3 text-stone-600 dark:text-stone-400">{company.brand?.publicCountry ?? ''}</p>
+          <div className="mt-6 flex flex-wrap gap-3 text-sm text-stone-500 dark:text-stone-400">
+            <span>{company.vehicles.length} {dict.vehicles}</span>
+            <span>{company.offers.length} {dict.offers}</span>
+            <span>{dict.rating} {company.brand?.marketplaceRating?.toFixed(1) ?? dict.new}</span>
+          </div>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.currentOffers}</h2>
+          <div className="mt-4 grid gap-4 md:grid-cols-2">
+            {company.offers.map((offer) => (
+              <div key={offer.id} className="card p-5">
+                <p className="text-sm font-semibold text-stone-900 dark:text-stone-100">{offer.title}</p>
+                <p className="mt-2 text-3xl font-black text-orange-700 dark:text-orange-400">{offer.discountValue}%</p>
+                <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">{dict.validUntil} {new Date(offer.validUntil).toLocaleDateString()}</p>
+              </div>
+            ))}
+            {company.offers.length === 0 && <div className="card p-6 text-sm text-stone-500 dark:text-stone-400">{dict.noOffers}</div>}
+          </div>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.fleet}</h2>
+          <div className="mt-4 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+            {company.vehicles.map((vehicle) => (
+              <article key={vehicle.id} className="card">
+                <div className="aspect-[16/10] overflow-hidden rounded-t-[2rem] bg-stone-100 dark:bg-blue-900/30">
+                  {vehicle.photos[0] ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img src={vehicle.photos[0]} alt={`${vehicle.make} ${vehicle.model}`} className="h-full w-full object-cover" />
+                  ) : null}
+                </div>
+                <div className="p-4">
+                  <h3 className="truncate text-lg font-bold text-stone-900 dark:text-stone-100">{vehicle.make} {vehicle.model}</h3>
+                  <p className="mt-1 truncate text-sm text-stone-500 dark:text-stone-400">{vehicle.category}</p>
+                  {!vehicle.availability && (
+                    <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">
+                      {vehicle.nextAvailableAt ? `${dict.availableFrom} ${new Date(vehicle.nextAvailableAt).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric' })}` : dict.unavailableNoDate}
+                    </p>
+                  )}
+                  <div className="mt-4 flex items-end justify-between gap-3">
+                    <p className="min-w-0 truncate text-xl font-black text-stone-900 dark:text-stone-100">{formatCurrency(vehicle.dailyRate, 'MAD', language)}</p>
+                    <Link href={`/explore/${params.slug}/vehicles/${vehicle.id}`} className="shrink-0 rounded-full bg-blue-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400">{dict.viewVehicle}</Link>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </section>
+      </div>
+    </main>
+  )
+}