mirror of
https://github.com/PlatypusPus/MushroomEmpire.git
synced 2026-02-07 22:18:59 +00:00
frontend
This commit is contained in:
Ashishyg
18
frontend/nordic-privacy-ai/.gitignore
vendored
Normal file
18
frontend/nordic-privacy-ai/.gitignore
vendored
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
node_modules/
|
||||||
|
.next/
|
||||||
|
# Environment
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.*
|
||||||
|
|
||||||
|
# OS / Editor
|
||||||
|
.DS_Store
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
28
frontend/nordic-privacy-ai/README.md
Normal file
28
frontend/nordic-privacy-ai/README.md
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
# Nordic Privacy AI
|
||||||
|
|
||||||
|
AI-Powered GDPR compliance & personal data protection platform tailored for Nordic ecosystems (BankID, MitID, Suomi.fi).
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
- Next.js (App Router, TypeScript)
|
||||||
|
- Tailwind CSS
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
```powershell
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
Visit http://localhost:3000 to view the landing page.
|
||||||
|
|
||||||
|
## Scripts
|
||||||
|
- `npm run dev` – Start dev server
|
||||||
|
- `npm run build` – Production build
|
||||||
|
- `npm start` – Run built app
|
||||||
|
- `npm run lint` – ESLint
|
||||||
|
|
||||||
|
## Next Steps
|
||||||
|
- Implement /try page workflow
|
||||||
|
- Add feature sections & agent explanations
|
||||||
|
- Integrate backend services for data upload & scanning
|
||||||
|
|
||||||
|
## License
|
||||||
|
Internal hackathon prototype
|
||||||
46
frontend/nordic-privacy-ai/app/globals.css
Normal file
46
frontend/nordic-privacy-ai/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/nordic-privacy-ai/app/layout.tsx
Normal file
18
frontend/nordic-privacy-ai/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/nordic-privacy-ai/app/page.tsx
Normal file
59
frontend/nordic-privacy-ai/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/nordic-privacy-ai/app/try/page.tsx
Normal file
23
frontend/nordic-privacy-ai/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"><CenterPanel tab={tab} /></div>
|
||||||
|
<div className="w-[360px] hidden xl:block"><ChatbotPanel /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
63
frontend/nordic-privacy-ai/components/Navbar.tsx
Normal file
63
frontend/nordic-privacy-ai/components/Navbar.tsx
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
"use client";
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
export function Navbar() {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const onTry = pathname?.startsWith('/try');
|
||||||
|
const [scrolled, setScrolled] = useState(false);
|
||||||
|
const [menuOpen, setMenuOpen] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onScroll = () => setScrolled(window.scrollY > 4);
|
||||||
|
onScroll();
|
||||||
|
window.addEventListener('scroll', onScroll, { passive: true });
|
||||||
|
return () => window.removeEventListener('scroll', onScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className={`w-full sticky top-0 z-50 transition-colors ${scrolled ? 'bg-white/90 border-b border-slate-200/70 shadow-sm' : 'bg-white/70 border-b border-transparent'}`}>
|
||||||
|
<div className="container-max flex items-center justify-between h-16">
|
||||||
|
<Link href="/" className="font-semibold text-brand-700 text-lg tracking-tight">Nordic Privacy AI</Link>
|
||||||
|
{/* Desktop nav */}
|
||||||
|
{onTry ? (
|
||||||
|
<div className="hidden md:flex items-center gap-6 text-sm">
|
||||||
|
<Link href="/" className="hover:text-brand-600 transition-colors">Home</Link>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="hidden md:flex items-center gap-6 text-sm">
|
||||||
|
<Link href="#features" className="hover:text-brand-600 transition-colors">Features</Link>
|
||||||
|
<Link href="#agents" className="hover:text-brand-600 transition-colors">Agents</Link>
|
||||||
|
<Link href="#contact" className="hover:text-brand-600 transition-colors">Contact</Link>
|
||||||
|
<Link href="/try" className="inline-flex items-center rounded-md bg-brand-600 px-4 py-2 text-white font-medium shadow hover:bg-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:ring-offset-2">Try me</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* Mobile menu button */}
|
||||||
|
<button
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
className="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-md border border-slate-300 text-slate-700"
|
||||||
|
onClick={() => setMenuOpen(v => !v)}
|
||||||
|
>
|
||||||
|
<span className="sr-only">Menu</span>
|
||||||
|
{menuOpen ? '✕' : '☰'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/* Mobile menu panel */}
|
||||||
|
<div className={`md:hidden border-t border-slate-200 transition-[max-height,opacity] duration-200 overflow-hidden ${menuOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'}`}>
|
||||||
|
<div className="container-max py-3 flex flex-col gap-3 text-sm">
|
||||||
|
{onTry ? (
|
||||||
|
<Link href="/" onClick={() => setMenuOpen(false)} className="py-2">Home</Link>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<a href="#features" onClick={() => setMenuOpen(false)} className="py-2">Features</a>
|
||||||
|
<a href="#agents" onClick={() => setMenuOpen(false)} className="py-2">Agents</a>
|
||||||
|
<a href="#contact" onClick={() => setMenuOpen(false)} className="py-2">Contact</a>
|
||||||
|
<Link href="/try" onClick={() => setMenuOpen(false)} className="inline-flex items-center justify-center rounded-md bg-brand-600 px-4 py-2 text-white font-medium shadow hover:bg-brand-500">Try me</Link>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
42
frontend/nordic-privacy-ai/components/common/Reveal.tsx
Normal file
42
frontend/nordic-privacy-ai/components/common/Reveal.tsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
"use client";
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
|
||||||
|
interface RevealProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
as?: keyof JSX.IntrinsicElements;
|
||||||
|
className?: string;
|
||||||
|
delayMs?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Reveal({ children, as = "div", className, delayMs = 0 }: RevealProps) {
|
||||||
|
const Cmp: any = as;
|
||||||
|
const ref = useRef<HTMLElement | null>(null);
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const el = ref.current as Element | null;
|
||||||
|
if (!el || typeof IntersectionObserver === "undefined") {
|
||||||
|
setVisible(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const obs = new IntersectionObserver(
|
||||||
|
([entry]) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
if (delayMs > 0) {
|
||||||
|
const t = setTimeout(() => setVisible(true), delayMs);
|
||||||
|
return () => clearTimeout(t);
|
||||||
|
} else {
|
||||||
|
setVisible(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ threshold: 0.12 }
|
||||||
|
);
|
||||||
|
obs.observe(el);
|
||||||
|
return () => obs.disconnect();
|
||||||
|
}, [delayMs]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Cmp ref={ref} className={(visible ? "reveal-visible " : "reveal ") + (className ?? "")}>{children}</Cmp>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import { Reveal } from "../common/Reveal";
|
||||||
|
|
||||||
|
export function AgentsOverview() {
|
||||||
|
const agents = [
|
||||||
|
{
|
||||||
|
title: "Discovery Agent",
|
||||||
|
desc:
|
||||||
|
"Continuously inventories systems to locate personal and sensitive data across sources, fixing visibility gaps.",
|
||||||
|
emoji: "🛰️",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Cleaner Agent",
|
||||||
|
desc:
|
||||||
|
"Identifies PII and sensitive attributes, classifies content, and prepares data for remediation and audits.",
|
||||||
|
emoji: "🧽",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Remediation Agent",
|
||||||
|
desc:
|
||||||
|
"Suggests anonymization, consent validation, or deletion; generates compliance reports and monitors posture.",
|
||||||
|
emoji: "🛡️",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container-max py-16 content-auto" id="agents">
|
||||||
|
<Reveal className="text-center" as="div">
|
||||||
|
<h2 className="text-2xl sm:text-3xl font-bold text-slate-900">Our agents</h2>
|
||||||
|
<p className="mt-3 text-slate-600 max-w-2xl mx-auto">
|
||||||
|
Modular, AI-driven roles that work together to keep your data compliant.
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
<div className="mt-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
|
||||||
|
{agents.map((a, i) => (
|
||||||
|
<Reveal key={a.title} delayMs={i * 110}>
|
||||||
|
<div className="rounded-xl border border-slate-200 bg-white/80 p-6 shadow-sm transition-transform duration-300 hover:-translate-y-0.5">
|
||||||
|
<div className="text-3xl">{a.emoji}</div>
|
||||||
|
<h3 className="mt-3 font-semibold text-slate-900">{a.title}</h3>
|
||||||
|
<p className="mt-2 text-sm text-slate-600">{a.desc}</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
import { Reveal } from "../common/Reveal";
|
||||||
|
|
||||||
|
export function FeatureGrid() {
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
title: "Discovery",
|
||||||
|
desc: "Continuously map data across apps, logs, DBs, and cloud storage to restore visibility.",
|
||||||
|
emoji: "🧭",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Classification",
|
||||||
|
desc: "Detect PII and sensitive categories (health, finance) with AI-driven labeling.",
|
||||||
|
emoji: "🔎",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Remediation",
|
||||||
|
desc: "Anonymize, minimize, and automate consent workflows to reduce exposure.",
|
||||||
|
emoji: "🧹",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Monitoring",
|
||||||
|
desc: "Continuous compliance checks with alerts and reports aligned to GDPR.",
|
||||||
|
emoji: "📈",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container-max py-16 content-auto" id="features">
|
||||||
|
<Reveal className="text-center" as="div">
|
||||||
|
<h2 className="text-2xl sm:text-3xl font-bold text-slate-900">Core capabilities</h2>
|
||||||
|
<p className="mt-3 text-slate-600 max-w-2xl mx-auto">
|
||||||
|
Proactive privacy protection tailored for Nordic identity ecosystems and EU data law.
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
<div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
||||||
|
{items.map((f, i) => (
|
||||||
|
<Reveal key={f.title} delayMs={i * 90}>
|
||||||
|
<div className="rounded-xl border border-slate-200 bg-white/80 p-6 shadow-sm transition-transform duration-300 hover:-translate-y-0.5">
|
||||||
|
<div className="text-3xl">{f.emoji}</div>
|
||||||
|
<h3 className="mt-3 font-semibold text-slate-900">{f.title}</h3>
|
||||||
|
<p className="mt-2 text-sm text-slate-600">{f.desc}</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
17
frontend/nordic-privacy-ai/components/landing/Footer.tsx
Normal file
17
frontend/nordic-privacy-ai/components/landing/Footer.tsx
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
export function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="mt-24 border-t border-slate-200 bg-white/80">
|
||||||
|
<div className="container-max py-10 flex flex-col sm:flex-row items-center justify-between gap-6">
|
||||||
|
<div className="text-sm text-slate-600">© {new Date().getFullYear()} Nordic Privacy AI. Hackathon prototype.</div>
|
||||||
|
<nav className="flex gap-6 text-sm">
|
||||||
|
<Link href="#features" className="hover:text-brand-600">Features</Link>
|
||||||
|
<Link href="#agents" className="hover:text-brand-600">Agents</Link>
|
||||||
|
<Link href="#contact" className="hover:text-brand-600">Contact</Link>
|
||||||
|
<Link href="/try" className="hover:text-brand-600">Try</Link>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
32
frontend/nordic-privacy-ai/components/landing/Steps.tsx
Normal file
32
frontend/nordic-privacy-ai/components/landing/Steps.tsx
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import { Reveal } from "../common/Reveal";
|
||||||
|
|
||||||
|
export function Steps() {
|
||||||
|
const steps = [
|
||||||
|
{ title: 'Discover', desc: 'Continuously inventory data across apps, logs, DBs, and cloud.' , emoji: '🧭' },
|
||||||
|
{ title: 'Classify', desc: 'Detect PII and sensitive categories with AI labeling.', emoji: '🔎' },
|
||||||
|
{ title: 'Mitigate', desc: 'Anonymize, minimize, and enforce consent governance.', emoji: '🛡️' },
|
||||||
|
{ title: 'Monitor', desc: 'Continuous checks and reports mapped to GDPR.', emoji: '📈' },
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<section className="container-max py-16 content-auto">
|
||||||
|
<Reveal className="text-center" as="div">
|
||||||
|
<h2 className="text-2xl sm:text-3xl font-bold text-slate-900">How it works</h2>
|
||||||
|
<p className="mt-3 text-slate-600 max-w-2xl mx-auto">Simple, proactive steps to keep your data compliant.</p>
|
||||||
|
</Reveal>
|
||||||
|
<div className="mt-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6">
|
||||||
|
{steps.map((s, i) => (
|
||||||
|
<Reveal key={s.title} delayMs={i * 100}>
|
||||||
|
<div className="relative rounded-xl border border-slate-200 bg-white/80 p-6 shadow-sm transition-transform duration-300 hover:-translate-y-0.5">
|
||||||
|
<div className="text-3xl">{s.emoji}</div>
|
||||||
|
<div className="mt-3 flex items-baseline gap-2">
|
||||||
|
<span className="text-xs text-slate-500">Step {i + 1}</span>
|
||||||
|
<h3 className="font-semibold text-slate-900">{s.title}</h3>
|
||||||
|
</div>
|
||||||
|
<p className="mt-2 text-sm text-slate-600">{s.desc}</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
21
frontend/nordic-privacy-ai/components/landing/ValueProps.tsx
Normal file
21
frontend/nordic-privacy-ai/components/landing/ValueProps.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
export function ValueProps() {
|
||||||
|
const items = [
|
||||||
|
{ title: 'EU-first compliance', desc: 'Designed around GDPR principles: lawfulness, purpose limitation, minimization, and accountability.', emoji: '🇪🇺' },
|
||||||
|
{ title: 'Nordic identity ready', desc: 'Built with BankID, MitID, and Suomi.fi contexts in mind for seamless identity-aware workflows.', emoji: '🧩' },
|
||||||
|
{ title: 'Continuous by default', desc: 'Move from manual audits to ongoing monitoring with alerts and clear reports.', emoji: '⏱️' },
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<section className="container-max py-16">
|
||||||
|
<h2 className="text-2xl sm:text-3xl font-bold text-slate-900 text-center">Why it fits the Nordics</h2>
|
||||||
|
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
{items.map((v) => (
|
||||||
|
<div key={v.title} className="rounded-xl border border-slate-200 bg-white/70 backdrop-blur p-6 shadow-sm">
|
||||||
|
<div className="text-3xl">{v.emoji}</div>
|
||||||
|
<h3 className="mt-3 font-semibold text-slate-900">{v.title}</h3>
|
||||||
|
<p className="mt-2 text-sm text-slate-600">{v.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
238
frontend/nordic-privacy-ai/components/try/CenterPanel.tsx
Normal file
238
frontend/nordic-privacy-ai/components/try/CenterPanel.tsx
Normal file
@@ -0,0 +1,238 @@
|
|||||||
|
"use client";
|
||||||
|
import { TryTab } from "./Sidebar";
|
||||||
|
import { useState, useRef, useCallback, useEffect } from "react";
|
||||||
|
import { saveLatestUpload, getLatestUpload, deleteLatestUpload } from "../../lib/idb";
|
||||||
|
|
||||||
|
interface CenterPanelProps {
|
||||||
|
tab: TryTab;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UploadedFileMeta {
|
||||||
|
name: string;
|
||||||
|
size: number;
|
||||||
|
type: string;
|
||||||
|
contentPreview: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CenterPanel({ tab }: CenterPanelProps) {
|
||||||
|
const [fileMeta, setFileMeta] = useState<UploadedFileMeta | null>(null);
|
||||||
|
const [isDragging, setIsDragging] = useState(false);
|
||||||
|
const [progress, setProgress] = useState<number>(0);
|
||||||
|
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||||
|
const [loadedFromCache, setLoadedFromCache] = useState(false);
|
||||||
|
|
||||||
|
const reset = () => {
|
||||||
|
setFileMeta(null);
|
||||||
|
setProgress(0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const processFile = useCallback((f: File) => {
|
||||||
|
if (!f) return;
|
||||||
|
setProgress(0);
|
||||||
|
if (f.size > 1024 * 1024) {
|
||||||
|
setFileMeta({
|
||||||
|
name: f.name,
|
||||||
|
size: f.size,
|
||||||
|
type: f.type,
|
||||||
|
contentPreview: "File too large for preview (limit 1MB).",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onprogress = (evt) => {
|
||||||
|
if (evt.lengthComputable) {
|
||||||
|
const pct = Math.min(100, Math.round((evt.loaded / evt.total) * 100));
|
||||||
|
setProgress(pct);
|
||||||
|
} else {
|
||||||
|
setProgress((p) => (p < 90 ? p + 5 : p));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
reader.onload = async () => {
|
||||||
|
try {
|
||||||
|
const buf = reader.result as ArrayBuffer;
|
||||||
|
const decoder = new TextDecoder();
|
||||||
|
const text = decoder.decode(buf);
|
||||||
|
const metaObj: UploadedFileMeta = {
|
||||||
|
name: f.name,
|
||||||
|
size: f.size,
|
||||||
|
type: f.type || "unknown",
|
||||||
|
contentPreview: text.slice(0, 4000),
|
||||||
|
};
|
||||||
|
setFileMeta(metaObj);
|
||||||
|
// Save file blob and meta to browser cache (IndexedDB)
|
||||||
|
try {
|
||||||
|
await saveLatestUpload(f, metaObj);
|
||||||
|
} catch {}
|
||||||
|
setProgress(100);
|
||||||
|
} catch (e) {
|
||||||
|
const metaObj: UploadedFileMeta = {
|
||||||
|
name: f.name,
|
||||||
|
size: f.size,
|
||||||
|
type: f.type || "unknown",
|
||||||
|
contentPreview: "Unable to decode preview.",
|
||||||
|
};
|
||||||
|
setFileMeta(metaObj);
|
||||||
|
try {
|
||||||
|
await saveLatestUpload(f, metaObj);
|
||||||
|
} catch {}
|
||||||
|
setProgress(100);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
reader.onerror = () => {
|
||||||
|
setProgress(0);
|
||||||
|
};
|
||||||
|
reader.readAsArrayBuffer(f);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||||
|
const f = e.target.files?.[0];
|
||||||
|
processFile(f as File);
|
||||||
|
}
|
||||||
|
|
||||||
|
const onDragOver = (e: React.DragEvent<HTMLDivElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsDragging(true);
|
||||||
|
};
|
||||||
|
const onDragLeave = () => setIsDragging(false);
|
||||||
|
const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsDragging(false);
|
||||||
|
const f = e.dataTransfer.files?.[0];
|
||||||
|
processFile(f as File);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Load last cached upload on mount (processing tab only)
|
||||||
|
useEffect(() => {
|
||||||
|
let ignore = false;
|
||||||
|
if (tab !== "processing") return;
|
||||||
|
(async () => {
|
||||||
|
try {
|
||||||
|
const { meta } = await getLatestUpload();
|
||||||
|
if (!ignore && meta) {
|
||||||
|
setFileMeta(meta as UploadedFileMeta);
|
||||||
|
setLoadedFromCache(true);
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
})();
|
||||||
|
return () => {
|
||||||
|
ignore = true;
|
||||||
|
};
|
||||||
|
}, [tab]);
|
||||||
|
|
||||||
|
function renderTabContent() {
|
||||||
|
switch (tab) {
|
||||||
|
case "processing":
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h2 className="text-xl font-semibold">Upload & Process Data</h2>
|
||||||
|
<p className="text-sm text-slate-600">Upload a CSV / JSON / text file. We will later parse, detect PII, and queue analyses.</p>
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<div
|
||||||
|
onDragOver={onDragOver}
|
||||||
|
onDragLeave={onDragLeave}
|
||||||
|
onDrop={onDrop}
|
||||||
|
className={
|
||||||
|
"rounded-lg border-2 border-dashed p-6 text-center transition-colors " +
|
||||||
|
(isDragging ? "border-brand-600 bg-brand-50" : "border-slate-300 hover:border-brand-300")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<p className="text-sm text-slate-600">Drag & drop a CSV / JSON / TXT here, or click to browse.</p>
|
||||||
|
<div className="mt-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => inputRef.current?.click()}
|
||||||
|
className="inline-flex items-center rounded-md bg-brand-600 px-4 py-2 text-white text-sm font-medium shadow hover:bg-brand-500"
|
||||||
|
>
|
||||||
|
Choose file
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
type="file"
|
||||||
|
accept=".csv,.json,.txt"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
className="hidden"
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
{progress > 0 && (
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="h-2 w-full rounded-full bg-slate-200 overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-2 bg-brand-600 transition-all"
|
||||||
|
style={{ width: `${progress}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mt-1 text-xs text-slate-500">Processing {progress}%</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{fileMeta && (
|
||||||
|
<div className="rounded-md border border-slate-200 p-4 bg-white shadow-sm">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="text-sm font-medium">{fileMeta.name}</div>
|
||||||
|
<div className="text-xs text-slate-500">{Math.round(fileMeta.size / 1024)} KB</div>
|
||||||
|
</div>
|
||||||
|
{loadedFromCache && (
|
||||||
|
<div className="mb-2 text-[11px] text-brand-700">Loaded from browser cache</div>
|
||||||
|
)}
|
||||||
|
<div className="mb-3 text-xs text-slate-500">{fileMeta.type || "Unknown type"}</div>
|
||||||
|
<pre className="max-h-64 overflow-auto text-xs bg-slate-50 p-3 rounded-md whitespace-pre-wrap leading-relaxed">
|
||||||
|
{fileMeta.contentPreview || "(no preview)"}
|
||||||
|
</pre>
|
||||||
|
<div className="mt-3 flex justify-end">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={async () => {
|
||||||
|
reset();
|
||||||
|
try { await deleteLatestUpload(); } catch {}
|
||||||
|
setLoadedFromCache(false);
|
||||||
|
}}
|
||||||
|
className="text-xs rounded-md border px-3 py-1.5 hover:bg-slate-50"
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
case "bias-analysis":
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h2 className="text-xl font-semibold">Bias Analysis (Placeholder)</h2>
|
||||||
|
<p className="text-sm text-slate-600">Once processing completes, bias metrics will appear here (distribution, representation, fairness indicators).</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
case "risk-analysis":
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h2 className="text-xl font-semibold">Risk Analysis (Placeholder)</h2>
|
||||||
|
<p className="text-sm text-slate-600">Potential privacy exposure, sensitive attribute concentration, consent gaps will be displayed.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
case "bias-risk-mitigation":
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h2 className="text-xl font-semibold">Mitigation Suggestions (Placeholder)</h2>
|
||||||
|
<p className="text-sm text-slate-600">Recommended transformations, anonymization strategies, sampling adjustments, consent workflows.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
case "results":
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h2 className="text-xl font-semibold">Results Summary (Placeholder)</h2>
|
||||||
|
<p className="text-sm text-slate-600">Aggregated findings and downloadable compliance report will appear here.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full overflow-y-auto p-6 bg-white/60">
|
||||||
|
{renderTabContent()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
42
frontend/nordic-privacy-ai/components/try/ChatbotPanel.tsx
Normal file
42
frontend/nordic-privacy-ai/components/try/ChatbotPanel.tsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
"use client";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export function ChatbotPanel() {
|
||||||
|
const [messages] = useState<{ role: "user" | "assistant"; content: string }[]>([
|
||||||
|
{ role: "assistant", content: "Hi! I'll help you interpret compliance results soon." },
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full border-l border-slate-200 bg-white/80">
|
||||||
|
<div className="h-14 flex items-center px-4 border-b border-slate-200">
|
||||||
|
<h2 className="font-semibold text-sm text-brand-700">Privacy Copilot</h2>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||||
|
{messages.map((m, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={"rounded-md px-3 py-2 text-sm max-w-[80%] " + (m.role === "assistant" ? "bg-brand-600/10 text-brand-800" : "bg-brand-600 text-white ml-auto")}
|
||||||
|
>
|
||||||
|
{m.content}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="p-3 border-t border-slate-200">
|
||||||
|
<form className="flex gap-2" onSubmit={e => e.preventDefault()}>
|
||||||
|
<input
|
||||||
|
disabled
|
||||||
|
placeholder="Chat coming soon..."
|
||||||
|
className="flex-1 rounded-md border border-slate-300 bg-slate-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 disabled:opacity-60"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled
|
||||||
|
className="rounded-md bg-brand-600 text-white px-4 py-2 text-sm font-medium disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
50
frontend/nordic-privacy-ai/components/try/Sidebar.tsx
Normal file
50
frontend/nordic-privacy-ai/components/try/Sidebar.tsx
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
"use client";
|
||||||
|
import clsx from "clsx";
|
||||||
|
|
||||||
|
export type TryTab =
|
||||||
|
| "processing"
|
||||||
|
| "bias-analysis"
|
||||||
|
| "risk-analysis"
|
||||||
|
| "bias-risk-mitigation"
|
||||||
|
| "results";
|
||||||
|
|
||||||
|
const tabs: { id: TryTab; label: string; description: string }[] = [
|
||||||
|
{ id: "processing", label: "Processing", description: "Upload & parse" },
|
||||||
|
{ id: "bias-analysis", label: "Bias Analysis", description: "Detect patterns" },
|
||||||
|
{ id: "risk-analysis", label: "Risk Analysis", description: "Assess exposure" },
|
||||||
|
{ id: "bias-risk-mitigation", label: "Bias & Risk Mitigation", description: "Recommend actions" },
|
||||||
|
{ id: "results", label: "Results", description: "View summaries" },
|
||||||
|
];
|
||||||
|
|
||||||
|
interface SidebarProps {
|
||||||
|
value: TryTab;
|
||||||
|
onChange: (tab: TryTab) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Sidebar({ value, onChange }: SidebarProps) {
|
||||||
|
return (
|
||||||
|
<aside className={clsx("flex-none w-64 h-full border-r border-slate-200 bg-white/80 flex flex-col")}>
|
||||||
|
<div className="flex items-center px-3 h-14 border-b border-slate-200">
|
||||||
|
<span className="font-semibold text-sm text-brand-700">Workflow</span>
|
||||||
|
</div>
|
||||||
|
<nav className="flex-1 overflow-y-auto py-2 space-y-1">
|
||||||
|
{tabs.map((t) => {
|
||||||
|
const selected = t.id === value;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={t.id}
|
||||||
|
onClick={() => onChange(t.id)}
|
||||||
|
className={clsx(
|
||||||
|
"group w-full text-left px-4 py-3 text-sm font-medium flex flex-col gap-0.5 transition-colors",
|
||||||
|
selected ? "bg-brand-600/10 text-brand-800" : "hover:bg-brand-50 text-slate-700"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className={clsx("", selected && "font-semibold")}>{t.label}</span>
|
||||||
|
<span className="text-xs text-slate-500 group-hover:text-slate-600 line-clamp-1">{t.description}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
5
frontend/nordic-privacy-ai/next-env.d.ts
vendored
Normal file
5
frontend/nordic-privacy-ai/next-env.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
/// <reference types="next" />
|
||||||
|
/// <reference types="next/image-types/global" />
|
||||||
|
|
||||||
|
// NOTE: This file should not be edited
|
||||||
|
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||||
9
frontend/nordic-privacy-ai/next.config.mjs
Normal file
9
frontend/nordic-privacy-ai/next.config.mjs
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
reactStrictMode: true,
|
||||||
|
experimental: {
|
||||||
|
typedRoutes: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
6078
frontend/nordic-privacy-ai/package-lock.json
generated
Normal file
6078
frontend/nordic-privacy-ai/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
frontend/nordic-privacy-ai/package.json
Normal file
28
frontend/nordic-privacy-ai/package.json
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"name": "nordic-privacy-ai",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"next": "14.2.5",
|
||||||
|
"react": "18.2.0",
|
||||||
|
"react-dom": "18.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "20.11.30",
|
||||||
|
"@types/react": "18.2.21",
|
||||||
|
"@types/react-dom": "18.2.7",
|
||||||
|
"autoprefixer": "10.4.17",
|
||||||
|
"eslint": "8.57.0",
|
||||||
|
"eslint-config-next": "14.2.5",
|
||||||
|
"postcss": "8.4.35",
|
||||||
|
"tailwindcss": "3.4.3",
|
||||||
|
"typescript": "5.4.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
frontend/nordic-privacy-ai/postcss.config.js
Normal file
6
frontend/nordic-privacy-ai/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
29
frontend/nordic-privacy-ai/tailwind.config.ts
Normal file
29
frontend/nordic-privacy-ai/tailwind.config.ts
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import type { Config } from 'tailwindcss'
|
||||||
|
|
||||||
|
const config: Config = {
|
||||||
|
content: [
|
||||||
|
'./app/**/*.{js,ts,jsx,tsx}',
|
||||||
|
'./components/**/*.{js,ts,jsx,tsx}',
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
50: '#f0f9ff',
|
||||||
|
100: '#e0f2fe',
|
||||||
|
200: '#bae6fd',
|
||||||
|
300: '#7dd3fc',
|
||||||
|
400: '#38bdf8',
|
||||||
|
500: '#0ea5e9',
|
||||||
|
600: '#0284c7',
|
||||||
|
700: '#0369a1',
|
||||||
|
800: '#075985',
|
||||||
|
900: '#0c4a6e'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
41
frontend/nordic-privacy-ai/tsconfig.json
Normal file
41
frontend/nordic-privacy-ai/tsconfig.json
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es2020",
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"es2020"
|
||||||
|
],
|
||||||
|
"allowJs": false,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"types": [
|
||||||
|
"node",
|
||||||
|
"react"
|
||||||
|
],
|
||||||
|
"baseUrl": ".",
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
".next/types/**/*.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user