Skip to content

Commit 0bb2c3a

Browse files
AsmithcodesAsmithcodes
committed
Added a landing page and renamed home.tsx to Dashboard.tsx
1 parent ebeb79a commit 0bb2c3a

3 files changed

Lines changed: 122 additions & 4 deletions

File tree

‎src/App.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { HashRouter, Routes, Route } from 'react-router-dom';
22
import { Layout } from './components/Layout/Layout';
33
import { ErrorBoundary } from './components/Layout/ErrorBoundary';
4-
import Home from './pages/Home';
4+
import Landing from './pages/Landing';
5+
import Dashboard from './pages/Dashboard';
56
import Transmitter from './pages/Transmitter';
67
import Receiver from './pages/Receiver';
78

@@ -11,10 +12,11 @@ function App() {
1112
<HashRouter>
1213
<Routes>
1314
<Route path="/" element={<Layout />}>
14-
<Route index element={<Home />} />
15+
<Route index element={<Landing />} />
16+
<Route path="dashboard" element={<Dashboard />} />
1517
<Route path="transmit" element={<Transmitter />} />
1618
<Route path="receive" element={<Receiver />} />
17-
<Route path="*" element={<Home />} />
19+
<Route path="*" element={<Landing />} />
1820
</Route>
1921
</Routes>
2022
</HashRouter>

src/pages/Home.tsx renamed to src/pages/Dashboard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const fadeUp = (delay = 0) => ({
1212
transition: { duration: 0.5, ease: 'easeOut' as const, delay },
1313
});
1414

15-
export default function Home() {
15+
export default function Dashboard() {
1616
const navigate = useNavigate();
1717
const [selectedMode, setSelectedMode] = useState<AppMode>('simple');
1818

‎src/pages/Landing.tsx‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { useNavigate } from 'react-router-dom';
2+
import { motion } from 'framer-motion';
3+
import DecryptedText from '../components/TextAnimations/DecryptedText';
4+
5+
const fadeUp = (delay = 0) => ({
6+
initial: { opacity: 0, y: 14 },
7+
animate: { opacity: 1, y: 0 },
8+
transition: { duration: 0.5, ease: 'easeOut' as const, delay },
9+
});
10+
11+
export default function Landing() {
12+
const navigate = useNavigate();
13+
14+
return (
15+
<div className="w-full max-w-4xl flex flex-col gap-16 items-center text-center mt-10">
16+
{/* ── Hero Section ─────────────────────────────── */}
17+
<motion.div {...fadeUp(0.05)} className="space-y-8">
18+
<p className="label" style={{ fontFamily: "'IBM Plex Mono', monospace", color: 'var(--color-primary)', letterSpacing: '0.16em' }}>
19+
◈ INITIATE TRANSMISSION
20+
</p>
21+
22+
<h1
23+
style={{
24+
fontFamily: "'DM Serif Display', Georgia, serif",
25+
fontSize: 'clamp(3rem, 6vw, 6rem)',
26+
fontWeight: 400,
27+
lineHeight: 1.05,
28+
letterSpacing: '-0.01em',
29+
color: 'var(--color-text)',
30+
}}
31+
>
32+
<DecryptedText
33+
text="Data transmission without the network."
34+
speed={35}
35+
maxIterations={12}
36+
animateOn="view"
37+
revealDirection="center"
38+
/>
39+
</h1>
40+
41+
<p
42+
style={{
43+
fontFamily: "'IBM Plex Mono', monospace",
44+
fontSize: '1rem',
45+
color: 'var(--color-text-muted)',
46+
maxWidth: '56ch',
47+
margin: '0 auto',
48+
lineHeight: 1.6
49+
}}
50+
>
51+
Establish a secure, air-gapped peer-to-peer connection using purely acoustic FSK (Frequency-Shift Keying). No Wi-Fi. No Bluetooth. Just sound.
52+
</p>
53+
</motion.div>
54+
55+
{/* ── Launch CTA ─────────────────────────────── */}
56+
<motion.div {...fadeUp(0.2)}>
57+
<button
58+
onClick={() => navigate('/dashboard')}
59+
className="btn group relative overflow-hidden flex items-center justify-center"
60+
style={{
61+
fontFamily: "'IBM Plex Mono', monospace",
62+
fontSize: '1rem',
63+
padding: '1.25rem 3rem',
64+
background: 'var(--color-primary)',
65+
color: 'var(--color-background)',
66+
border: 'none',
67+
boxShadow: '0 8px 32px var(--color-primary-glow)',
68+
cursor: 'pointer',
69+
transition: 'transform 0.2s ease, box-shadow 0.2s ease',
70+
}}
71+
onMouseEnter={(e) => {
72+
e.currentTarget.style.transform = 'translateY(-2px)';
73+
e.currentTarget.style.boxShadow = '0 12px 48px var(--color-primary-glow)';
74+
}}
75+
onMouseLeave={(e) => {
76+
e.currentTarget.style.transform = 'translateY(0)';
77+
e.currentTarget.style.boxShadow = '0 8px 32px var(--color-primary-glow)';
78+
}}
79+
>
80+
<span className="relative z-10 font-semibold tracking-wider flex items-center gap-2">
81+
ENTER DASHBOARD
82+
<motion.span
83+
initial={{ x: 0 }}
84+
whileHover={{ x: 5 }}
85+
transition={{ duration: 0.2 }}
86+
>
87+
→
88+
</motion.span>
89+
</span>
90+
<div
91+
className="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"
92+
/>
93+
</button>
94+
</motion.div>
95+
96+
{/* ── Features Grid ───────────────────────────── */}
97+
<motion.div {...fadeUp(0.3)} className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-10 w-full text-left">
98+
{[
99+
{ title: "AIR-GAPPED", desc: "True physical isolation. Data crosses only the acoustic space between devices.", color: "var(--color-primary)" },
100+
{ title: "STEALTHY P2P", desc: "Leaves no digital footprint. Secure and purely peer-to-peer audio transmission.", color: "var(--color-accent)" },
101+
{ title: "AUDIO FSK", desc: "Leverages multi-frequency shifting to encode payloads directly into soundwaves.", color: "var(--color-text)" },
102+
].map((feature, i) => (
103+
<div key={i} className="panel p-6 flex flex-col gap-3 relative overflow-hidden">
104+
<div className="absolute top-0 left-0 w-full h-[2px]" style={{ background: feature.color, opacity: 0.6 }} />
105+
<h3 className="label" style={{ fontFamily: "'IBM Plex Mono', monospace", color: feature.color, letterSpacing: '0.05em' }}>
106+
{feature.title}
107+
</h3>
108+
<p style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: '0.8rem', color: 'var(--color-text-muted)', lineHeight: 1.6 }}>
109+
{feature.desc}
110+
</p>
111+
</div>
112+
))}
113+
</motion.div>
114+
</div>
115+
);
116+
}

0 commit comments

Comments
 (0)