fixing platform admin
This commit is contained in:
root
@@ -0,0 +1,233 @@
|
||||
'use client'
|
||||
|
||||
import { useMarketplacePreferences } from '@/components/MarketplaceShell'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function WorkspaceTabs() {
|
||||
const { language, theme } = useMarketplacePreferences()
|
||||
const dashboardUrl = 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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user