Skip to content

Commit 6335f30

Browse files
yash-pouranikyash-pouranik
committed
Refactor: Separate LandingPage styles and restructure component
- Moved LandingPage.jsx to LandingPage/index.jsx - Extracted embedded CSS into a dedicated style.css file - Updated component imports to reflect the new directory structuregit
1 parent 365123a commit 6335f30

2 files changed

Lines changed: 487 additions & 289 deletions

File tree

frontend/src/pages/LandingPage.jsx renamed to frontend/src/pages/LandingPage/index.jsx

Lines changed: 43 additions & 289 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { useState, useEffect } from 'react';
1+
import { useState, useEffect, useRef } from 'react';
22
import { Link, useNavigate } from 'react-router-dom';
3-
import { useAuth } from '../context/AuthContext';
3+
import { useAuth } from '../../context/AuthContext';
44
import {
55
Database,
66
Shield,
@@ -27,21 +27,37 @@ import {
2727
ChevronDown,
2828
ChevronUp
2929
} from 'lucide-react';
30-
import Footer from '../components/Layout/Footer';
30+
import Footer from '../../components/Layout/Footer';
31+
import './style.css';
3132

3233
function LandingPage() {
3334
const { isAuthenticated } = useAuth();
3435
const navigate = useNavigate();
3536
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
36-
const [scrolled, setScrolled] = useState(false);
37+
const [isNavVisible, setIsNavVisible] = useState(true);
38+
const lastScrollY = useRef(0);
3739

3840
// Simulated API Response State
3941
const [apiResponse, setApiResponse] = useState(null);
4042
const [isLoadingDemo, setIsLoadingDemo] = useState(false);
4143
const [openFaqIndex, setOpenFaqIndex] = useState(null);
4244

4345
useEffect(() => {
44-
const handleScroll = () => setScrolled(window.scrollY > 20);
46+
const handleScroll = () => {
47+
const currentScrollY = window.scrollY;
48+
49+
// Glass effect
50+
setScrolled(currentScrollY > 20);
51+
52+
// Smart Nav Logic
53+
if (currentScrollY > lastScrollY.current && currentScrollY > 100) {
54+
setIsNavVisible(false); // Hide on scroll down
55+
} else {
56+
setIsNavVisible(true); // Show on scroll up
57+
}
58+
lastScrollY.current = currentScrollY;
59+
};
60+
4561
window.addEventListener('scroll', handleScroll);
4662
return () => window.removeEventListener('scroll', handleScroll);
4763
}, []);
@@ -68,293 +84,31 @@ function LandingPage() {
6884

6985
return (
7086
<div className="landing-page">
71-
<style>{`
72-
/* --- LANDING SPECIFIC STYLES --- */
73-
.landing-page {
74-
background-color: #050505;
75-
color: #fff;
76-
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
77-
overflow-x: hidden;
78-
letter-spacing: -0.01em;
79-
}
80-
81-
/* GRID BACKGROUND */
82-
.grid-bg {
83-
background-size: 40px 40px;
84-
background-image:
85-
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
86-
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
87-
mask-image: radial-gradient(circle at 50% 0%, black 40%, transparent 100%);
88-
position: absolute;
89-
top: 0; left: 0; right: 0; height: 120vh;
90-
z-index: 0;
91-
pointer-events: none;
92-
}
93-
94-
/* NAVBAR */
95-
.nav-glass {
96-
background: rgba(5, 5, 5, 0.8);
97-
backdrop-filter: blur(16px);
98-
border-bottom: 1px solid rgba(255,255,255,0.06);
99-
position: sticky;
100-
top: 0;
101-
z-index: 50;
102-
transition: all 0.3s ease;
103-
}
104-
.nav-container {
105-
max-width: 1200px;
106-
margin: 0 auto;
107-
display: flex;
108-
justify-content: space-between;
109-
align-items: center;
110-
padding: 1rem 1.5rem;
111-
}
112-
113-
/* TEXT GRADIENTS & UTILS */
114-
.text-gradient {
115-
background: linear-gradient(135deg, #fff 0%, #888 100%);
116-
-webkit-background-clip: text;
117-
-webkit-text-fill-color: transparent;
118-
}
119-
.text-gradient-primary {
120-
background: linear-gradient(135deg, #3ECF8E 0%, #34B27B 100%);
121-
-webkit-background-clip: text;
122-
-webkit-text-fill-color: transparent;
123-
}
124-
.section-title {
125-
font-size: 2.5rem;
126-
font-weight: 800;
127-
margin-bottom: 1.5rem;
128-
letter-spacing: -0.02em;
129-
}
130-
.section-desc {
131-
font-size: 1.1rem;
132-
color: #888;
133-
line-height: 1.6;
134-
max-width: 700px;
135-
margin: 0 auto;
136-
}
137-
138-
/* HERO */
139-
.hero-section {
140-
position: relative;
141-
padding-top: 8rem;
142-
padding-bottom: 8rem;
143-
z-index: 1;
144-
display: flex;
145-
flex-direction: column;
146-
align-items: center;
147-
text-align: center;
148-
}
149-
150-
.hero-pill {
151-
background: rgba(62, 207, 142, 0.1);
152-
color: #3ECF8E;
153-
border: 1px solid rgba(62, 207, 142, 0.2);
154-
padding: 6px 16px;
155-
border-radius: 99px;
156-
font-size: 0.85rem;
157-
font-weight: 500;
158-
margin-bottom: 2rem;
159-
animation: fadeInDown 0.8s ease-out;
160-
display: inline-flex;
161-
align-items: center;
162-
gap: 6px;
163-
}
164-
165-
.hero-heading {
166-
font-size: 4.5rem;
167-
font-weight: 800;
168-
line-height: 1.05;
169-
letter-spacing: -0.03em;
170-
margin-bottom: 2rem;
171-
animation: fadeInUp 0.8s ease-out;
172-
}
173-
174-
.hero-sub {
175-
font-size: 1.25rem;
176-
color: #999;
177-
max-width: 650px;
178-
line-height: 1.6;
179-
margin-bottom: 3rem;
180-
animation: fadeInUp 1s ease-out;
181-
}
182-
183-
/* DEMO CONSOLE */
184-
.demo-wrapper {
185-
margin-top: 5rem;
186-
width: 100%;
187-
max-width: 900px;
188-
background: #111;
189-
border: 1px solid #222;
190-
border-radius: 12px;
191-
box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
192-
overflow: hidden;
193-
animation: fadeInUp 1.2s ease-out;
194-
position: relative;
195-
}
196-
197-
.demo-header {
198-
background: #161616;
199-
padding: 14px 20px;
200-
display: flex;
201-
align-items: center;
202-
border-bottom: 1px solid #222;
203-
gap: 1rem;
204-
}
205-
206-
.url-bar {
207-
flex: 1;
208-
background: #080808;
209-
color: #888;
210-
font-family: 'JetBrains Mono', monospace;
211-
padding: 8px 12px;
212-
border-radius: 6px;
213-
font-size: 0.85rem;
214-
display: flex;
215-
justify-content: space-between;
216-
align-items: center;
217-
border: 1px solid #222;
218-
}
219-
220-
.demo-content {
221-
padding: 0;
222-
display: flex;
223-
flex-direction: column;
224-
}
225-
226-
@media(min-width: 768px) {
227-
.demo-content { flex-direction: row; height: 380px; }
228-
.demo-sidebar { width: 220px; border-right: 1px solid #222; }
229-
.demo-main { flex: 1; }
230-
}
231-
232-
.demo-sidebar { background: #111; padding: 1.5rem; }
233-
.demo-nav-item {
234-
display: flex; align-items: center; gap: 10px;
235-
color: #666; padding: 10px;
236-
border-radius: 6px; font-size: 0.9rem; font-weight: 500;
237-
margin-bottom: 4px; transition: all 0.2s;
238-
cursor: default;
239-
}
240-
.demo-nav-item.active { background: rgba(255,255,255,0.03); color: #fff; }
241-
242-
.demo-main {
243-
background: #0A0A0A;
244-
padding: 2rem;
245-
font-family: 'JetBrains Mono', monospace;
246-
position: relative;
247-
overflow: hidden;
248-
}
249-
250-
.run-btn {
251-
position: absolute; top: 1.5rem; right: 1.5rem;
252-
background: var(--color-primary); color: #000;
253-
border: none; padding: 8px 16px; border-radius: 6px;
254-
font-weight: 600; font-size: 0.85rem; cursor: pointer;
255-
display: flex; align-items: center; gap: 6px; z-index: 10;
256-
box-shadow: 0 0 15px rgba(62, 207, 142, 0.3);
257-
transition: box-shadow 0.2s;
258-
}
259-
.run-btn:hover { box-shadow: 0 0 25px rgba(62, 207, 142, 0.5); }
260-
261-
/* HOW IT WORKS */
262-
.step-card {
263-
display: flex;
264-
flex-direction: column;
265-
align-items: center;
266-
text-align: center;
267-
padding: 2rem;
268-
background: #0E0E0E;
269-
border: 1px solid #1F1F1F;
270-
border-radius: 16px;
271-
position: relative;
272-
}
273-
.step-number {
274-
width: 40px; height: 40px;
275-
background: #1a1a1a;
276-
border: 1px solid #333;
277-
border-radius: 50%;
278-
display: flex; align-items: center; justify-content: center;
279-
font-weight: 700;
280-
margin-bottom: 1.5rem;
281-
color: #fff;
282-
}
283-
284-
/* BENTO GRID */
285-
.bento-grid {
286-
display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem;
287-
max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
288-
}
289-
290-
.bento-item {
291-
background: #0E0E0E;
292-
border: 1px solid #1F1F1F;
293-
border-radius: 16px; padding: 2.5rem;
294-
display: flex; flex-direction: column; justify-content: space-between;
295-
transition: all 0.3s;
296-
}
297-
.bento-item:hover { transform: translateY(-4px); border-color: #333; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5); }
298-
299-
.bento-span-4 { grid-column: span 12; }
300-
.bento-span-6 { grid-column: span 12; }
301-
.bento-span-8 { grid-column: span 12; }
302-
303-
@media(min-width: 768px) {
304-
.bento-span-4 { grid-column: span 4; }
305-
.bento-span-6 { grid-column: span 6; }
306-
.bento-span-8 { grid-column: span 8; }
307-
}
308-
309-
.bento-icon {
310-
width: 56px; height: 56px;
311-
background: rgba(255,255,255,0.03);
312-
border-radius: 14px;
313-
display: flex; align-items: center; justify-content: center;
314-
margin-bottom: 1.5rem; color: #fff;
315-
border: 1px solid rgba(255,255,255,0.05);
316-
}
317-
.bento-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.8rem; letter-spacing: -0.01em; }
318-
.bento-desc { color: #999; font-size: 1rem; line-height: 1.6; }
319-
320-
/* USE CASES */
321-
.use-case-card {
322-
background: #0A0A0A; border: 1px solid #1F1F1F; padding: 2rem; border-radius: 12px;
323-
text-align: left; transition: all 0.2s;
324-
}
325-
.use-case-card:hover { border-color: #333; background: #0F0F0F; }
326-
327-
/* FAQ */
328-
.faq-item {
329-
border-bottom: 1px solid #222;
330-
margin-bottom: 1rem;
331-
}
332-
.faq-question {
333-
display: flex; justify-content: space-between; align-items: center;
334-
padding: 1.5rem 0; cursor: pointer;
335-
font-size: 1.1rem; font-weight: 500;
336-
}
337-
.faq-answer {
338-
padding-bottom: 1.5rem; color: #888; line-height: 1.6;
339-
}
340-
341-
/* ANIMATIONS */
342-
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
343-
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
344-
345-
/* MOBILE ADJUSTMENTS */
346-
@media(max-width: 768px) {
347-
.hero-heading { font-size: 2.8rem; }
348-
.nav-links { display: none; }
349-
.mobile-menu-btn { display: block; }
350-
.hero-section { padding-top: 5rem; }
351-
}
352-
`}</style>
87+
35388

35489
<div className="grid-bg"></div>
35590

91+
{/* --- MOBILE MENU OVERLAY --- */}
92+
<div className={`mobile-menu-overlay ${isMobileMenuOpen ? 'open' : ''}`}>
93+
<a href="#how-it-works" onClick={() => setIsMobileMenuOpen(false)} style={{ fontSize: '1.5rem', fontWeight: 700, color: '#fff', textDecoration: 'none' }}>How it Works</a>
94+
<a href="#features" onClick={() => setIsMobileMenuOpen(false)} style={{ fontSize: '1.5rem', fontWeight: 700, color: '#fff', textDecoration: 'none' }}>Features</a>
95+
<a href="#use-cases" onClick={() => setIsMobileMenuOpen(false)} style={{ fontSize: '1.5rem', fontWeight: 700, color: '#fff', textDecoration: 'none' }}>Use Cases</a>
96+
<a href="#faq" onClick={() => setIsMobileMenuOpen(false)} style={{ fontSize: '1.5rem', fontWeight: 700, color: '#fff', textDecoration: 'none' }}>FAQ</a>
97+
<div style={{ height: '1px', width: '60px', background: '#333', margin: '10px 0' }}></div>
98+
{isAuthenticated ? (
99+
<button onClick={() => navigate('/dashboard')} className="btn btn-primary" style={{ fontWeight: 600, width: '200px', padding: '12px' }}>
100+
Go to Console
101+
</button>
102+
) : (
103+
<>
104+
<Link to="/login" onClick={() => setIsMobileMenuOpen(false)} style={{ fontSize: '1.2rem', fontWeight: 500, color: '#aaa', textDecoration: 'none' }}>Log in</Link>
105+
<Link to="/signup" onClick={() => setIsMobileMenuOpen(false)} className="btn btn-primary" style={{ fontWeight: 600, padding: '12px 30px', width: '200px', textAlign: 'center' }}>Start for Free</Link>
106+
</>
107+
)}
108+
</div>
109+
356110
{/* --- NAVBAR --- */}
357-
<nav className="nav-glass">
111+
<nav className={`nav-glass ${!isNavVisible ? 'nav-hidden' : ''}`}>
358112
<div className="nav-container">
359113
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', fontWeight: 800, fontSize: '1.2rem' }}>
360114
<img src="/logo_u.png" alt="urBackend Logo" style={{ height: '32px', width: 'auto' }} />
@@ -389,7 +143,7 @@ function LandingPage() {
389143
{/* --- HERO SECTION --- */}
390144
<div className="hero-section">
391145
<div className="hero-pill">
392-
<Zap size={14} fill="currentColor" /> Public Beta v1.0 is Live
146+
<Zap size={14} fill="currentColor" /> Public Alpha v1.1 is Live
393147
</div>
394148

395149
<h1 className="hero-heading">

0 commit comments

Comments
 (0)