diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3afa6ed..166abf1 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,22 +1,24 @@ import type { Metadata } from "next"; -import { Halant } from "next/font/google"; -import { Inter } from "next/font/google"; -import { Archivo } from "next/font/google"; +import { Rajdhani } from "next/font/google"; +import { Share_Tech_Mono } from "next/font/google"; +import { Exo_2 } from "next/font/google"; import "./globals.css"; import { ServiceWrapper } from "@/components/ServiceWrapper"; import Tag from "@/tag/Tag"; -const halant = Halant({ - variable: "--font-halant", subsets: ["latin"], +const rajdhani = Rajdhani({ + variable: "--font-rajdhani", subsets: ["latin"], weight: ["300", "400", "500", "600", "700"], }); -const inter = Inter({ - variable: "--font-inter", subsets: ["latin"], +const shareTechy = Share_Tech_Mono({ + variable: "--font-share-tech-mono", subsets: ["latin"], + weight: ["400"], }); -const archivo = Archivo({ - variable: "--font-archivo", subsets: ["latin"], +const exo2 = Exo_2({ + variable: "--font-exo-2", subsets: ["latin"], + weight: ["300", "400", "500", "600", "700"], }); export const metadata: Metadata = { @@ -48,7 +50,7 @@ export default function RootLayout({ {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 7aadc85..7653a04 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,6 +10,7 @@ import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen import ContactText from "@/components/sections/contact/ContactText"; import FooterBase from "@/components/sections/footer/FooterBase"; import { AlertCircle, Cloud, Layers, Smartphone, Zap } from "lucide-react"; +import BadgeCardSection from "@/components/sections/badge/BadgeCardSection"; export default function LandingPage() { return ( @@ -32,6 +33,7 @@ export default function LandingPage() { { name: "Solution", id: "solution" }, { name: "Layers", id: "layers" }, { name: "Product", id: "product" }, + { name: "Badges", id: "badges" }, { name: "Beta", id: "beta" }, ]} brandName="eNative" @@ -155,6 +157,10 @@ export default function LandingPage() { /> +
+ +
+
= ({ + tier, + eNumber, + tagline, + accentColor, + perks, + stats, +}) => { + return ( +
+
+
+
+
+
+
+
+
+ {eNumber} +
+
+
+
+ +
+

{tier}

+

{tagline}

+
+ +
+ {perks.map((perk, index) => ( + + {perk} + + ))} +
+ +
+ +
+
+ {stats.map((stat, index) => ( +
+
{stat.label}
+
{stat.value}
+
+ ))} +
+
+
+
+ +
+
+ ); +}; + +export default BadgeCard; diff --git a/src/components/sections/badge/BadgeCardSection.tsx b/src/components/sections/badge/BadgeCardSection.tsx new file mode 100644 index 0000000..34c33b1 --- /dev/null +++ b/src/components/sections/badge/BadgeCardSection.tsx @@ -0,0 +1,499 @@ +"use client"; + +import React, { useEffect, useState } from "react"; +import BadgeCard from "./BadgeCard"; + +interface Badge { + id: string; + tier: string; + eNumber: string; + tagline: string; + accentColor: string; + perks: string[]; + stats: { label: string; value: string }[]; +} + +const BadgeCardSection: React.FC = () => { + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + const badges: Badge[] = [ + { + id: "tier-1", tier: "Tier I Founder eNative", eNumber: "E-0001", tagline: "The pioneers who saw the future", accentColor: "#c084fc", perks: [ + "Lifetime founder status", "Priority call verification", "Custom badge design"], + stats: [ + { label: "Tier", value: "Founder" }, + { label: "Status", value: "Active" }, + ], + }, + { + id: "cross-tier", tier: "Cross-Tier Business eNative", eNumber: "E-B001", tagline: "Building bridges across networks", accentColor: "#60d8fa", perks: [ + "Cross-tier verification", "Business analytics", "API access"], + stats: [ + { label: "Tier", value: "Business" }, + { label: "Status", value: "Active" }, + ], + }, + { + id: "tier-2", tier: "Tier II Verified eNative", eNumber: "E-1042", tagline: "Community trusted and verified", accentColor: "#6ee7b7", perks: [ + "Verified badge", "Enhanced security", "Community support"], + stats: [ + { label: "Tier", value: "Verified" }, + { label: "Status", value: "Active" }, + ], + }, + { + id: "tier-3", tier: "Tier III Community Verified", eNumber: "E-3517", tagline: "Strength through community consensus", accentColor: "#fcd34d", perks: [ + "Community voting rights", "Collective identity", "Governance participation"], + stats: [ + { label: "Tier", value: "Community" }, + { label: "Status", value: "Active" }, + ], + }, + ]; + + if (!mounted) return null; + + return ( +
+ + +
+

Claim Your Badge. Own Your Identity.

+
+ +
+ {badges.map((badge) => ( +
+
+
+
+
+
+
+
+
+
+ + + + + + + + +
+ {badge.eNumber} +
+
+
+
+ +
+

{badge.tier}

+

{badge.tagline}

+
+ +
+ {badge.perks.map((perk, index) => ( + + {perk} + + ))} +
+ +
+ +
+
+ {badge.stats.map((stat, index) => ( +
+
{stat.label}
+
{stat.value}
+
+ ))} +
+
+
+
+ +
+
+ ))} +
+
+ ); +}; + +export default BadgeCardSection;