Skip to content

Commit e40d30f

Browse files
jhayniffyjhayniffy
authored
Merge pull request #139 from miss-yusrah/feat/design-system
 Implement complete frontend design system and user flows
2 parents 119fa1f + 548fd9f commit e40d30f

39 files changed

Lines changed: 3248 additions & 6 deletions

‎frontend/next.config.mjs‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
11
/** @type {import('next').NextConfig} */
2-
const nextConfig = {};
2+
const nextConfig = {
3+
experimental: {
4+
optimizeCss: true,
5+
optimizePackageImports: ['lucide-react'],
6+
},
7+
images: {
8+
domains: ['localhost'],
9+
formats: ['image/webp', 'image/avif'],
10+
},
11+
compiler: {
12+
removeConsole: process.env.NODE_ENV === 'production',
13+
},
14+
poweredByHeader: false,
15+
reactStrictMode: true,
16+
swcMinify: true,
17+
}
18+
319
export default nextConfig;

‎frontend/package.json‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,31 @@
99
"test": "jest --passWithNoTests"
1010
},
1111
"dependencies": {
12+
"@hookform/resolvers": "^5.2.2",
13+
"@radix-ui/react-dialog": "^1.1.15",
14+
"@radix-ui/react-label": "^2.1.8",
15+
"@radix-ui/react-select": "^2.2.6",
16+
"@radix-ui/react-slot": "^1.2.4",
17+
"@radix-ui/react-toast": "^1.2.15",
18+
"class-variance-authority": "^0.7.1",
19+
"clsx": "^2.1.1",
20+
"lucide-react": "^1.7.0",
1221
"next": "15.2.3",
1322
"react": "^19.0.0",
14-
"react-dom": "^19.0.0"
23+
"react-dom": "^19.0.0",
24+
"react-hook-form": "^7.72.0",
25+
"tailwind-merge": "^3.5.0",
26+
"zod": "^4.3.6"
1527
},
1628
"devDependencies": {
17-
"@types/node": "^22",
29+
"@types/node": "^22.19.15",
1830
"@types/react": "^19",
31+
"autoprefixer": "^10.4.27",
1932
"eslint": "^9",
2033
"eslint-config-next": "15.2.3",
2134
"jest": "^29",
35+
"postcss": "^8.5.8",
36+
"tailwindcss": "^4.2.2",
2237
"typescript": "^5"
2338
}
2439
}

‎frontend/postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎frontend/src/app/globals.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer base {
6+
:root {
7+
--background: 0 0% 100%;
8+
--foreground: 222.2 84% 4.9%;
9+
--card: 0 0% 100%;
10+
--card-foreground: 222.2 84% 4.9%;
11+
--popover: 0 0% 100%;
12+
--popover-foreground: 222.2 84% 4.9%;
13+
--primary: 221.2 83.2% 53.3%;
14+
--primary-foreground: 210 40% 98%;
15+
--secondary: 210 40% 96%;
16+
--secondary-foreground: 222.2 84% 4.9%;
17+
--muted: 210 40% 96%;
18+
--muted-foreground: 215.4 16.3% 46.9%;
19+
--accent: 210 40% 96%;
20+
--accent-foreground: 222.2 84% 4.9%;
21+
--destructive: 0 84.2% 60.2%;
22+
--destructive-foreground: 210 40% 98%;
23+
--border: 214.3 31.8% 91.4%;
24+
--input: 214.3 31.8% 91.4%;
25+
--ring: 221.2 83.2% 53.3%;
26+
--radius: 0.5rem;
27+
--font-inter: 'Inter', system-ui, sans-serif;
28+
--font-ibm-mono: 'IBM Plex Mono', monospace;
29+
}
30+
31+
.dark {
32+
--background: 222.2 84% 4.9%;
33+
--foreground: 210 40% 98%;
34+
--card: 222.2 84% 4.9%;
35+
--card-foreground: 210 40% 98%;
36+
--popover: 222.2 84% 4.9%;
37+
--popover-foreground: 210 40% 98%;
38+
--primary: 217.2 91.2% 59.8%;
39+
--primary-foreground: 222.2 84% 4.9%;
40+
--secondary: 217.2 32.6% 17.5%;
41+
--secondary-foreground: 210 40% 98%;
42+
--muted: 217.2 32.6% 17.5%;
43+
--muted-foreground: 215 20.2% 65.1%;
44+
--accent: 217.2 32.6% 17.5%;
45+
--accent-foreground: 210 40% 98%;
46+
--destructive: 0 62.8% 30.6%;
47+
--destructive-foreground: 210 40% 98%;
48+
--border: 217.2 32.6% 17.5%;
49+
--input: 217.2 32.6% 17.5%;
50+
--ring: 224.3 76.3% 94.1%;
51+
}
52+
}
53+
54+
@layer base {
55+
* {
56+
@apply border-border;
57+
}
58+
body {
59+
@apply bg-background text-foreground;
60+
}
61+
}
62+
63+
@layer utilities {
64+
.focus-ring {
65+
@apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background;
66+
}
67+
68+
.sr-only {
69+
position: absolute;
70+
width: 1px;
71+
height: 1px;
72+
padding: 0;
73+
margin: -1px;
74+
overflow: hidden;
75+
clip: rect(0, 0, 0, 0);
76+
white-space: nowrap;
77+
border: 0;
78+
}
79+
}

‎frontend/src/app/layout.tsx‎

Lines changed: 73 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,76 @@
11
import type { Metadata } from "next";
2-
export const metadata: Metadata = { title: "niffyInsur" };
2+
import "./globals.css";
3+
import { Toaster } from "@/components/ui/toaster";
4+
import { inter, ibmPlexMono } from "@/lib/fonts";
5+
6+
export const metadata: Metadata = {
7+
title: "NiffyInsur - Decentralized Insurance for Stellar Network",
8+
description: "Parametric insurance powered by DAO governance. Get coverage for smart contract risks with transparent, community-driven claim voting on the Stellar blockchain.",
9+
keywords: ["DeFi insurance", "parametric insurance", "Stellar blockchain", "DAO governance", "smart contract coverage", "decentralized insurance"],
10+
authors: [{ name: "NiffyInsur Team" }],
11+
creator: "NiffyInsur",
12+
publisher: "NiffyInsur",
13+
formatDetection: {
14+
email: false,
15+
address: false,
16+
telephone: false,
17+
},
18+
metadataBase: new URL("https://niffyinsur.com"),
19+
alternates: {
20+
canonical: "/",
21+
},
22+
openGraph: {
23+
type: "website",
24+
locale: "en_US",
25+
url: "https://niffyinsur.com",
26+
title: "NiffyInsur - Decentralized Insurance for Stellar Network",
27+
description: "Parametric insurance powered by DAO governance. Get coverage for smart contract risks with transparent, community-driven claim voting.",
28+
siteName: "NiffyInsur",
29+
images: [
30+
{
31+
url: "/og-image.png",
32+
width: 1200,
33+
height: 630,
34+
alt: "NiffyInsur - Decentralized Insurance",
35+
},
36+
],
37+
},
38+
twitter: {
39+
card: "summary_large_image",
40+
title: "NiffyInsur - Decentralized Insurance for Stellar Network",
41+
description: "Parametric insurance powered by DAO governance. Get coverage for smart contract risks with transparent, community-driven claim voting.",
42+
images: ["/og-image.png"],
43+
},
44+
robots: {
45+
index: true,
46+
follow: true,
47+
googleBot: {
48+
index: true,
49+
follow: true,
50+
"max-video-preview": -1,
51+
"max-image-preview": "large",
52+
"max-snippet": -1,
53+
},
54+
},
55+
verification: {
56+
google: "your-google-verification-code",
57+
},
58+
};
59+
360
export default function RootLayout({ children }: { children: React.ReactNode }) {
4-
return <html lang="en"><body>{children}</body></html>;
61+
return (
62+
<html lang="en" className={`${inter.variable} ${ibmPlexMono.variable}`}>
63+
<head>
64+
<link rel="icon" href="/favicon.ico" />
65+
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
66+
<link rel="manifest" href="/site.webmanifest" />
67+
<link rel="preconnect" href="https://fonts.googleapis.com" />
68+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
69+
</head>
70+
<body className="font-sans">
71+
{children}
72+
<Toaster />
73+
</body>
74+
</html>
75+
);
576
}

‎frontend/src/app/page.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
import { Hero, HowItWorks, Security, CTA } from '@/components/landing'
2+
13
export default function Home() {
2-
return <main><h1>niffyInsur</h1></main>;
4+
return (
5+
<main>
6+
<Hero />
7+
<HowItWorks />
8+
<Security />
9+
<CTA />
10+
</main>
11+
)
312
}

‎frontend/src/app/policy/page.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { PolicyInitiation } from '@/components/policy/policy-initiation'
2+
3+
export default function PolicyPage() {
4+
return <PolicyInitiation />
5+
}

‎frontend/src/app/quote/page.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { QuoteForm } from '@/components/quote/quote-form'
2+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
3+
import { Shield, Calculator } from 'lucide-react'
4+
5+
export default function QuotePage() {
6+
return (
7+
<div className="container mx-auto px-4 py-8">
8+
<div className="text-center mb-8">
9+
<div className="flex items-center justify-center mb-4">
10+
<Calculator className="h-8 w-8 text-blue-600 mr-2" />
11+
<h1 className="text-3xl font-bold text-gray-900">Get Insurance Quote</h1>
12+
</div>
13+
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
14+
Calculate your premium for smart contract insurance coverage on the Stellar network.
15+
</p>
16+
</div>
17+
18+
<div className="mb-8">
19+
<Card>
20+
<CardHeader>
21+
<CardTitle className="flex items-center gap-2">
22+
<Shield className="h-5 w-5" />
23+
How It Works
24+
</CardTitle>
25+
</CardHeader>
26+
<CardContent>
27+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
28+
<div>
29+
<h3 className="font-semibold mb-2">1. Provide Details</h3>
30+
<p className="text-gray-600">
31+
Enter your contract address, coverage amount, and risk factors.
32+
</p>
33+
</div>
34+
<div>
35+
<h3 className="font-semibold mb-2">2. Get Quote</h3>
36+
<p className="text-gray-600">
37+
Our algorithm calculates your premium based on risk assessment.
38+
</p>
39+
</div>
40+
<div>
41+
<h3 className="font-semibold mb-2">3. Purchase Policy</h3>
42+
<p className="text-gray-600">
43+
Accept the quote and pay the premium to activate coverage.
44+
</p>
45+
</div>
46+
</div>
47+
</CardContent>
48+
</Card>
49+
</div>
50+
51+
<QuoteForm />
52+
</div>
53+
)
54+
}

‎frontend/src/app/robots.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { MetadataRoute } from 'next'
2+
3+
export default function robots(): MetadataRoute.Robots {
4+
return {
5+
rules: {
6+
userAgent: '*',
7+
allow: '/',
8+
disallow: ['/api/', '/admin/'],
9+
},
10+
sitemap: 'https://niffyinsur.com/sitemap.xml',
11+
}
12+
}

‎frontend/src/app/sitemap.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { MetadataRoute } from 'next'
2+
3+
export default function sitemap(): MetadataRoute.Sitemap {
4+
const baseUrl = 'https://niffyinsur.com'
5+
6+
return [
7+
{
8+
url: baseUrl,
9+
lastModified: new Date(),
10+
changeFrequency: 'daily',
11+
priority: 1,
12+
},
13+
{
14+
url: `${baseUrl}/quote`,
15+
lastModified: new Date(),
16+
changeFrequency: 'weekly',
17+
priority: 0.8,
18+
},
19+
{
20+
url: `${baseUrl}/dashboard`,
21+
lastModified: new Date(),
22+
changeFrequency: 'daily',
23+
priority: 0.7,
24+
},
25+
{
26+
url: `${baseUrl}/terms`,
27+
lastModified: new Date(),
28+
changeFrequency: 'monthly',
29+
priority: 0.5,
30+
},
31+
{
32+
url: `${baseUrl}/privacy`,
33+
lastModified: new Date(),
34+
changeFrequency: 'monthly',
35+
priority: 0.5,
36+
},
37+
{
38+
url: `${baseUrl}/docs`,
39+
lastModified: new Date(),
40+
changeFrequency: 'weekly',
41+
priority: 0.6,
42+
},
43+
]
44+
}

0 commit comments

Comments
 (0)