Skip to content

Commit aeb47ea

Browse files
haram082haram082
committed
scs page (lorem ipsum)
1 parent ae953a8 commit aeb47ea

File tree

2 files changed

+249
-0
lines changed

2 files changed

+249
-0
lines changed

‎frontend/src/app/pages/about/scsabout/page.tsx‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
import React from 'react';
2+
3+
export default function SCSAboutPage() {
4+
return (
5+
<main className="w-full bg-white font-sans text-slate-900 overflow-x-hidden">
6+
{/* 1. Hero Section */}
7+
<section className="relative w-full h-screen flex items-center bg-blue-900 overflow-hidden">
8+
<div className="absolute inset-0 z-0">
9+
<img
10+
src="https://picsum.photos/1920/1080?business"
11+
alt="SCS Internship Hero"
12+
className="w-full h-full object-cover opacity-60"
13+
/>
14+
<div className="absolute inset-0 bg-gradient-to-tr from-blue-950 via-blue-900/80 to-transparent" />
15+
</div>
16+
17+
<div className="relative z-10 container mx-auto px-6 lg:px-20">
18+
<div className="max-w-4xl">
19+
<div className="inline-block px-4 py-1.5 mb-6 text-sm font-semibold tracking-wider text-blue-400 uppercase bg-blue-400/10 border border-blue-400/20 rounded-full">
20+
ASPC Leadership Program
21+
</div>
22+
<h1 className="text-6xl md:text-9xl font-black text-white leading-[0.9] mb-8 tracking-tighter">
23+
SCS <br />
24+
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-300">
25+
Internship
26+
</span>
27+
</h1>
28+
<p className="text-xl md:text-2xl text-blue-50/80 font-light leading-relaxed max-w-2xl mb-10">
29+
Fostering professional growth and civic
30+
responsibility through dedicated student-led
31+
community service initiatives.
32+
</p>
33+
<div className="flex animate-bounce">
34+
<svg
35+
className="w-8 h-8 text-blue-400"
36+
fill="none"
37+
stroke="currentColor"
38+
viewBox="0 0 24 24"
39+
>
40+
<path
41+
strokeLinecap="round"
42+
strokeLinejoin="round"
43+
strokeWidth="2"
44+
d="M19 14l-7 7m0 0l-7-7m7 7V3"
45+
></path>
46+
</svg>
47+
</div>
48+
</div>
49+
</div>
50+
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-white to-transparent z-10" />
51+
</section>
52+
53+
{/* 2. Purpose Section */}
54+
<section className="py-24 md:py-32 bg-white">
55+
<div className="container mx-auto px-6 lg:px-20">
56+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
57+
<div className="space-y-8">
58+
<div className="space-y-4">
59+
<h2 className="text-blue-700 font-bold tracking-widest uppercase text-sm">
60+
Our Mission
61+
</h2>
62+
<h3 className="text-4xl md:text-5xl font-extrabold text-blue-900 tracking-tight leading-tight">
63+
Driving Change Through <br /> Student
64+
Leadership
65+
</h3>
66+
</div>
67+
<div className="space-y-6 text-lg text-slate-600 leading-relaxed font-light">
68+
<p>
69+
Lorem ipsum dolor sit amet, consectetur
70+
adipiscing elit. Sed do eiusmod tempor
71+
incididunt ut labore et dolore magna aliqua.
72+
Ut enim ad minim veniam, quis nostrud
73+
exercitation ullamco laboris nisi ut aliquip
74+
ex ea commodo consequat.
75+
</p>
76+
<p>
77+
Duis aute irure dolor in reprehenderit in
78+
voluptate velit esse cillum dolore eu fugiat
79+
nulla pariatur. Excepteur sint occaecat
80+
cupidatat non proident, sunt in culpa qui
81+
officia deserunt mollit anim id est laborum.
82+
</p>
83+
</div>
84+
</div>
85+
<div className="relative">
86+
<div className="absolute -inset-4 bg-blue-50 rounded-2xl -rotate-2 z-0" />
87+
<img
88+
src="https://picsum.photos/800/600?education"
89+
alt="Purpose"
90+
className="relative z-10 w-full h-auto rounded-xl shadow-2xl object-cover transform transition-transform hover:scale-[1.02] duration-500"
91+
/>
92+
</div>
93+
</div>
94+
</div>
95+
</section>
96+
97+
{/* 3. What You'll Do Section - DARK THEME */}
98+
<section className="py-32 md:py-48 bg-blue-900 text-white relative overflow-hidden">
99+
{/* Top Fade Effect */}
100+
<div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-white to-transparent z-10" />
101+
102+
{/* Subtle background glow */}
103+
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-[radial-gradient(circle_at_center,rgba(96,165,250,0.05)_0%,transparent_70%)] pointer-events-none"></div>
104+
105+
<div className="container mx-auto px-6 lg:px-20 text-center mb-20 relative z-10">
106+
<h2 className="text-3xl md:text-5xl font-black mb-6 tracking-tight">
107+
What You&apos;ll Do
108+
</h2>
109+
<div className="w-24 h-1.5 bg-blue-400 mx-auto rounded-full shadow-[0_0_15px_rgba(96,165,250,0.5)]"></div>
110+
</div>
111+
112+
<div className="container mx-auto px-6 lg:px-20 relative z-10">
113+
<div className="grid grid-cols-1 md:grid-cols-3 gap-10">
114+
{[1, 2, 3].map((item) => (
115+
<div
116+
key={item}
117+
className="group bg-white/5 backdrop-blur-sm p-10 rounded-3xl border border-white/10 transition-all hover:bg-white/10 hover:-translate-y-2"
118+
>
119+
<div className="w-16 h-16 bg-blue-400 text-blue-900 flex items-center justify-center rounded-2xl mb-8 mx-auto shadow-lg group-hover:scale-110 transition-transform">
120+
<svg
121+
className="w-8 h-8"
122+
fill="none"
123+
stroke="currentColor"
124+
viewBox="0 0 24 24"
125+
>
126+
<path
127+
strokeLinecap="round"
128+
strokeLinejoin="round"
129+
strokeWidth="2"
130+
d="M13 10V3L4 14h7v7l9-11h-7z"
131+
/>
132+
</svg>
133+
</div>
134+
<h3 className="text-2xl font-bold mb-4 text-center">
135+
Impact Area {item}
136+
</h3>
137+
<p className="text-blue-100/70 font-light leading-relaxed text-center text-lg">
138+
Lorem ipsum dolor sit amet, consectetur
139+
adipiscing elit. Phasellus imperdiet, nulla
140+
et dictum interdum, nisi lorem egestas vitae
141+
scelerisque.
142+
</p>
143+
</div>
144+
))}
145+
</div>
146+
</div>
147+
148+
{/* Bottom Fade Effect */}
149+
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-white to-transparent z-10" />
150+
</section>
151+
152+
{/* 4. Who Should Apply Section - SIMPLIFIED */}
153+
<section className="py-24 md:py-32 bg-white">
154+
<div className="container mx-auto px-6 lg:px-20">
155+
<div className="max-w-4xl mx-auto text-center space-y-16">
156+
<div className="space-y-6">
157+
<h2 className="text-4xl md:text-5xl font-black tracking-tight text-blue-900">
158+
Who Should Apply
159+
</h2>
160+
<p className="text-xl text-slate-600 font-light leading-relaxed max-w-2xl mx-auto">
161+
We are looking for passionate, driven students
162+
who want to make a tangible difference in the
163+
Pomona community while developing professional
164+
leadership skills.
165+
</p>
166+
</div>
167+
168+
{/* Simple Horizontal Stats - No Boxes */}
169+
<div className="grid grid-cols-1 sm:grid-cols-3 gap-12 py-12 border-y border-blue-50">
170+
{[
171+
{
172+
label: 'Class Year',
173+
value: 'Sophomores & Juniors',
174+
},
175+
{ label: 'Major', value: 'All Disciplines' },
176+
{
177+
label: 'Commitment',
178+
value: '5-8 hrs / week',
179+
},
180+
].map((stat, idx) => (
181+
<div key={idx} className="space-y-2">
182+
<div className="text-sm font-bold text-blue-500 uppercase tracking-widest">
183+
{stat.label}
184+
</div>
185+
<div className="text-2xl font-black text-blue-900">
186+
{stat.value}
187+
</div>
188+
</div>
189+
))}
190+
</div>
191+
192+
<div className="pt-8">
193+
<p className="text-slate-500 italic font-light">
194+
* No prior community service experience is
195+
required — passion and empathy are our primary
196+
criteria.
197+
</p>
198+
</div>
199+
</div>
200+
</div>
201+
</section>
202+
203+
{/* 5. CTA Strip */}
204+
<section className="py-24 bg-blue-900 relative overflow-hidden border-t border-white/5">
205+
<div className="absolute inset-0 bg-gradient-to-r from-blue-950/50 to-transparent"></div>
206+
<div className="container mx-auto px-6 lg:px-20 relative z-10">
207+
<div className="flex flex-col md:flex-row items-center justify-between gap-10">
208+
<div className="text-white text-center md:text-left">
209+
<h2 className="text-4xl md:text-5xl font-black mb-4 tracking-tight">
210+
Interested in{' '}
211+
<span className="text-blue-400">applying?</span>
212+
</h2>
213+
<p className="text-blue-100 text-xl font-light">
214+
Contact the ASPC Community Liaison for more
215+
information.
216+
</p>
217+
</div>
218+
<a
219+
href="mailto:liaison@aspc.pomona.edu"
220+
className="bg-blue-400 text-blue-900 px-12 py-5 rounded-full font-black text-xl shadow-[0_0_30px_rgba(96,165,250,0.3)] hover:bg-blue-300 hover:scale-105 transition-all"
221+
>
222+
Email Liaison
223+
</a>
224+
</div>
225+
</div>
226+
</section>
227+
</main>
228+
);
229+
}

‎frontend/src/components/ui/Header.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,16 @@ const Header = () => {
235235
<div className="absolute top-full mt-2 w-44 bg-white rounded-md shadow-lg py-1 z-50">
236236
{renderSectionLinks('about')}
237237

238+
<Link
239+
href="/pages/about/scsabout"
240+
className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-700 border-b border-gray-100"
241+
onClick={() =>
242+
setOpenDropdown(null)
243+
}
244+
>
245+
SCS Internship
246+
</Link>
247+
238248
{/* Officers Submenu Item */}
239249
<div
240250
className="relative"
@@ -519,6 +529,16 @@ const Header = () => {
519529
<div className="ml-2 mt-2">
520530
{renderSectionLinks('about', true)}
521531

532+
<Link
533+
href="/pages/about/scsabout"
534+
className="block px-4 py-2 hover:text-yellow-400"
535+
onClick={() =>
536+
setIsMobileMenuOpen(false)
537+
}
538+
>
539+
SCS Internship
540+
</Link>
541+
522542
{/* Officers Submenu Item */}
523543
<div className="relative">
524544
<button

0 commit comments

Comments
 (0)