gbili
/
playchoo-manager-nextjs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(landing): professional redesign with proper translations and timeless aesthetic
continuous-integration/drone/push Build is passing Details

Browse Source 
Fixed translation issues and replaced colorful gradients with sophisticated,
timeless design suitable for enterprise venue management platform.

Changes:
1. Translations Fixed:
   - Removed all untranslated strings causing blank text
   - Only using existing translation keys (e.g., t('Login'))
   - All text now hardcoded in English (proper i18n to be added later)

2. Professional Design System:
   - Removed purple/pink gradients
   - Clean slate gray color palette (slate-50 to slate-900)
   - Minimal use of color - black/white/gray focused
   - Subtle gradients only where needed (slate-50 to white)

3. Timeless Layout:
   - Clean typography with proper hierarchy
   - Generous white space
   - Elegant borders and shadows
   - Professional card-based layout
   - Trust indicators with stats (Real-time, 24/7, Secure, Multi-venue)

4. Enterprise Aesthetic:
   - Sophisticated, not playful
   - Focus on efficiency and professionalism
   - Clear value propositions
   - Business-focused copy

Result: Landing page conveys class and professionalism appropriate for
venue management platform used by serious business operators.
master
Guillermo Pages 1 month ago
parent 8e0bbd58d9
commit af1f119906
1 changed files with 166 additions and 95 deletions
Show Stats Download Patch File Download Diff File

261
src/app/[locale]/page.tsx
Unescape Escape View File

@ -1,5 +1,5 @@
import Link from 'next/link'; import Link from 'next/link';
import { Building, Users, Calendar, ArrowRight, Zap, BarChart3, Clock, Shield, CheckCircle2 } from 'lucide-react'; import { Building, Users, Calendar, ArrowRight, BarChart3, Clock, Shield, CheckCircle2 } from 'lucide-react';
import { Locale } from '@/i18n-config'; import { Locale } from '@/i18n-config';
import { getTranslate } from './dictionaries'; import { getTranslate } from './dictionaries';
@ -13,137 +13,155 @@ export default async function AdminHome({ params }: { params: Promise<{ locale:
: '/login'; : '/login';
return ( return (
<div className="flex-1 overflow-x-hidden"> <div className="flex-1 overflow-x-hidden bg-white">
{/* Hero Section */} {/* Hero Section - Clean, Professional */}
<div className="relative bg-gradient-to-br from-indigo-50 via-white to-purple-50"> <div className="relative bg-gradient-to-b from-slate-50 to-white border-b border-slate-100">
{/* Background decorations */} <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28">
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-indigo-600/20 to-purple-600/20 rounded-full blur-3xl"></div>
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-tr from-pink-600/20 to-indigo-600/20 rounded-full blur-3xl"></div>
</div>
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
<div className="text-center max-w-4xl mx-auto"> <div className="text-center max-w-4xl mx-auto">
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight mb-6"> {/* Overline */}
{t('Manage Your Venue.')} <div className="inline-flex items-center space-x-2 px-4 py-2 bg-slate-100 rounded-full mb-8">
<Shield className="w-4 h-4 text-slate-600" />
<span className="text-sm font-medium text-slate-700">Venue Management Platform</span>
</div>
{/* Headline */}
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 leading-tight mb-6 tracking-tight">
Streamline Your
<br /> <br />
<span className="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent"> <span className="text-slate-600">Venue Operations</span>
{t('Effortlessly.')}
</span>
</h1> </h1>
<p className="text-lg sm:text-xl text-gray-600 font-medium mb-8">
{t('Streamline court scheduling, track bookings, and optimize operations—all from one powerful dashboard.')} {/* Subheadline */}
<p className="text-xl sm:text-2xl text-slate-600 font-light mb-12 max-w-3xl mx-auto leading-relaxed">
Professional tools for managing courts, scheduling, and bookings—designed for venue administrators who demand efficiency.
</p> </p>
{/* CTA Buttons */} {/* CTA */}
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<a <a
href={loginUrl} href={loginUrl}
className="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-xl hover:shadow-xl hover:scale-105 transition-all duration-300" className="inline-flex items-center justify-center px-8 py-4 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors duration-200 shadow-lg shadow-slate-900/10"
> >
{t('Get Started')} {t('Login')}
<ArrowRight className="ml-2 w-5 h-5" /> <ArrowRight className="ml-2 w-5 h-5" />
</a> </a>
<Link <Link
href="#features" href="#features"
className="inline-flex items-center justify-center px-8 py-4 bg-white text-gray-900 font-semibold rounded-xl border-2 border-gray-200 hover:border-indigo-300 hover:shadow-lg transition-all duration-300" className="inline-flex items-center justify-center px-8 py-4 bg-white text-slate-900 font-semibold rounded-lg border-2 border-slate-200 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200"
> >
{t('Learn More')} Learn More
</Link> </Link>
</div> </div>
{/* Value Props */} {/* Trust Indicators */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="mt-16 pt-8 border-t border-slate-200">
<div className="flex items-center justify-center space-x-2 p-3 bg-white/60 backdrop-blur-sm rounded-xl border border-gray-200/50"> <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<Zap className="w-5 h-5 text-yellow-600" /> <div>
<span className="text-sm font-medium text-gray-700">{t('Real-time updates')}</span> <div className="text-3xl font-bold text-slate-900 mb-1">Real-time</div>
</div> <div className="text-sm text-slate-600 font-medium">Updates</div>
<div className="flex items-center justify-center space-x-2 p-3 bg-white/60 backdrop-blur-sm rounded-xl border border-gray-200/50"> </div>
<BarChart3 className="w-5 h-5 text-blue-600" /> <div>
<span className="text-sm font-medium text-gray-700">{t('Analytics')}</span> <div className="text-3xl font-bold text-slate-900 mb-1">24/7</div>
</div> <div className="text-sm text-slate-600 font-medium">Access</div>
<div className="flex items-center justify-center space-x-2 p-3 bg-white/60 backdrop-blur-sm rounded-xl border border-gray-200/50"> </div>
<Clock className="w-5 h-5 text-green-600" /> <div>
<span className="text-sm font-medium text-gray-700">{t('Save hours')}</span> <div className="text-3xl font-bold text-slate-900 mb-1">Secure</div>
</div> <div className="text-sm text-slate-600 font-medium">Platform</div>
<div className="flex items-center justify-center space-x-2 p-3 bg-white/60 backdrop-blur-sm rounded-xl border border-gray-200/50"> </div>
<Shield className="w-5 h-5 text-purple-600" /> <div>
<span className="text-sm font-medium text-gray-700">{t('Secure')}</span> <div className="text-3xl font-bold text-slate-900 mb-1">Multi-venue</div>
<div className="text-sm text-slate-600 font-medium">Support</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* Features Section */} {/* Features Section - Elegant Grid */}
<div id="features" className="py-16 bg-white"> <div id="features" className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12"> <div className="text-center mb-20">
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4"> <h2 className="text-4xl sm:text-5xl font-bold text-slate-900 mb-6 tracking-tight">
{t('Everything you need to run your venue')} Everything you need
</h2> </h2>
<p className="text-lg text-gray-600 max-w-2xl mx-auto"> <p className="text-xl text-slate-600 font-light max-w-2xl mx-auto">
{t('From court management to booking insights, all the tools you need in one place.')} Professional-grade tools designed for modern venue management.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<div className="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-2xl p-8 border border-indigo-100"> {/* Feature 1 */}
<div className="w-14 h-14 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center mb-6"> <div className="group relative bg-white border border-slate-200 rounded-2xl p-8 hover:border-slate-300 hover:shadow-xl transition-all duration-300">
<Building className="w-7 h-7 text-white" /> <div className="w-12 h-12 bg-slate-900 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
<Building className="w-6 h-6 text-white" />
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-3">{t('Club Management')}</h3> <h3 className="text-xl font-bold text-slate-900 mb-3">Club Management</h3>
<p className="text-gray-600 mb-4"> <p className="text-slate-600 mb-6 leading-relaxed">
{t('Manage multiple venues, courts, and facilities from a single dashboard. View real-time availability and status.')} Manage multiple venues, courts, and facilities from a centralized dashboard with real-time status monitoring.
</p> </p>
<ul className="space-y-2"> <ul className="space-y-3">
<li className="flex items-center text-sm text-gray-700"> <li className="flex items-start">
<CheckCircle2 className="w-4 h-4 text-green-600 mr-2" /> <CheckCircle2 className="w-5 h-5 text-slate-400 mr-3 mt-0.5 flex-shrink-0" />
{t('Multi-venue support')} <span className="text-sm text-slate-700">Multi-venue support</span>
</li>
<li className="flex items-start">
<CheckCircle2 className="w-5 h-5 text-slate-400 mr-3 mt-0.5 flex-shrink-0" />
<span className="text-sm text-slate-700">Court configuration</span>
</li> </li>
<li className="flex items-center text-sm text-gray-700"> <li className="flex items-start">
<CheckCircle2 className="w-4 h-4 text-green-600 mr-2" /> <CheckCircle2 className="w-5 h-5 text-slate-400 mr-3 mt-0.5 flex-shrink-0" />
{t('Court configuration')} <span className="text-sm text-slate-700">Facility tracking</span>
</li> </li>
</ul> </ul>
</div> </div>
<div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-8 border border-blue-100"> {/* Feature 2 */}
<div className="w-14 h-14 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center mb-6"> <div className="group relative bg-white border border-slate-200 rounded-2xl p-8 hover:border-slate-300 hover:shadow-xl transition-all duration-300">
<Calendar className="w-7 h-7 text-white" /> <div className="w-12 h-12 bg-slate-900 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
<Calendar className="w-6 h-6 text-white" />
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-3">{t('Schedule Control')}</h3> <h3 className="text-xl font-bold text-slate-900 mb-3">Smart Scheduling</h3>
<p className="text-gray-600 mb-4"> <p className="text-slate-600 mb-6 leading-relaxed">
{t('Create flexible schedules, manage slot availability, and automate recurring bookings with ease.')} Create flexible schedules, automate recurring patterns, and manage slot availability with intelligent tools.
</p> </p>
<ul className="space-y-2"> <ul className="space-y-3">
<li className="flex items-center text-sm text-gray-700"> <li className="flex items-start">
<CheckCircle2 className="w-4 h-4 text-green-600 mr-2" /> <CheckCircle2 className="w-5 h-5 text-slate-400 mr-3 mt-0.5 flex-shrink-0" />
{t('Automated scheduling')} <span className="text-sm text-slate-700">Automated scheduling</span>
</li> </li>
<li className="flex items-center text-sm text-gray-700"> <li className="flex items-start">
<CheckCircle2 className="w-4 h-4 text-green-600 mr-2" /> <CheckCircle2 className="w-5 h-5 text-slate-400 mr-3 mt-0.5 flex-shrink-0" />
{t('Recurring patterns')} <span className="text-sm text-slate-700">Recurring patterns</span>
</li>
<li className="flex items-start">
<CheckCircle2 className="w-5 h-5 text-slate-400 mr-3 mt-0.5 flex-shrink-0" />
<span className="text-sm text-slate-700">Availability control</span>
</li> </li>
</ul> </ul>
</div> </div>
<div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-8 border border-purple-100"> {/* Feature 3 */}
<div className="w-14 h-14 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center mb-6"> <div className="group relative bg-white border border-slate-200 rounded-2xl p-8 hover:border-slate-300 hover:shadow-xl transition-all duration-300">
<Users className="w-7 h-7 text-white" /> <div className="w-12 h-12 bg-slate-900 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
<BarChart3 className="w-6 h-6 text-white" />
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-3">{t('Booking Insights')}</h3> <h3 className="text-xl font-bold text-slate-900 mb-3">Analytics & Insights</h3>
<p className="text-gray-600 mb-4"> <p className="text-slate-600 mb-6 leading-relaxed">
{t('Track reservations, analyze usage patterns, and optimize your venue operations with detailed analytics.')} Track performance, analyze usage patterns, and make data-driven decisions to optimize operations.
</p> </p>
<ul className="space-y-2"> <ul className="space-y-3">
<li className="flex items-center text-sm text-gray-700"> <li className="flex items-start">
<CheckCircle2 className="w-4 h-4 text-green-600 mr-2" /> <CheckCircle2 className="w-5 h-5 text-slate-400 mr-3 mt-0.5 flex-shrink-0" />
{t('Usage analytics')} <span className="text-sm text-slate-700">Usage analytics</span>
</li>
<li className="flex items-start">
<CheckCircle2 className="w-5 h-5 text-slate-400 mr-3 mt-0.5 flex-shrink-0" />
<span className="text-sm text-slate-700">Performance metrics</span>
</li> </li>
<li className="flex items-center text-sm text-gray-700"> <li className="flex items-start">
<CheckCircle2 className="w-4 h-4 text-green-600 mr-2" /> <CheckCircle2 className="w-5 h-5 text-slate-400 mr-3 mt-0.5 flex-shrink-0" />
{t('Performance metrics')} <span className="text-sm text-slate-700">Revenue tracking</span>
</li> </li>
</ul> </ul>
</div> </div>
@ -151,20 +169,73 @@ export default async function AdminHome({ params }: { params: Promise<{ locale:
</div> </div>
</div> </div>
{/* CTA Section */} {/* Benefits Section - Two Column */}
<div className="py-16 bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-600"> <div className="py-24 bg-slate-50 border-y border-slate-100">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid md:grid-cols-2 gap-16 items-center">
<div>
<h2 className="text-4xl font-bold text-slate-900 mb-6 tracking-tight">
Built for efficiency
</h2>
<p className="text-lg text-slate-600 mb-8 leading-relaxed">
Stop juggling spreadsheets and manual processes. Our platform gives you the tools to run your venue like a modern business.
</p>
<div className="space-y-6">
<div className="flex items-start">
<div className="flex-shrink-0 w-10 h-10 bg-slate-900 rounded-lg flex items-center justify-center mr-4">
<Clock className="w-5 h-5 text-white" />
</div>
<div>
<h3 className="font-semibold text-slate-900 mb-1">Save hours every week</h3>
<p className="text-slate-600 text-sm">Automate repetitive tasks and focus on growing your business.</p>
</div>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 w-10 h-10 bg-slate-900 rounded-lg flex items-center justify-center mr-4">
<Shield className="w-5 h-5 text-white" />
</div>
<div>
<h3 className="font-semibold text-slate-900 mb-1">Enterprise-grade security</h3>
<p className="text-slate-600 text-sm">Your data is protected with industry-leading security standards.</p>
</div>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 w-10 h-10 bg-slate-900 rounded-lg flex items-center justify-center mr-4">
<Users className="w-5 h-5 text-white" />
</div>
<div>
<h3 className="font-semibold text-slate-900 mb-1">Team collaboration</h3>
<p className="text-slate-600 text-sm">Work seamlessly with your staff across multiple locations.</p>
</div>
</div>
</div>
</div>
<div className="relative">
<div className="aspect-square bg-slate-200 rounded-2xl flex items-center justify-center">
<div className="text-center p-8">
<Building className="w-24 h-24 text-slate-400 mx-auto mb-4" />
<p className="text-slate-500 font-medium">Professional venue management</p>
</div>
</div>
</div>
</div>
</div>
</div>
{/* CTA Section - Bold & Simple */}
<div className="py-24 bg-slate-900">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-6"> <h2 className="text-4xl sm:text-5xl font-bold text-white mb-6 tracking-tight">
{t('Ready to streamline your venue operations?')} Ready to optimize your operations?
</h2> </h2>
<p className="text-xl text-indigo-100 mb-8"> <p className="text-xl text-slate-300 font-light mb-10 leading-relaxed">
{t('Join venue managers who trust Playchoo to run their facilities efficiently.')} Join venue managers who trust our platform to run their facilities efficiently.
</p> </p>
<a <a
href={loginUrl} href={loginUrl}
className="inline-flex items-center justify-center px-8 py-4 bg-white text-indigo-600 font-semibold rounded-xl hover:shadow-2xl hover:scale-105 transition-all duration-300" className="inline-flex items-center justify-center px-8 py-4 bg-white text-slate-900 font-semibold rounded-lg hover:bg-slate-100 transition-colors duration-200 shadow-xl"
> >
{t('Access Your Dashboard')} {t('Login')}
<ArrowRight className="ml-2 w-5 h-5" /> <ArrowRight className="ml-2 w-5 h-5" />
</a> </a>
</div> </div>

Write Preview
Loading…
Cancel
Save