187 lines
12 KiB
TypeScript
187 lines
12 KiB
TypeScript
import React from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import BaseButton from '../components/BaseButton';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import { getPageTitle } from '../config';
|
|
import BaseIcon from '../components/BaseIcon';
|
|
import * as icon from '@mdi/js';
|
|
|
|
export default function LandingPage() {
|
|
const title = 'Trial Tracker'
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white text-gray-900 font-sans selection:bg-emerald-100 selection:text-emerald-900">
|
|
<Head>
|
|
<title>{getPageTitle('Trial Tracker - Research Simplified')}</title>
|
|
</Head>
|
|
|
|
{/* Navigation */}
|
|
<nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between h-16 items-center">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-10 h-10 bg-emerald-600 rounded-xl flex items-center justify-center">
|
|
<BaseIcon path={icon.mdiFlaskOutline} size={24} className="text-white" />
|
|
</div>
|
|
<span className="text-2xl font-bold tracking-tight text-gray-900">{title}</span>
|
|
</div>
|
|
<div className="hidden md:flex space-x-8 items-center font-medium">
|
|
<a href="#features" className="text-gray-600 hover:text-emerald-600 transition-colors">Features</a>
|
|
<a href="#about" className="text-gray-600 hover:text-emerald-600 transition-colors">About</a>
|
|
<Link href="/login" className="px-5 py-2.5 bg-emerald-600 text-white rounded-full hover:bg-emerald-700 transition-all shadow-md shadow-emerald-200">
|
|
Sign In
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<header className="relative pt-32 pb-20 overflow-hidden">
|
|
<div className="absolute top-0 right-0 -z-10 w-1/2 h-full opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-emerald-400 via-transparent to-transparent"></div>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
<div className="space-y-8">
|
|
<div className="inline-flex items-center space-x-2 py-1.5 px-3 rounded-full bg-emerald-50 border border-emerald-100 text-emerald-700 text-sm font-semibold">
|
|
<span className="flex h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
|
<span>Advanced Multi-tenant Solution</span>
|
|
</div>
|
|
<h1 className="text-6xl md:text-7xl font-extrabold text-gray-900 leading-[1.1] tracking-tight">
|
|
Research <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-500">Tracked</span> Effortlessly.
|
|
</h1>
|
|
<p className="text-xl text-gray-600 leading-relaxed max-w-lg">
|
|
The ultimate tool for research trials. Manage projects, monitor trials, and capture field data in real-time with our beautiful, intuitive interface.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 pt-4">
|
|
<Link href="/login" className="px-8 py-4 bg-gray-900 text-white rounded-2xl hover:bg-gray-800 transition-all text-lg font-bold shadow-xl shadow-gray-200 flex items-center justify-center">
|
|
Launch App <BaseIcon path={icon.mdiArrowRight} size={20} className="ml-2" />
|
|
</Link>
|
|
<a href="#features" className="px-8 py-4 bg-white text-gray-700 border-2 border-gray-100 rounded-2xl hover:border-emerald-200 hover:bg-emerald-50 transition-all text-lg font-bold flex items-center justify-center">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<div className="bg-gradient-to-br from-emerald-100 to-teal-100 rounded-[3rem] p-4 shadow-2xl overflow-hidden aspect-video flex items-center justify-center border-8 border-white">
|
|
<div className="w-full h-full bg-white/40 backdrop-blur-sm rounded-[2rem] flex flex-col items-center justify-center space-y-4 text-emerald-800">
|
|
<BaseIcon path={icon.mdiChartTimelineVariant} size={80} className="opacity-40" />
|
|
<span className="text-2xl font-black uppercase tracking-widest opacity-40">Dashboard Preview</span>
|
|
</div>
|
|
</div>
|
|
{/* Decorative elements */}
|
|
<div className="absolute -bottom-6 -left-6 w-24 h-24 bg-teal-500 rounded-3xl -z-10 rotate-12 opacity-20 animate-bounce"></div>
|
|
<div className="absolute -top-6 -right-6 w-32 h-32 bg-emerald-500 rounded-full -z-10 opacity-10 animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Features Section */}
|
|
<section id="features" className="py-24 bg-gray-50/50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center max-w-3xl mx-auto mb-20 space-y-4">
|
|
<h2 className="text-emerald-600 font-bold tracking-widest uppercase text-sm">Powerful Capabilities</h2>
|
|
<h3 className="text-4xl md:text-5xl font-black text-gray-900">Designed for modern field research.</h3>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{[
|
|
{
|
|
title: 'Activity Feed',
|
|
description: 'Stay updated with a social-media style feed of everything happening across your trials.',
|
|
icon: icon.mdiTimelineTextOutline,
|
|
color: 'bg-blue-50 text-blue-600'
|
|
},
|
|
{
|
|
title: 'Dynamic Forms',
|
|
description: 'Configure custom fields and forms for different trial types like plant vs chemical.',
|
|
icon: icon.mdiClipboardTextOutline,
|
|
color: 'bg-emerald-50 text-emerald-600'
|
|
},
|
|
{
|
|
title: 'Track-IT',
|
|
description: 'Analyze all completed forms and data in a powerful, filtered table view.',
|
|
icon: icon.mdiDatabaseOutline,
|
|
color: 'bg-teal-50 text-teal-600'
|
|
},
|
|
{
|
|
title: '3-Tier Locations',
|
|
description: 'Organize your data by Farm, Block, and Row for precise spatial tracking.',
|
|
icon: icon.mdiMapMarkerOutline,
|
|
color: 'bg-orange-50 text-orange-600'
|
|
},
|
|
{
|
|
title: 'Project Management',
|
|
description: 'Categorize trials into projects with custom start/end dates and status tracking.',
|
|
icon: icon.mdiFolderOutline,
|
|
color: 'bg-purple-50 text-purple-600'
|
|
},
|
|
{
|
|
title: 'Multi-tenant',
|
|
description: 'Seamlessly toggle between different farms as a Global Admin with full data isolation.',
|
|
icon: icon.mdiDomain,
|
|
color: 'bg-indigo-50 text-indigo-600'
|
|
}
|
|
].map((feature, i) => (
|
|
<div key={i} className="group bg-white p-10 rounded-[2.5rem] border border-gray-100 hover:border-emerald-200 hover:shadow-2xl hover:shadow-emerald-100/50 transition-all duration-500">
|
|
<div className={`w-16 h-16 ${feature.color} rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500`}>
|
|
<BaseIcon path={feature.icon} size={32} />
|
|
</div>
|
|
<h4 className="text-2xl font-bold mb-4 text-gray-900">{feature.title}</h4>
|
|
<p className="text-gray-600 leading-relaxed font-medium">{feature.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-24">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="bg-emerald-600 rounded-[4rem] p-12 md:p-20 text-center relative overflow-hidden shadow-2xl shadow-emerald-200">
|
|
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_top_left,_var(--tw-gradient-stops))] from-white/20 via-transparent to-transparent"></div>
|
|
<div className="relative z-10 space-y-8 max-w-3xl mx-auto">
|
|
<h2 className="text-4xl md:text-6xl font-black text-white leading-tight">Ready to transform your trial tracking?</h2>
|
|
<p className="text-xl text-emerald-50 leading-relaxed font-medium">
|
|
Join hundreds of researchers who trust Trial Tracker for their daily field operations.
|
|
</p>
|
|
<div className="pt-6">
|
|
<Link href="/login" className="px-12 py-5 bg-white text-emerald-600 rounded-2xl hover:bg-emerald-50 transition-all text-xl font-black shadow-xl inline-flex items-center">
|
|
Get Started Now <BaseIcon path={icon.mdiArrowRight} size={24} className="ml-2" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-white border-t border-gray-100 py-16">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex flex-col md:flex-row justify-between items-center space-y-8 md:space-y-0">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-8 h-8 bg-emerald-600 rounded-lg flex items-center justify-center">
|
|
<BaseIcon path={icon.mdiFlaskOutline} size={18} className="text-white" />
|
|
</div>
|
|
<span className="text-xl font-black text-gray-900">{title}</span>
|
|
</div>
|
|
<div className="flex space-x-8 text-sm font-bold text-gray-500 uppercase tracking-widest">
|
|
<a href="#" className="hover:text-emerald-600 transition-colors">Privacy</a>
|
|
<a href="#" className="hover:text-emerald-600 transition-colors">Terms</a>
|
|
<a href="#" className="hover:text-emerald-600 transition-colors">Contact</a>
|
|
</div>
|
|
<p className="text-sm font-bold text-gray-400 tracking-tighter uppercase">
|
|
© 2026 Trial Tracker. Built for Research.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
LandingPage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
}; |