Merge version_6 into main #5
@@ -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({
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${halant.variable} ${inter.variable} ${archivo.variable} antialiased`}
|
||||
className={`${rajdhani.variable} ${shareTechy.variable} ${exo2.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
@@ -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() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="badges" data-section="badges">
|
||||
<BadgeCardSection />
|
||||
</div>
|
||||
|
||||
<div id="counter" data-section="counter">
|
||||
<MetricCardFourteen
|
||||
title="Limited Beta Slots. Only 1,000 eFounders will claim an E-number in this round. The lower your number, the earlier you were there."
|
||||
@@ -197,7 +203,7 @@ export default function LandingPage() {
|
||||
title: "Product", items: [
|
||||
{ label: "E-Numbers", href: "#layers" },
|
||||
{ label: "Features", href: "#product" },
|
||||
{ label: "Pricing", href: "#" },
|
||||
{ label: "Badges", href: "#badges" },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
71
src/components/sections/badge/BadgeCard.tsx
Normal file
71
src/components/sections/badge/BadgeCard.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
|
||||
interface BadgeCardProps {
|
||||
tier: string;
|
||||
eNumber: string;
|
||||
tagline: string;
|
||||
accentColor: string;
|
||||
perks: string[];
|
||||
stats: { label: string; value: string }[];
|
||||
}
|
||||
|
||||
const BadgeCard: React.FC<BadgeCardProps> = ({
|
||||
tier,
|
||||
eNumber,
|
||||
tagline,
|
||||
accentColor,
|
||||
perks,
|
||||
stats,
|
||||
}) => {
|
||||
return (
|
||||
<div className="badge-card" style={{ "--accent-color": accentColor } as React.CSSProperties}>
|
||||
<div className="badge-gradient-border"></div>
|
||||
<div className="badge-content">
|
||||
<div className="badge-disc-container">
|
||||
<div className="badge-halo"></div>
|
||||
<div className="badge-disc">
|
||||
<div className="badge-disc-inner">
|
||||
<div className="badge-orbit badge-orbit-1"></div>
|
||||
<div className="badge-orbit badge-orbit-2"></div>
|
||||
<span className="badge-e-number">{eNumber}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="badge-shine"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="badge-title">{tier}</h3>
|
||||
<p className="badge-tagline">{tagline}</p>
|
||||
</div>
|
||||
|
||||
<div className="badge-perks">
|
||||
{perks.map((perk, index) => (
|
||||
<span key={index} className="badge-perk">
|
||||
{perk}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="badge-divider"></div>
|
||||
|
||||
<div className="badge-footer">
|
||||
<div className="badge-stats">
|
||||
{stats.map((stat, index) => (
|
||||
<div key={index} className="badge-stat">
|
||||
<div className="badge-stat-label">{stat.label}</div>
|
||||
<div className="badge-stat-value">{stat.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="badge-live-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="badge-scan-line"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BadgeCard;
|
||||
499
src/components/sections/badge/BadgeCardSection.tsx
Normal file
499
src/components/sections/badge/BadgeCardSection.tsx
Normal file
@@ -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 (
|
||||
<section className="py-20 px-6">
|
||||
<style>{`
|
||||
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&family=Exo+2:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
@keyframes floatingDisc {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinOrbit1 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinOrbit2 {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes haloPulse {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanLineSweep {
|
||||
0% {
|
||||
top: 0%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes livePulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes radialGlow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 60px 20px rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.badge-card {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 16px;
|
||||
padding: 32px 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
overflow: hidden;
|
||||
min-height: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: radialGlow 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.badge-card:hover {
|
||||
transform: translateY(-8px) scale(1.012);
|
||||
}
|
||||
|
||||
.badge-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, var(--accent-color, #c084fc) 0%, transparent 100%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.badge-card:hover::before {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.badge-gradient-border {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 16px;
|
||||
padding: 2px;
|
||||
background: linear-gradient(135deg, var(--accent-color, #c084fc) 0%, transparent 50%, var(--accent-color, #c084fc) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.badge-card:hover .badge-gradient-border {
|
||||
animation: gradientShift 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.badge-disc-container {
|
||||
position: relative;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
animation: floatingDisc 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.badge-disc {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), transparent);
|
||||
border: 2px solid var(--accent-color, #c084fc);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.badge-disc-inner {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(192, 132, 252, 0.2), rgba(96, 216, 250, 0.1));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.badge-orbit {
|
||||
position: absolute;
|
||||
border: 1px solid rgba(192, 132, 252, 0.3);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.badge-orbit-1 {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
animation: spinOrbit1 22s linear infinite;
|
||||
}
|
||||
|
||||
.badge-orbit-2 {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
animation: spinOrbit2 15s linear infinite;
|
||||
}
|
||||
|
||||
.badge-circuit-pattern {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.badge-e-number {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: var(--accent-color, #c084fc);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge-halo {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--accent-color, #c084fc);
|
||||
animation: haloPulse 3.5s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.badge-shine {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent);
|
||||
border-radius: 50%;
|
||||
filter: blur(8px);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.badge-scan-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent-color, #c084fc), transparent);
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.badge-card:hover .badge-scan-line {
|
||||
animation: scanLineSweep 1.6s ease-in-out;
|
||||
}
|
||||
|
||||
.badge-title {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.badge-tagline {
|
||||
font-family: 'Exo 2', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: #a0aec0;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.badge-perks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.badge-perk {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 11px;
|
||||
padding: 6px 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(192, 132, 252, 0.3);
|
||||
border-radius: 20px;
|
||||
color: #cbd5e1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge-divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.5), transparent);
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.badge-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(192, 132, 252, 0.2);
|
||||
}
|
||||
|
||||
.badge-stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.badge-stat {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.badge-stat-label {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 10px;
|
||||
color: #718096;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.badge-stat-value {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--accent-color, #c084fc);
|
||||
}
|
||||
|
||||
.badge-live-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-color, #c084fc);
|
||||
animation: livePulse 2.2s ease-in-out infinite;
|
||||
box-shadow: 0 0 10px var(--accent-color, #c084fc);
|
||||
}
|
||||
|
||||
.badge-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.badge-section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.badge-section-title {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.badge-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.badge-section-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.badge-card {
|
||||
padding: 24px 16px;
|
||||
min-height: 450px;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="badge-section-header">
|
||||
<h2 className="badge-section-title">Claim Your Badge. Own Your Identity.</h2>
|
||||
</div>
|
||||
|
||||
<div className="badge-grid">
|
||||
{badges.map((badge) => (
|
||||
<div key={badge.id} className="badge-card" style={{ "--accent-color": badge.accentColor } as React.CSSProperties}>
|
||||
<div className="badge-gradient-border"></div>
|
||||
<div className="badge-content">
|
||||
<div className="badge-disc-container">
|
||||
<div className="badge-halo"></div>
|
||||
<div className="badge-disc">
|
||||
<div className="badge-disc-inner">
|
||||
<div className="badge-orbit badge-orbit-1"></div>
|
||||
<div className="badge-orbit badge-orbit-2"></div>
|
||||
<div className="badge-circuit-pattern">
|
||||
<svg viewBox="0 0 130 130" style={{ width: "100%", height: "100%" }}>
|
||||
<circle cx="65" cy="65" r="60" fill="none" stroke="rgba(192, 132, 252, 0.2)" strokeWidth="0.5" />
|
||||
<circle cx="65" cy="65" r="45" fill="none" stroke="rgba(96, 216, 250, 0.2)" strokeWidth="0.5" />
|
||||
<line x1="65" y1="20" x2="65" y2="30" stroke="rgba(110, 231, 183, 0.3)" strokeWidth="1" />
|
||||
<line x1="65" y1="100" x2="65" y2="110" stroke="rgba(110, 231, 183, 0.3)" strokeWidth="1" />
|
||||
<line x1="30" y1="65" x2="40" y2="65" stroke="rgba(252, 211, 77, 0.3)" strokeWidth="1" />
|
||||
<line x1="90" y1="65" x2="100" y2="65" stroke="rgba(252, 211, 77, 0.3)" strokeWidth="1" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="badge-e-number">{badge.eNumber}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="badge-shine"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="badge-title">{badge.tier}</h3>
|
||||
<p className="badge-tagline">{badge.tagline}</p>
|
||||
</div>
|
||||
|
||||
<div className="badge-perks">
|
||||
{badge.perks.map((perk, index) => (
|
||||
<span key={index} className="badge-perk">
|
||||
{perk}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="badge-divider"></div>
|
||||
|
||||
<div className="badge-footer">
|
||||
<div className="badge-stats">
|
||||
{badge.stats.map((stat, index) => (
|
||||
<div key={index} className="badge-stat">
|
||||
<div className="badge-stat-label">{stat.label}</div>
|
||||
<div className="badge-stat-value">{stat.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="badge-live-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="badge-scan-line"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default BadgeCardSection;
|
||||
Reference in New Issue
Block a user