mirror of
https://github.com/PlatypusPus/MushroomEmpire.git
synced 2026-02-07 22:18:59 +00:00
ref:Cleaned the Structure
This commit is contained in:
46
frontend/app/globals.css
Normal file
46
frontend/app/globals.css
Normal file
@@ -0,0 +1,46 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html, body { height: 100%; }
|
||||
body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
|
||||
|
||||
/* Custom utilities */
|
||||
.container-max { @apply max-w-7xl mx-auto px-4; }
|
||||
|
||||
/* Smooth scrolling for in-page anchors */
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
/* Subtle hero background animations */
|
||||
@keyframes drift {
|
||||
0% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
|
||||
50% { transform: translate3d(10px,-8px,0) scale(1.02) rotate(8deg); }
|
||||
100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
|
||||
}
|
||||
|
||||
.animate-drift-slow {
|
||||
animation: drift 16s ease-in-out infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.animate-drift-slower {
|
||||
animation: drift 22s ease-in-out infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Reveal on scroll */
|
||||
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 600ms ease; }
|
||||
.reveal-visible { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* Respect user motion preferences */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
.animate-drift-slow, .animate-drift-slower { animation: none !important; }
|
||||
.reveal { opacity: 1; transform: none; transition: none; }
|
||||
}
|
||||
|
||||
/* Performance: avoid rendering off-screen content until needed */
|
||||
.content-auto {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 1px 1000px; /* reserve space to prevent big jumps */
|
||||
}
|
||||
18
frontend/app/layout.tsx
Normal file
18
frontend/app/layout.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import './globals.css';
|
||||
import type { ReactNode } from 'react';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Nordic Privacy AI',
|
||||
description: 'AI-powered GDPR compliance platform for Nordic ecosystems',
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<html lang="en" className="h-full">
|
||||
<body className="min-h-full bg-gradient-to-br from-brand-50 via-white to-brand-100 text-slate-900 antialiased">
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
59
frontend/app/page.tsx
Normal file
59
frontend/app/page.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import Link from 'next/link';
|
||||
import { Navbar } from '../components/Navbar';
|
||||
import { FeatureGrid } from '../components/landing/FeatureGrid';
|
||||
import { AgentsOverview } from '../components/landing/AgentsOverview';
|
||||
import { Steps } from '../components/landing/Steps';
|
||||
import { Footer } from '../components/landing/Footer';
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main className="min-h-screen flex flex-col">
|
||||
<Navbar />
|
||||
<section className="relative pt-20 pb-24 overflow-hidden">
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
<div className="absolute -top-24 left-1/2 -translate-x-1/2 w-[480px] h-[480px] md:w-[560px] md:h-[560px] rounded-full bg-gradient-to-br from-brand-200/50 to-brand-400/30 blur-xl opacity-60 animate-drift-slow transform-gpu" />
|
||||
<div className="hidden md:block absolute top-10 right-[10%] w-[340px] h-[340px] rounded-full bg-gradient-to-br from-brand-300/40 to-brand-500/25 blur-xl opacity-50 animate-drift-slower transform-gpu" />
|
||||
<div className="hidden md:block absolute -bottom-28 left-[8%] w-[300px] h-[300px] rounded-full bg-gradient-to-br from-brand-100/60 to-brand-300/35 blur-xl opacity-60 animate-drift-slower transform-gpu" style={{ animationDelay: '1.2s' }} />
|
||||
</div>
|
||||
<div className="container-max relative text-center">
|
||||
<div className="mx-auto max-w-3xl">
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-slate-900">
|
||||
Proactive Nordic Data Privacy
|
||||
</h1>
|
||||
<p className="mt-6 text-base sm:text-lg text-slate-700">
|
||||
AI agents that discover, classify, and remediate personal data across your ecosystem—built for BankID, MitID, and Suomi.fi contexts.
|
||||
</p>
|
||||
<div className="mt-8 flex flex-wrap items-center justify-center gap-3 sm:gap-4">
|
||||
<Link href="/try" className="inline-flex items-center rounded-md bg-brand-600 px-7 py-3 text-white font-semibold shadow-lg hover:bg-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:ring-offset-2">
|
||||
Start free scan
|
||||
</Link>
|
||||
<Link href="#features" className="inline-flex items-center rounded-md border border-slate-300 px-7 py-3 text-slate-700 font-medium hover:bg-white/60 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:ring-offset-2">
|
||||
Explore features
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mt-10 grid grid-cols-3 gap-3 sm:gap-6 text-center text-xs sm:text-sm">
|
||||
<div className="flex flex-col"><span className="font-semibold text-slate-900">99%</span><span className="text-slate-600">PII labels coverage*</span></div>
|
||||
<div className="flex flex-col"><span className="font-semibold text-slate-900"><span className="align-middle">⚡</span> Real-time</span><span className="text-slate-600">Monitoring</span></div>
|
||||
<div className="flex flex-col"><span className="font-semibold text-slate-900">EU-first</span><span className="text-slate-600">Reg alignment</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<FeatureGrid />
|
||||
<Steps />
|
||||
<AgentsOverview />
|
||||
<section id="contact" className="container-max py-20 content-auto">
|
||||
<div className="rounded-2xl border border-brand-200/70 bg-white/80 backdrop-blur p-10 text-center shadow-sm">
|
||||
<h2 className="text-2xl font-bold text-slate-900">Ready to pilot?</h2>
|
||||
<p className="mt-4 text-slate-600 max-w-xl mx-auto">We’re onboarding early Nordic partners. Get in touch to shape proactive privacy intelligence.</p>
|
||||
<div className="mt-6">
|
||||
<Link href="/try" className="inline-flex items-center rounded-md bg-brand-600 px-6 py-3 text-white font-semibold shadow hover:bg-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:ring-offset-2">
|
||||
Request access
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
23
frontend/app/try/page.tsx
Normal file
23
frontend/app/try/page.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import { Navbar } from "../../components/Navbar";
|
||||
import { Sidebar, TryTab } from "../../components/try/Sidebar";
|
||||
import { CenterPanel } from "../../components/try/CenterPanel";
|
||||
import { ChatbotPanel } from "../../components/try/ChatbotPanel";
|
||||
|
||||
export default function TryPage() {
|
||||
const [tab, setTab] = useState<TryTab>("processing");
|
||||
|
||||
return (
|
||||
<main className="min-h-screen flex flex-col">
|
||||
<Navbar />
|
||||
<div className="flex flex-1 min-h-0">
|
||||
<Sidebar value={tab} onChange={setTab} />
|
||||
<div className="flex-1 min-h-0 flex">
|
||||
<div className="flex-1 min-h-0 min-w-0"><CenterPanel tab={tab} onAnalyze={() => setTab("bias-analysis")} /></div>
|
||||
<div className="w-[360px] hidden xl:block"><ChatbotPanel /></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user