75 lines
4.4 KiB
TypeScript
75 lines
4.4 KiB
TypeScript
import React from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import LayoutGuest from '../../layouts/Guest';
|
|
import { getPageTitle } from '../../config';
|
|
import {
|
|
mdiBriefcaseAccountOutline,
|
|
mdiChartPie,
|
|
mdiTableLarge,
|
|
mdiArrowRight
|
|
} from '@mdi/js';
|
|
import BaseIcon from '../../components/BaseIcon';
|
|
|
|
export default function InvestorChoicePage() {
|
|
return (
|
|
<div className="bg-slate-50 min-h-screen font-sans text-slate-900">
|
|
<Head>
|
|
<title>{getPageTitle('Investor Strategy')}</title>
|
|
<meta name="description" content="Choose your investment strategy" />
|
|
</Head>
|
|
|
|
{/* Strategy Choice Section */}
|
|
<section className="pt-20 pb-32">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div className="flex justify-center mb-6">
|
|
<div className="bg-emerald-600 p-3 rounded-2xl shadow-lg shadow-emerald-200">
|
|
<BaseIcon path={mdiBriefcaseAccountOutline} className="text-white" size={40} />
|
|
</div>
|
|
</div>
|
|
<h1 className="text-5xl md:text-6xl font-black tracking-tight mb-6 text-slate-900">
|
|
Choose Your <span className="text-emerald-600">Strategy</span>
|
|
</h1>
|
|
<p className="mt-4 max-w-2xl text-xl text-slate-500 mx-auto mb-16">
|
|
Whether you want AI-curated opportunities or prefer to explore the marketplace, we've got you covered.
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
|
{/* Tailored Flow */}
|
|
<Link href="/investor/tailored" className="group relative bg-white p-10 rounded-3xl shadow-sm border border-slate-200 hover:border-emerald-500 hover:shadow-xl hover:shadow-emerald-100 transition-all duration-300 text-left">
|
|
<div className="w-16 h-16 bg-emerald-50 rounded-2xl flex items-center justify-center mb-6 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white transition-colors">
|
|
<BaseIcon path={mdiChartPie} size={32} />
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-slate-900 mb-3 flex items-center">
|
|
Tailored Strategy
|
|
<BaseIcon path={mdiArrowRight} className="ml-2 opacity-0 group-hover:opacity-100 transform translate-x-[-10px] group-hover:translate-x-0 transition-all" size={24} />
|
|
</h3>
|
|
<p className="text-slate-500 text-lg leading-relaxed">
|
|
Answer a few simple questions about your risk profile and preferences to receive a personalized portfolio visualization.
|
|
</p>
|
|
</Link>
|
|
|
|
{/* Manual Flow */}
|
|
<Link href="/investor/marketplace" className="group relative bg-white p-10 rounded-3xl shadow-sm border border-slate-200 hover:border-blue-500 hover:shadow-xl hover:shadow-blue-100 transition-all duration-300 text-left">
|
|
<div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mb-6 text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-colors">
|
|
<BaseIcon path={mdiTableLarge} size={32} />
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-slate-900 mb-3 flex items-center">
|
|
Manual Exploration
|
|
<BaseIcon path={mdiArrowRight} className="ml-2 opacity-0 group-hover:opacity-100 transform translate-x-[-10px] group-hover:translate-x-0 transition-all" size={24} />
|
|
</h3>
|
|
<p className="text-slate-500 text-lg leading-relaxed">
|
|
Browse our full marketplace of startups, apply advanced filters, and search for specific opportunities.
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
InvestorChoicePage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
}; |