Skip to content

Commit 66cbf4f

Browse files
pangerlkrpangerlkr
authored
Updated index.css
1 parent c5c2040 commit 66cbf4f

8 files changed

Lines changed: 712 additions & 179 deletions

File tree

‎src/components/Landing.tsx‎

Lines changed: 29 additions & 179 deletions
Original file line numberDiff line numberDiff line change
@@ -1,201 +1,51 @@
1-
import React, { useState } from 'react';
2-
import { Shield, MessageSquare, Users, Zap, Copy, CheckCircle2, ExternalLink } from 'lucide-react';
1+
import React from 'react';
2+
import ParticleField from './landing/ParticleField';
3+
import HeroSection from './landing/HeroSection';
4+
import ActionSection from './landing/ActionSection';
5+
import HowItWorksSection from './landing/HowItWorksSection';
6+
import FeaturesSection from './landing/FeaturesSection';
37

48
interface LandingProps {
59
onCreateRoom: () => void;
610
onJoinRoom: (roomId: string) => void;
711
}
812

913
export default function Landing({ onCreateRoom, onJoinRoom }: LandingProps) {
10-
const [joinRoomId, setJoinRoomId] = useState('');
11-
const [isJoining, setIsJoining] = useState(false);
12-
13-
const handleJoinRoom = () => {
14-
if (joinRoomId.trim()) {
15-
setIsJoining(true);
16-
setTimeout(() => {
17-
onJoinRoom(joinRoomId.trim());
18-
setIsJoining(false);
19-
}, 1000);
20-
}
21-
};
22-
23-
const features = [
24-
{
25-
icon: Shield,
26-
title: 'End-to-End Encryption',
27-
description: 'Military-grade encryption ensures your conversations remain private'
28-
},
29-
{
30-
icon: Zap,
31-
title: 'Self-Destruct Messages',
32-
description: 'Rooms automatically destroy when all participants leave'
33-
},
34-
{
35-
icon: Users,
36-
title: 'Zero Knowledge',
37-
description: 'No registration required, no data stored on servers'
38-
},
39-
{
40-
icon: MessageSquare,
41-
title: 'Rich Communication',
42-
description: 'Text, voice, video calls, and file sharing in one platform'
43-
}
44-
];
45-
4614
return (
47-
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
48-
<div className="absolute inset-0 bg-black/20"></div>
49-
50-
{/* Background Pattern */}
51-
<div className="absolute inset-0 opacity-10">
52-
<div className="absolute inset-0" style={{
53-
backgroundImage: `radial-gradient(circle at 25% 25%, #3B82F6 0%, transparent 50%),
54-
radial-gradient(circle at 75% 75%, #10B981 0%, transparent 50%)`
55-
}}></div>
15+
<div className="min-h-screen bg-[#030d1a] text-white overflow-x-hidden">
16+
<ParticleField />
17+
18+
<div className="absolute inset-0 pointer-events-none overflow-hidden">
19+
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] rounded-full bg-sky-500/5 blur-[120px]" />
20+
<div className="absolute bottom-0 right-0 w-[500px] h-[500px] rounded-full bg-emerald-500/4 blur-[100px]" />
5621
</div>
5722

58-
<div className="relative z-10 container mx-auto px-4 py-12">
59-
{/* Header */}
60-
<div className="text-center mb-16">
61-
<div className="flex items-center justify-center mb-6">
62-
<div className="p-3 bg-blue-500/20 rounded-full backdrop-blur-sm border border-blue-500/30">
63-
<Shield className="w-8 h-8 text-blue-400" />
64-
</div>
65-
</div>
66-
<h1 className="text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
67-
SecureComm
68-
<span className="bg-gradient-to-r from-blue-400 to-emerald-400 bg-clip-text text-transparent">
69-
{' '}Chat
70-
</span>
71-
</h1>
72-
<p className="text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed">
73-
End-to-end encrypted communication platform for sensitive conversations.
74-
Create secure rooms, share safely, communicate privately.
75-
</p>
23+
<div className="relative z-10">
24+
<HeroSection />
25+
26+
<div className="w-full max-w-5xl mx-auto px-4">
27+
<div className="h-px bg-gradient-to-r from-transparent via-sky-400/20 to-transparent" />
7628
</div>
7729

78-
{/* Action Cards */}
79-
<div className="max-w-4xl mx-auto mb-20">
80-
<div className="grid md:grid-cols-2 gap-8">
81-
{/* Create Room Card */}
82-
<div className="group">
83-
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:border-blue-400/50 transition-all duration-300 hover:transform hover:scale-105">
84-
<div className="text-center">
85-
<div className="inline-flex items-center justify-center w-16 h-16 bg-blue-500/20 rounded-full mb-6 group-hover:bg-blue-500/30 transition-colors">
86-
<Users className="w-8 h-8 text-blue-400" />
87-
</div>
88-
<h3 className="text-2xl font-semibold text-white mb-4">Create New Room</h3>
89-
<p className="text-slate-300 mb-8">
90-
Start a secure conversation and invite others with a shareable link
91-
</p>
92-
<button
93-
onClick={onCreateRoom}
94-
className="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-4 px-8 rounded-xl font-semibold hover:from-blue-600 hover:to-blue-700 transition-all duration-200 flex items-center justify-center space-x-2 shadow-lg hover:shadow-blue-500/25"
95-
>
96-
<Users className="w-5 h-5" />
97-
<span>Create Secure Room</span>
98-
</button>
99-
</div>
100-
</div>
101-
</div>
30+
<ActionSection onCreateRoom={onCreateRoom} onJoinRoom={onJoinRoom} />
10231

103-
{/* Join Room Card */}
104-
<div className="group">
105-
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:border-emerald-400/50 transition-all duration-300 hover:transform hover:scale-105">
106-
<div className="text-center">
107-
<div className="inline-flex items-center justify-center w-16 h-16 bg-emerald-500/20 rounded-full mb-6 group-hover:bg-emerald-500/30 transition-colors">
108-
<MessageSquare className="w-8 h-8 text-emerald-400" />
109-
</div>
110-
<h3 className="text-2xl font-semibold text-white mb-4">Join Room</h3>
111-
<p className="text-slate-300 mb-6">
112-
Enter a room ID to join an existing secure conversation
113-
</p>
114-
<div className="space-y-4">
115-
<input
116-
type="text"
117-
placeholder="Enter Room ID (e.g., ABC123XYZ)"
118-
value={joinRoomId}
119-
onChange={(e) => setJoinRoomId(e.target.value.toUpperCase())}
120-
className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-white placeholder-slate-400 focus:outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-400/20 transition-all"
121-
onKeyPress={(e) => e.key === 'Enter' && handleJoinRoom()}
122-
maxLength={10}
123-
/>
124-
<button
125-
onClick={handleJoinRoom}
126-
disabled={!joinRoomId.trim() || isJoining}
127-
className="w-full bg-gradient-to-r from-emerald-500 to-emerald-600 text-white py-4 px-8 rounded-xl font-semibold hover:from-emerald-600 hover:to-emerald-700 transition-all duration-200 flex items-center justify-center space-x-2 shadow-lg hover:shadow-emerald-500/25 disabled:opacity-50 disabled:cursor-not-allowed"
128-
>
129-
{isJoining ? (
130-
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
131-
) : (
132-
<MessageSquare className="w-5 h-5" />
133-
)}
134-
<span>{isJoining ? 'Joining...' : 'Join Room'}</span>
135-
</button>
136-
</div>
137-
</div>
138-
</div>
139-
</div>
140-
</div>
32+
<div className="w-full max-w-5xl mx-auto px-4">
33+
<div className="h-px bg-gradient-to-r from-transparent via-white/5 to-transparent" />
14134
</div>
14235

143-
{/* How it Works Section */}
144-
<div className="max-w-4xl mx-auto mb-20">
145-
<h2 className="text-3xl font-bold text-white text-center mb-12">
146-
How It Works
147-
</h2>
148-
<div className="grid md:grid-cols-3 gap-8">
149-
<div className="text-center">
150-
<div className="inline-flex items-center justify-center w-12 h-12 bg-blue-500/20 rounded-full mb-4">
151-
<span className="text-blue-400 font-bold">1</span>
152-
</div>
153-
<h3 className="text-lg font-semibold text-white mb-2">Create Room</h3>
154-
<p className="text-slate-400 text-sm">Generate a secure room with unique ID</p>
155-
</div>
156-
<div className="text-center">
157-
<div className="inline-flex items-center justify-center w-12 h-12 bg-emerald-500/20 rounded-full mb-4">
158-
<span className="text-emerald-400 font-bold">2</span>
159-
</div>
160-
<h3 className="text-lg font-semibold text-white mb-2">Share Link</h3>
161-
<p className="text-slate-400 text-sm">Send the room link to your contact</p>
162-
</div>
163-
<div className="text-center">
164-
<div className="inline-flex items-center justify-center w-12 h-12 bg-purple-500/20 rounded-full mb-4">
165-
<span className="text-purple-400 font-bold">3</span>
166-
</div>
167-
<h3 className="text-lg font-semibold text-white mb-2">Chat Securely</h3>
168-
<p className="text-slate-400 text-sm">Communicate with end-to-end encryption</p>
169-
</div>
170-
</div>
171-
</div>
36+
<HowItWorksSection />
17237

173-
{/* Features Grid */}
174-
<div className="max-w-6xl mx-auto">
175-
<h2 className="text-3xl font-bold text-white text-center mb-12">
176-
Military-Grade Security Features
177-
</h2>
178-
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
179-
{features.map((feature, index) => (
180-
<div key={index} className="text-center group">
181-
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/20 transition-all duration-300 hover:transform hover:-translate-y-2">
182-
<div className="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue-500/20 to-emerald-500/20 rounded-xl mb-4 group-hover:scale-110 transition-transform">
183-
<feature.icon className="w-6 h-6 text-blue-400" />
184-
</div>
185-
<h3 className="text-lg font-semibold text-white mb-3">{feature.title}</h3>
186-
<p className="text-slate-400 text-sm leading-relaxed">{feature.description}</p>
187-
</div>
188-
</div>
189-
))}
190-
</div>
38+
<div className="w-full max-w-5xl mx-auto px-4">
39+
<div className="h-px bg-gradient-to-r from-transparent via-white/5 to-transparent" />
19140
</div>
19241

193-
{/* Footer */}
194-
<div className="text-center mt-20 pt-8 border-t border-white/10">
195-
<p className="text-slate-400">
196-
No registration required • Zero data retention • Open source security
42+
<FeaturesSection />
43+
44+
<footer className="py-12 px-4 text-center border-t border-white/5">
45+
<p className="text-slate-600 text-sm">
46+
No registration &nbsp;&bull;&nbsp; Zero data retention &nbsp;&bull;&nbsp; Open source security
19747
</p>
198-
</div>
48+
</footer>
19949
</div>
20050
</div>
20151
);

‎src/components/landing/ActionSection.tsx‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import React, { useState, useRef, useCallback } from 'react';
2+
import { Users, MessageSquare, ArrowRight, Loader } from 'lucide-react';
3+
import { useScrollReveal } from '../../hooks/useScrollReveal';
4+
5+
interface ActionSectionProps {
6+
onCreateRoom: () => void;
7+
onJoinRoom: (roomId: string) => void;
8+
}
9+
10+
function TiltCard({ children, accentColor }: { children: React.ReactNode; accentColor: string }) {
11+
const cardRef = useRef<HTMLDivElement>(null);
12+
const [style, setStyle] = useState({});
13+
14+
const onMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
15+
const el = cardRef.current;
16+
if (!el) return;
17+
const rect = el.getBoundingClientRect();
18+
const x = e.clientX - rect.left;
19+
const y = e.clientY - rect.top;
20+
const cx = rect.width / 2;
21+
const cy = rect.height / 2;
22+
const tiltX = ((y - cy) / cy) * 8;
23+
const tiltY = ((x - cx) / cx) * -8;
24+
const glowX = (x / rect.width) * 100;
25+
const glowY = (y / rect.height) * 100;
26+
27+
setStyle({
28+
transform: `perspective(800px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) translateZ(4px)`,
29+
background: `radial-gradient(circle at ${glowX}% ${glowY}%, ${accentColor}08, transparent 60%), rgba(255,255,255,0.03)`,
30+
});
31+
}, [accentColor]);
32+
33+
const onMouseLeave = useCallback(() => {
34+
setStyle({
35+
transform: 'perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(0px)',
36+
background: 'rgba(255,255,255,0.03)',
37+
transition: 'transform 0.5s ease, background 0.3s ease',
38+
});
39+
}, []);
40+
41+
return (
42+
<div
43+
ref={cardRef}
44+
onMouseMove={onMouseMove}
45+
onMouseLeave={onMouseLeave}
46+
style={{ ...style, transition: 'transform 0.08s ease-out' }}
47+
className="h-full rounded-2xl border border-white/10 backdrop-blur-md p-8"
48+
>
49+
{children}
50+
</div>
51+
);
52+
}
53+
54+
export default function ActionSection({ onCreateRoom, onJoinRoom }: ActionSectionProps) {
55+
const [joinRoomId, setJoinRoomId] = useState('');
56+
const [isJoining, setIsJoining] = useState(false);
57+
const sectionRef = useScrollReveal<HTMLDivElement>();
58+
59+
const handleJoin = () => {
60+
if (!joinRoomId.trim()) return;
61+
setIsJoining(true);
62+
setTimeout(() => {
63+
onJoinRoom(joinRoomId.trim());
64+
setIsJoining(false);
65+
}, 1000);
66+
};
67+
68+
return (
69+
<section className="relative py-24 px-4">
70+
<div ref={sectionRef} className="reveal-item max-w-4xl mx-auto">
71+
<div className="text-center mb-14">
72+
<h2 className="text-3xl lg:text-4xl font-bold text-white mb-4">
73+
Start communicating
74+
<span className="text-sky-400"> securely</span>
75+
</h2>
76+
<p className="text-slate-400 max-w-lg mx-auto">No accounts, no history, no compromise.</p>
77+
</div>
78+
79+
<div className="grid md:grid-cols-2 gap-6">
80+
<TiltCard accentColor="#0ea5e9">
81+
<div className="text-center h-full flex flex-col">
82+
<div className="mb-6 relative inline-block mx-auto">
83+
<div className="w-16 h-16 rounded-2xl bg-sky-500/10 border border-sky-400/20 flex items-center justify-center mx-auto">
84+
<Users className="w-8 h-8 text-sky-400" />
85+
</div>
86+
<div className="absolute -inset-2 rounded-3xl border border-sky-400/10 animate-pulse-slow" />
87+
</div>
88+
<h3 className="text-xl font-semibold text-white mb-3">New Secure Room</h3>
89+
<p className="text-slate-400 text-sm mb-8 flex-1 leading-relaxed">
90+
Generate a fresh encrypted room with a unique shareable ID. Destroy on exit.
91+
</p>
92+
<button
93+
onClick={onCreateRoom}
94+
className="group w-full relative overflow-hidden bg-sky-500 text-white py-3.5 px-6 rounded-xl font-semibold flex items-center justify-center gap-2 hover:bg-sky-400 transition-colors duration-200"
95+
>
96+
<span>Create Room</span>
97+
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
98+
<span className="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity" />
99+
</button>
100+
</div>
101+
</TiltCard>
102+
103+
<TiltCard accentColor="#10b981">
104+
<div className="text-center h-full flex flex-col">
105+
<div className="mb-6 relative inline-block mx-auto">
106+
<div className="w-16 h-16 rounded-2xl bg-emerald-500/10 border border-emerald-400/20 flex items-center justify-center mx-auto">
107+
<MessageSquare className="w-8 h-8 text-emerald-400" />
108+
</div>
109+
<div className="absolute -inset-2 rounded-3xl border border-emerald-400/10 animate-pulse-slow" />
110+
</div>
111+
<h3 className="text-xl font-semibold text-white mb-3">Join a Room</h3>
112+
<p className="text-slate-400 text-sm mb-6 leading-relaxed">
113+
Enter a room ID to join an existing encrypted conversation.
114+
</p>
115+
<div className="space-y-3 mt-auto">
116+
<input
117+
type="text"
118+
placeholder="Room ID (e.g. ABC123XYZ)"
119+
value={joinRoomId}
120+
onChange={(e) => setJoinRoomId(e.target.value.toUpperCase())}
121+
onKeyDown={(e) => e.key === 'Enter' && handleJoin()}
122+
maxLength={10}
123+
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-slate-500 focus:outline-none focus:border-emerald-400/50 focus:ring-2 focus:ring-emerald-400/10 transition-all text-center tracking-widest font-mono"
124+
/>
125+
<button
126+
onClick={handleJoin}
127+
disabled={!joinRoomId.trim() || isJoining}
128+
className="group w-full relative overflow-hidden bg-emerald-500 text-white py-3.5 px-6 rounded-xl font-semibold flex items-center justify-center gap-2 hover:bg-emerald-400 transition-colors duration-200 disabled:opacity-40 disabled:cursor-not-allowed"
129+
>
130+
{isJoining ? (
131+
<Loader className="w-4 h-4 animate-spin" />
132+
) : (
133+
<>
134+
<span>Join Room</span>
135+
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
136+
</>
137+
)}
138+
</button>
139+
</div>
140+
</div>
141+
</TiltCard>
142+
</div>
143+
</div>
144+
</section>
145+
);
146+
}

0 commit comments

Comments
 (0)