root
235 lines
12 KiB
TypeScript
235 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { useMarketplacePreferences } from '@/components/MarketplaceShell'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import { resolveBrowserAppUrl } from '@/lib/appUrls'
|
|
|
|
export default function WorkspaceTabs() {
|
|
const { language, theme } = useMarketplacePreferences()
|
|
const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001')
|
|
|
|
const copy = {
|
|
en: {
|
|
badge: 'Unified Workspace',
|
|
title: 'One launch point on port 3000 for marketplace discovery, company operations, and platform admin work.',
|
|
intro:
|
|
'The apps still run as separate Next.js surfaces internally, but the navbar now takes you straight to each workspace area without hunting for ports.',
|
|
sectionBadge: 'RentalDriveGo Marketplace',
|
|
sectionTitle: 'Browse local rental fleets without losing the company behind the wheel.',
|
|
sectionBodyA: 'Discovery happens here. Booking and payment happen on each rental company\'s own branded site.',
|
|
sectionBodyB: 'Customers only reach that branded booking site after selecting a vehicle from a company\'s fleet.',
|
|
exploreVehicles: 'Explore vehicles',
|
|
viewPricing: 'View pricing',
|
|
nowServing: 'Now serving',
|
|
promoTitle: 'Discovery, pricing, owner sign-in, and booking entry all stay anchored on the marketplace surface.',
|
|
promoBody:
|
|
'Company Workspace and Platform Operations stay available from the navbar, while branded booking starts after a renter picks a vehicle.',
|
|
customerPaths: 'Customer Paths',
|
|
ownerSignIn: 'Owner sign in',
|
|
pricing: 'Pricing',
|
|
workspaceAreas: 'Workspace Areas',
|
|
workspaceA: 'Company Workspace for fleet operations, team, billing, and analytics.',
|
|
workspaceB: 'Platform Operations for platform-level support and tenant oversight.',
|
|
workspaceC: 'Branded booking handoff begins only after a renter chooses a specific vehicle.',
|
|
},
|
|
fr: {
|
|
badge: 'Espace unifie',
|
|
title: 'Un point d\'entree sur le port 3000 pour la decouverte marketplace, les operations entreprise et l\'administration plateforme.',
|
|
intro:
|
|
'Les applications restent des surfaces Next.js separees en interne, mais la barre de navigation mene directement vers chaque espace sans changer de port manuellement.',
|
|
sectionBadge: 'Marketplace RentalDriveGo',
|
|
sectionTitle: 'Parcourez les flottes locales sans perdre l\'identite de l\'entreprise qui gere la location.',
|
|
sectionBodyA: 'La decouverte commence ici. La reservation et le paiement se font sur le site de reservation propre a chaque entreprise.',
|
|
sectionBodyB: 'Les clients accedent a ce site de reservation seulement apres avoir choisi un vehicule dans la flotte d\'une entreprise.',
|
|
exploreVehicles: 'Explorer les vehicules',
|
|
viewPricing: 'Voir les tarifs',
|
|
nowServing: 'Disponible',
|
|
promoTitle: 'La decouverte, les tarifs, la connexion proprietaire et l\'entree vers la reservation restent ancrees dans la marketplace.',
|
|
promoBody:
|
|
'Espace entreprise et Operations plateforme restent accessibles depuis la navigation, tandis que la reservation de marque commence apres le choix d\'un vehicule.',
|
|
customerPaths: 'Parcours client',
|
|
ownerSignIn: 'Connexion proprietaire',
|
|
pricing: 'Tarifs',
|
|
workspaceAreas: 'Espaces de travail',
|
|
workspaceA: 'Espace entreprise pour la flotte, l\'equipe, la facturation et l\'analyse.',
|
|
workspaceB: 'Operations plateforme pour le support global et la supervision des tenants.',
|
|
workspaceC: 'Le transfert vers la reservation de marque commence seulement apres le choix d\'un vehicule precis.',
|
|
},
|
|
ar: {
|
|
badge: 'مساحة موحدة',
|
|
title: 'نقطة دخول واحدة على المنفذ 3000 لاكتشاف السوق وعمليات الشركات وإدارة المنصة.',
|
|
intro:
|
|
'ما زالت التطبيقات تعمل كأسطح Next.js منفصلة داخلياً، لكن شريط التنقل ينقلك مباشرة إلى كل مساحة عمل بدون البحث عن المنافذ.',
|
|
sectionBadge: 'سوق RentalDriveGo',
|
|
sectionTitle: 'تصفح أساطيل التأجير المحلية من دون فقدان هوية الشركة التي تدير الحجز.',
|
|
sectionBodyA: 'الاكتشاف يبدأ هنا. الحجز والدفع يتمان على موقع الحجز الخاص بكل شركة.',
|
|
sectionBodyB: 'لا يصل العميل إلى موقع الحجز الخاص بالشركة إلا بعد اختيار سيارة من أسطول تلك الشركة.',
|
|
exploreVehicles: 'استكشف السيارات',
|
|
viewPricing: 'عرض الأسعار',
|
|
nowServing: 'المتاح الآن',
|
|
promoTitle: 'الاكتشاف والأسعار وتسجيل دخول المالك وبداية الحجز تبقى كلها داخل واجهة السوق.',
|
|
promoBody:
|
|
'تبقى مساحة الشركة وعمليات المنصة متاحتين من شريط التنقل، بينما يبدأ الحجز المرتبط بالعلامة التجارية بعد اختيار المستأجر لسيارة.',
|
|
customerPaths: 'مسارات العملاء',
|
|
ownerSignIn: 'دخول المالك',
|
|
pricing: 'الأسعار',
|
|
workspaceAreas: 'مساحات العمل',
|
|
workspaceA: 'مساحة الشركة لإدارة الأسطول والفريق والفوترة والتحليلات.',
|
|
workspaceB: 'عمليات المنصة للدعم والإشراف على المستأجرين على مستوى المنصة.',
|
|
workspaceC: 'الانتقال إلى موقع الحجز الخاص بالشركة يبدأ فقط بعد اختيار سيارة محددة.',
|
|
},
|
|
}[language]
|
|
|
|
return (
|
|
<main className={`min-h-screen transition-colors ${
|
|
theme === 'dark'
|
|
? 'bg-[radial-gradient(circle_at_top,#451a03,transparent_28%),linear-gradient(180deg,#0c0a09,#111827)]'
|
|
: 'bg-[radial-gradient(circle_at_top,#fef3c7,transparent_28%),linear-gradient(180deg,#fafaf9,white)]'
|
|
}`}>
|
|
<div className="shell py-16 sm:py-20">
|
|
<div className="max-w-4xl">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/" aria-label="RentalDriveGo home">
|
|
<Image
|
|
src="/rentalcardrive.png"
|
|
alt="RentalDriveGo"
|
|
width={72}
|
|
height={72}
|
|
className={`h-16 w-16 rounded-2xl object-contain p-1 shadow-sm ${
|
|
theme === 'dark' ? 'border border-amber-500/40 bg-stone-900' : 'border border-amber-200 bg-white'
|
|
}`}
|
|
/>
|
|
</Link>
|
|
<p className={`text-sm font-semibold uppercase tracking-[0.24em] ${
|
|
theme === 'dark' ? 'text-amber-300' : 'text-amber-700'
|
|
}`}>
|
|
{copy.badge}
|
|
</p>
|
|
</div>
|
|
<h1 className={`mt-5 text-4xl font-black tracking-tight sm:text-6xl ${
|
|
theme === 'dark' ? 'text-stone-100' : 'text-stone-900'
|
|
}`}>
|
|
{copy.title}
|
|
</h1>
|
|
<p className={`mt-6 max-w-3xl text-lg leading-8 ${
|
|
theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
|
|
}`}>
|
|
{copy.intro}
|
|
</p>
|
|
</div>
|
|
|
|
<section className={`mt-10 overflow-hidden rounded-[2rem] border shadow-xl transition-colors ${
|
|
theme === 'dark'
|
|
? 'border-stone-800 bg-stone-900 shadow-black/20'
|
|
: 'border-stone-200 bg-white shadow-stone-200/40'
|
|
}`}>
|
|
<div className={`px-6 py-6 ${theme === 'dark' ? 'border-b border-stone-800' : 'border-b border-stone-200'}`}>
|
|
<p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
|
|
theme === 'dark' ? 'text-amber-300' : 'text-amber-700'
|
|
}`}>
|
|
{copy.sectionBadge}
|
|
</p>
|
|
<div className="mt-3 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
|
<div className="max-w-3xl">
|
|
<h2 className={`text-2xl font-black tracking-tight ${
|
|
theme === 'dark' ? 'text-stone-100' : 'text-stone-900'
|
|
}`}>
|
|
{copy.sectionTitle}
|
|
</h2>
|
|
<p className={`mt-3 text-sm leading-7 ${
|
|
theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
|
|
}`}>
|
|
{copy.sectionBodyA}
|
|
</p>
|
|
<p className={`mt-3 text-sm leading-7 ${
|
|
theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
|
|
}`}>
|
|
{copy.sectionBodyB}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<Link
|
|
href="/explore"
|
|
className={`rounded-full px-5 py-2.5 text-sm font-semibold transition ${
|
|
theme === 'dark'
|
|
? 'bg-amber-400 text-stone-950 hover:bg-amber-300'
|
|
: 'bg-stone-900 text-white hover:bg-stone-700'
|
|
}`}
|
|
>
|
|
{copy.exploreVehicles}
|
|
</Link>
|
|
<Link
|
|
href="/pricing"
|
|
className={`rounded-full border px-5 py-2.5 text-sm font-semibold transition ${
|
|
theme === 'dark'
|
|
? 'border-stone-700 text-stone-200 hover:border-stone-500 hover:bg-stone-800'
|
|
: 'border-stone-300 text-stone-700 hover:border-stone-400 hover:bg-stone-50'
|
|
}`}
|
|
>
|
|
{copy.viewPricing}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`grid gap-6 px-6 py-8 lg:grid-cols-[1.4fr_0.9fr] ${
|
|
theme === 'dark' ? 'bg-stone-950' : 'bg-stone-50'
|
|
}`}>
|
|
<div className="rounded-[1.5rem] bg-[linear-gradient(135deg,#1c1917,#44403c)] p-8 text-white">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-amber-300">{copy.nowServing}</p>
|
|
<h3 className="mt-4 text-3xl font-black tracking-tight">
|
|
{copy.promoTitle}
|
|
</h3>
|
|
<p className="mt-4 max-w-2xl text-sm leading-7 text-stone-200">
|
|
{copy.promoBody}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4">
|
|
<div className={`rounded-[1.5rem] border p-5 ${
|
|
theme === 'dark' ? 'border-stone-800 bg-stone-900' : 'border-stone-200 bg-white'
|
|
}`}>
|
|
<p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
|
|
theme === 'dark' ? 'text-stone-400' : 'text-stone-500'
|
|
}`}>{copy.customerPaths}</p>
|
|
<div className="mt-4 flex flex-wrap gap-3">
|
|
<Link href="/explore" className="rounded-full bg-amber-500 px-4 py-2 text-sm font-semibold text-white">
|
|
{copy.exploreVehicles}
|
|
</Link>
|
|
<Link className={`rounded-full border px-4 py-2 text-sm font-semibold ${
|
|
theme === 'dark' ? 'border-stone-700 text-stone-200' : 'border-stone-300 text-stone-700'
|
|
}`} href={`${dashboardUrl}/sign-in`}>
|
|
{copy.ownerSignIn}
|
|
</Link>
|
|
<Link className={`rounded-full border px-4 py-2 text-sm font-semibold ${
|
|
theme === 'dark' ? 'border-stone-700 text-stone-200' : 'border-stone-300 text-stone-700'
|
|
}`} href="/pricing">
|
|
{copy.pricing}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`rounded-[1.5rem] border p-5 ${
|
|
theme === 'dark' ? 'border-stone-800 bg-stone-900' : 'border-stone-200 bg-white'
|
|
}`}>
|
|
<p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
|
|
theme === 'dark' ? 'text-stone-400' : 'text-stone-500'
|
|
}`}>{copy.workspaceAreas}</p>
|
|
<ul className={`mt-4 space-y-3 text-sm ${
|
|
theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
|
|
}`}>
|
|
<li>{copy.workspaceA}</li>
|
|
<li>{copy.workspaceB}</li>
|
|
<li>{copy.workspaceC}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|