Skip to content

Commit c59ab73

Browse files
reckless-sherixxreckless-sherixx
authored
Merge pull request #23 from lazyaashish/resolve-app-tsx-conflict
Added navbar,Improve landing page UI, animations, and routing
2 parents defee90 + 4a96e38 commit c59ab73

14 files changed

Lines changed: 691 additions & 285 deletions

File tree

‎frontend/package-lock.json‎

Lines changed: 73 additions & 27 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/public/WhyKfolio2.svg‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎frontend/public/WhyKfolio3.jpg‎

6.67 KB
Loading

‎frontend/public/WhyKfolio4.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎frontend/public/WhyKfolio5.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎frontend/public/WhyKfolio6.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎frontend/public/WhyKfolio7.jpg‎

68.8 KB
Loading

‎frontend/public/hero-video.mp4‎

870 KB
Binary file not shown.

‎frontend/src/App.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
1-
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
1+
import { BrowserRouter, Routes, Route } from "react-router-dom";
22
import LandingPage from "./pages/Landing/LandingPage";
3-
import "./App.css";
43
import SignIn from "./components/SignIn";
54
import SignUpcard from "./components/Signup_card";
5+
import "./App.css";
66

77
function App() {
88
return (
99
<BrowserRouter>
10-
<nav style={{ padding: 12 }}>
11-
<Link to="/" style={{ marginRight: 12 }}>
12-
Home
13-
</Link>
14-
<Link to="/signin">Sign In</Link>
15-
<Link to="/signup">Sign Up</Link>
16-
</nav>
17-
1810
<Routes>
11+
{/* Landing Page */}
1912
<Route path="/" element={<LandingPage />} />
13+
14+
{/* Authentication */}
2015
<Route path="/signin" element={<SignIn />} />
2116
<Route path="/signup" element={<SignUpcard />} />
2217
</Routes>

‎frontend/src/components/Landing Page/Hero.tsx‎

Lines changed: 205 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,218 @@
11
export default function Hero() {
2-
// Hero
3-
// Top-most landing section. Contains headline and short description. Exposes
4-
// `data-section="hero"` for page visibility tracking so background/theme can
5-
// react to user scroll position.
6-
{
7-
/* Animation definition (must exist once) */
8-
}
9-
<style>
10-
{`
11-
@keyframes spin {
12-
to {
13-
transform: rotate(360deg);
14-
}
15-
}
16-
`}
17-
</style>;
182
return (
19-
<section
20-
style={{
21-
position: "relative",
22-
minHeight: "80vh",
23-
padding: "30px 50px",
24-
display: "grid",
25-
gridTemplateColumns: "1.1fr 1fr",
26-
alignItems: "center",
27-
overflow: "hidden",
28-
color: "white",
29-
}}
30-
>
31-
{/* Left content */}
32-
<div
3+
<>
4+
<style>
5+
{`
6+
:root {
7+
--hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
8+
}
9+
10+
/* =====================
11+
BASE FADE + LIFE
12+
===================== */
13+
.hero-animate {
14+
opacity: 0;
15+
transform: translateY(14px);
16+
animation:
17+
heroFadeUp 0.9s var(--hero-ease) forwards,
18+
heroFloat 6s ease-in-out infinite;
19+
}
20+
21+
.hero-line-1 { animation-delay: 0.12s; }
22+
.hero-line-2 { animation-delay: 0.24s; }
23+
.hero-glow { animation-delay: 0.36s; }
24+
25+
.hero-paragraph { animation-delay: 0.5s; }
26+
.hero-cta { animation-delay: 0.65s; }
27+
28+
@keyframes heroFadeUp {
29+
to {
30+
opacity: 1;
31+
transform: translateY(0);
32+
}
33+
}
34+
35+
/* Gentle breathing motion */
36+
@keyframes heroFloat {
37+
0%,100% { transform: translateY(0); }
38+
50% { transform: translateY(-3px); }
39+
}
40+
41+
/* =====================
42+
SHIMMER TEXT (LIVELY)
43+
===================== */
44+
.hero-shimmer {
45+
background: linear-gradient(
46+
90deg,
47+
#3f56c8,
48+
#6b82ff,
49+
#3f56c8
50+
);
51+
background-size: 200% 100%;
52+
-webkit-background-clip: text;
53+
background-clip: text;
54+
color: transparent;
55+
56+
animation:
57+
heroFadeUp 0.9s var(--hero-ease) forwards,
58+
shimmerMove 5.5s ease-in-out infinite,
59+
glowPulse 4s ease-in-out infinite;
60+
}
61+
62+
@keyframes shimmerMove {
63+
0% { background-position: 0% 50%; }
64+
50% { background-position: 100% 50%; }
65+
100% { background-position: 0% 50%; }
66+
}
67+
68+
@keyframes glowPulse {
69+
0%,100% {
70+
text-shadow:
71+
0 0 6px rgba(63,86,200,0.35),
72+
0 0 14px rgba(63,86,200,0.2);
73+
}
74+
50% {
75+
text-shadow:
76+
0 0 14px rgba(63,86,200,0.55),
77+
0 0 32px rgba(63,86,200,0.35);
78+
}
79+
}
80+
81+
/* =====================
82+
BUTTON
83+
===================== */
84+
@keyframes spin {
85+
to { transform: rotate(360deg); }
86+
}
87+
88+
.hero-button-inner {
89+
transition: transform 0.3s ease, box-shadow 0.3s ease;
90+
}
91+
92+
.hero-cta:hover .hero-button-inner {
93+
transform: translateY(-2px);
94+
box-shadow: 0 10px 40px rgba(99,102,241,0.45);
95+
}
96+
97+
/* =====================
98+
VIDEO
99+
===================== */
100+
.hero-video-wrapper {
101+
width: 600px;
102+
height: 350px;
103+
display: flex;
104+
align-items: center;
105+
justify-content: center;
106+
107+
animation: videoFloat 8s ease-in-out infinite;
108+
}
109+
110+
@keyframes videoFloat {
111+
0%,100% {
112+
transform: translateY(0) scale(1);
113+
}
114+
50% {
115+
transform: translateY(-6px) scale(1.015);
116+
}
117+
}
118+
119+
.hero-video {
120+
width: 100%;
121+
height: 100%;
122+
object-fit: contain;
123+
124+
mask-image: radial-gradient(
125+
ellipse at center,
126+
black 55%,
127+
transparent 75%
128+
);
129+
-webkit-mask-image: radial-gradient(
130+
ellipse at center,
131+
black 55%,
132+
transparent 75%
133+
);
134+
135+
filter: drop-shadow(0 20px 60px rgba(59,130,246,0.25));
136+
}
137+
`}
138+
</style>
139+
140+
<section
141+
data-section="hero"
33142
style={{
34-
position: "relative",
35-
zIndex: 1,
36-
maxWidth: "520px",
143+
minHeight: "80vh",
144+
padding: "30px 50px",
145+
display: "grid",
146+
gridTemplateColumns: "1.1fr 1fr",
147+
alignItems: "center",
148+
color: "white",
37149
}}
38150
>
39-
<h1
40-
style={{
41-
fontSize: "50px",
42-
fontWeight: 600,
43-
lineHeight: 1.15,
44-
marginBottom: "24px",
45-
}}
46-
>
47-
See what’s happening <br />
48-
on campus–from <br />
49-
people who live it.
50-
</h1>
51-
52-
<p
53-
style={{
54-
fontSize: "20px",
55-
opacity: 0.75,
56-
marginBottom: "36px",
57-
maxWidth: "420px",
58-
}}
59-
>
60-
A social platform for students to share their experiences, stories,
61-
and moments from campus life.
62-
</p>
63-
64-
<button
65-
style={{
66-
position: "relative",
67-
display: "inline-flex",
68-
height: "48px",
69-
padding: "1px",
70-
borderRadius: "999px",
71-
overflow: "hidden",
72-
background: "transparent",
73-
border: "none",
74-
cursor: "pointer",
75-
}}
76-
>
77-
{/* Animated gradient border */}
78-
<span
79-
style={{
80-
position: "absolute",
81-
inset: "-1000%",
82-
background:
83-
"conic-gradient(from 90deg at 50% 50%, #E2CBFF 0%, #393BB2 50%, #E2CBFF 100%)",
84-
animation: "spin 2s linear infinite",
85-
}}
86-
/>
151+
{/* LEFT */}
152+
<div style={{ maxWidth: "520px" }}>
153+
<h1 style={{ fontSize: "50px", fontWeight: 600, lineHeight: 1.15 }}>
154+
<span className="hero-animate hero-line-1">
155+
See what’s happening
156+
</span>
157+
<br />
158+
<span className="hero-animate hero-line-2">
159+
on campus–from
160+
</span>
161+
<br />
162+
<span className="hero-animate hero-glow hero-shimmer">
163+
people who live it.
164+
</span>
165+
</h1>
87166

88-
{/* Inner button */}
89-
<span
167+
<p
168+
className="hero-animate hero-paragraph"
90169
style={{
91-
position: "relative",
92-
zIndex: 1,
93-
display: "inline-flex",
94-
alignItems: "center",
95-
justifyContent: "center",
96-
gap: "10px",
97-
height: "100%",
98-
padding: "0 22px",
99-
borderRadius: "999px",
100-
background: "#030b2dff", // slate-950
101-
color: "white",
102-
fontSize: "14px",
103-
fontWeight: 500,
104-
backdropFilter: "blur(24px)",
170+
fontSize: "20px",
171+
color: "rgba(255,255,255,0.75)",
172+
marginBottom: "36px",
105173
}}
106174
>
107-
GET STARTED
108-
<span style={{ fontSize: "16px", transform: "translateY(1px)" }}>
109-
→
175+
A social platform for students to share their experiences,
176+
stories, and moments from campus life.
177+
</p>
178+
179+
<button className="hero-animate hero-cta" style={{ position: "relative", padding: "1px", borderRadius: "999px", border: "none", background: "transparent", overflow: "hidden" }}>
180+
<span
181+
style={{
182+
position: "absolute",
183+
inset: "-1000%",
184+
background: "conic-gradient(from 90deg, #E2CBFF, #393BB2, #E2CBFF)",
185+
animation: "spin 2s linear infinite",
186+
}}
187+
/>
188+
<span
189+
className="hero-button-inner"
190+
style={{
191+
position: "relative",
192+
zIndex: 1,
193+
padding: "0 22px",
194+
height: "48px",
195+
display: "inline-flex",
196+
alignItems: "center",
197+
gap: "10px",
198+
borderRadius: "999px",
199+
background: "#030b2d",
200+
color: "white",
201+
backdropFilter: "blur(24px)",
202+
}}
203+
>
204+
GET STARTED →
110205
</span>
111-
</span>
112-
</button>
113-
</div>
206+
</button>
207+
</div>
114208

115-
{/* Right illustration placeholder */}
116-
<div
117-
style={{
118-
position: "relative",
119-
zIndex: 1,
120-
display: "flex",
121-
justifyContent: "center",
122-
alignItems: "center",
123-
}}
124-
>
125-
<img
126-
src="/HeroSection.svg"
127-
alt="Illustration"
128-
style={{ width: "600px", height: "350px" }}
129-
/>
130-
</div>
131-
</section>
209+
{/* RIGHT */}
210+
<div className="hero-video-wrapper">
211+
<video autoPlay loop muted playsInline className="hero-video">
212+
<source src="/hero-video.mp4" type="video/mp4" />
213+
</video>
214+
</div>
215+
</section>
216+
</>
132217
);
133218
}

0 commit comments

Comments
 (0)