121 lines
5.7 KiB
TypeScript
121 lines
5.7 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import type { ReactElement } from 'react';
|
||
import Head from 'next/head';
|
||
import Link from 'next/link';
|
||
import BaseButton from '../components/BaseButton';
|
||
import SectionFullScreen from '../components/SectionFullScreen';
|
||
import LayoutGuest from '../layouts/Guest';
|
||
import { getPageTitle } from '../config';
|
||
import { useAppSelector } from '../stores/hooks';
|
||
import { mdiWeatherSunny, mdiCheckCircle, mdiRocketLaunch, mdiGamepadVariant, mdiArrowRight } from '@mdi/js';
|
||
import BaseIcon from '../components/BaseIcon';
|
||
|
||
|
||
export default function Starter() {
|
||
const textColor = useAppSelector((state) => state.style.linkColor);
|
||
|
||
return (
|
||
<div className="relative overflow-hidden bg-midnightBlueTheme-mainBG min-h-screen font-sans">
|
||
<Head>
|
||
<title>{getPageTitle('Welcome to Morninmate')}</title>
|
||
</Head>
|
||
|
||
{/* Decorative Gradients */}
|
||
<div className="fixed inset-0 pointer-events-none z-0">
|
||
<div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-indigo-600/20 blur-[150px] rounded-full animate-pulse"></div>
|
||
<div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-purple-600/15 blur-[120px] rounded-full animate-pulse"></div>
|
||
</div>
|
||
|
||
<SectionFullScreen bg='violet'>
|
||
<div className="relative z-10 w-full max-w-6xl mx-auto px-6 py-20 lg:py-32 flex flex-col items-center text-center">
|
||
|
||
{/* Logo Section */}
|
||
<div className="mb-12 animate-fade-in">
|
||
<div className="flex items-center justify-center space-x-4 mb-4">
|
||
<div className="bg-gradient-to-tr from-indigo-500 to-purple-600 p-5 rounded-3xl shadow-2xl shadow-indigo-500/20 transform rotate-12 hover:rotate-0 transition-transform duration-500">
|
||
<BaseIcon path={mdiWeatherSunny} size={48} className="text-white" />
|
||
</div>
|
||
</div>
|
||
<h1 className="text-6xl md:text-8xl font-black tracking-tighter text-white mb-6">
|
||
Mornin<span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">mate</span>
|
||
</h1>
|
||
<p className="text-xl md:text-2xl text-indigo-100/60 max-w-2xl mx-auto leading-relaxed">
|
||
Gamify your morning routine, boost your potential score, and unlock fun rewards. The perfect start to your day.
|
||
</p>
|
||
</div>
|
||
|
||
{/* CTA Buttons */}
|
||
<div className="flex flex-col sm:flex-row gap-6 mb-24 w-full sm:w-auto animate-fade-in delay-200">
|
||
<BaseButton
|
||
href='/login'
|
||
label='Launch My Morning'
|
||
color='info'
|
||
roundedFull
|
||
className='text-xl py-4 shadow-2xl shadow-indigo-600/40 hover:scale-105 transition-transform'
|
||
/>
|
||
<BaseButton
|
||
href='/register'
|
||
label='Join the Club'
|
||
color='whiteDark'
|
||
roundedFull
|
||
className='text-xl py-4 border-indigo-500/20 bg-indigo-500/5 backdrop-blur-md hover:bg-indigo-500/10 transition-colors'
|
||
/>
|
||
</div>
|
||
|
||
{/* Feature Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full animate-fade-in delay-500">
|
||
{[
|
||
{
|
||
icon: mdiCheckCircle,
|
||
title: "Pulse Routines",
|
||
desc: "Create and track your morning activities with ease.",
|
||
color: "text-emerald-400"
|
||
},
|
||
{
|
||
icon: mdiRocketLaunch,
|
||
title: "Potential Score",
|
||
desc: "Watch your morning routine quality soar to 100.",
|
||
color: "text-amber-400"
|
||
},
|
||
{
|
||
icon: mdiGamepadVariant,
|
||
title: "Unlock Games",
|
||
desc: "Earn game sessions as rewards for your consistency.",
|
||
color: "text-cyan-400"
|
||
}
|
||
].map((f, i) => (
|
||
<div key={i} className="p-8 rounded-[2.5rem] bg-white/5 border border-white/5 backdrop-blur-xl hover:bg-white/10 transition-colors group">
|
||
<div className={`mb-4 p-3 inline-block rounded-2xl bg-white/5 ${f.color} group-hover:scale-110 transition-transform`}>
|
||
<BaseIcon path={f.icon} size={32} />
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-white mb-2">{f.title}</h3>
|
||
<p className="text-indigo-200/50 leading-relaxed">{f.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</SectionFullScreen>
|
||
|
||
<footer className="relative z-10 py-12 border-t border-white/5 bg-black/20 backdrop-blur-md">
|
||
<div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center text-center md:text-left gap-8">
|
||
<div className="space-y-2">
|
||
<h4 className="text-xl font-bold text-white flex items-center justify-center md:justify-start">
|
||
<BaseIcon path={mdiWeatherSunny} size={20} className="mr-2 text-indigo-400" />
|
||
Morninmate
|
||
</h4>
|
||
<p className="text-sm text-indigo-200/40">© 2026. Made with ❤️ for your mornings.</p>
|
||
</div>
|
||
<div className="flex gap-8 text-sm font-medium text-indigo-200/60">
|
||
<Link href='/privacy-policy/' className="hover:text-white transition-colors">Privacy</Link>
|
||
<Link href='/terms/' className="hover:text-white transition-colors">Terms</Link>
|
||
<Link href='/help/' className="hover:text-white transition-colors">Help</Link>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
Starter.getLayout = function getLayout(page: ReactElement) {
|
||
return <LayoutGuest>{page}</LayoutGuest>;
|
||
}; |