Skip to content

Commit f207e86

Browse files
TimothyHTanTimothyHTan
committed
Add GSAP and ShinyText component and redo some text
1 parent 103f414 commit f207e86

7 files changed

Lines changed: 227 additions & 82 deletions

File tree

‎app/community/page.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,7 @@ export default function CommunityPage() {
105105
animate={{ opacity: 1, y: 0 }}
106106
className="text-4xl md:text-6xl font-display font-bold mb-6"
107107
>
108-
You&apos;re Not Going Alone. <br/>
109-
<span className="text-gradient-warm">You&apos;re Joining a Family.</span>
108+
Join Our Family
110109
</motion.h1>
111110
<motion.p
112111
initial={{ opacity: 0, y: 20 }}

‎app/page.tsx‎

Lines changed: 81 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { BlurImage } from "@/components/ui/blur-image";
55
import { TrendingUp, Shield, Award, Zap } from "lucide-react";
66
import { GradientBlob } from "@/components/ui/GradientBlob";
77
import { PageSegue } from "@/components/ui/PageSegue";
8+
import ShinyText from "@/components/ui/ShinyText";
89
import { siteContent } from "@/lib/content";
910

1011
// Static Image Imports
@@ -37,23 +38,20 @@ export default function Home() {
3738
rankValue: "9",
3839
rankSuffix: "th",
3940
rankColor: "emerald",
40-
insightTitle: "The ROI Metric.",
4141
insightDescription: "BIT graduates are valued higher by employers than graduates from \"higher ranked\" but less practical universities."
4242
},
4343
{
4444
metric: "NTU Ranking (Engineering)",
4545
rankValue: "14",
4646
rankSuffix: "th",
4747
rankColor: "emerald",
48-
insightTitle: "The Truth.",
4948
insightDescription: "In pure engineering output, BIT is a global top-15 institution, outranking many Ivy League schools."
5049
},
5150
{
5251
metric: "ARWU (Shanghai Ranking) 2025",
5352
rankValue: "102",
5453
rankSuffix: "nd",
5554
rankColor: "default",
56-
insightTitle: "The Hard Science Metric.",
5755
insightDescription: "Being on the cusp of the Top 100 globally signals immense research productivity."
5856
}
5957
];
@@ -154,11 +152,89 @@ export default function Home() {
154152
</div>
155153
</section>
156154

157-
155+
158156

159157
<section className="py-12 px-6 relative">
160158
<div className="container mx-auto max-w-6xl">
159+
{/* Rankings Table */}
160+
<div className="mb-12">
161+
<div className="text-center mb-8">
162+
<h2 className="text-3xl font-display font-bold mb-4">Why BIT?</h2>
163+
<ShinyText
164+
text="More Reasons to Choose BIT"
165+
speed={2}
166+
delay={1}
167+
color="#1a1b1aff"
168+
shineColor="#cfd8ccff"
169+
spread={120}
170+
className="text-xs font-medium uppercase tracking-wider mb-4"
171+
/>
172+
</div>
161173

174+
{/* Mobile Card Layout */}
175+
<motion.div
176+
initial={{ opacity: 0, y: 20 }}
177+
whileInView={{ opacity: 1, y: 0 }}
178+
viewport={{ once: true, margin: "-100px" }}
179+
transition={{ duration: 0.5 }}
180+
className="block sm:hidden space-y-6"
181+
>
182+
{metricsData.map((metric, index) => (
183+
<div key={index} className="bg-white/60 backdrop-blur-md rounded-3xl p-8 border border-white/40 shadow-sm">
184+
<div className="flex items-baseline gap-1 mb-2">
185+
<span className="text-3xl md:text-4xl font-semibold font-display tabular-nums text-foreground">
186+
{metric.rankValue}
187+
</span>
188+
<span className={`text-sm font-medium ${metric.rankColor === 'emerald' ? 'text-emerald-600' : 'text-primary'}`}>
189+
{metric.rankSuffix}
190+
</span>
191+
</div>
192+
<p className="text-sm text-muted-foreground mb-4">
193+
{metric.metric}
194+
</p>
195+
<h3 className="font-bold text-foreground mb-2">
196+
{metric.insightTitle}
197+
</h3>
198+
<p className="text-muted-foreground">
199+
{metric.insightDescription}
200+
</p>
201+
</div>
202+
))}
203+
</motion.div>
204+
205+
{/* Desktop Table Layout */}
206+
<motion.div
207+
initial={{ opacity: 0, y: 20 }}
208+
whileInView={{ opacity: 1, y: 0 }}
209+
viewport={{ once: true, margin: "-100px" }}
210+
transition={{ duration: 0.5 }}
211+
className="hidden sm:block overflow-hidden rounded-3xl border border-border bg-white/40 backdrop-blur-sm shadow-xl"
212+
>
213+
<table className="w-full text-left border-collapse">
214+
<thead>
215+
<tr className="bg-white/50 border-b border-border/50">
216+
<th className="p-6 font-display font-bold text-foreground">Metric</th>
217+
<th className="p-6 font-display font-bold text-primary">Rank</th>
218+
<th className="p-6 font-display font-bold text-foreground">Elaboration</th>
219+
</tr>
220+
</thead>
221+
<tbody className="divide-y divide-border/50">
222+
{metricsData.map((metric, index) => (
223+
<tr key={index} className="hover:bg-white/40 transition-colors">
224+
<td className="p-6 font-medium">{metric.metric}</td>
225+
<td className={`p-6 font-bold text-xl ${metric.rankColor === 'emerald' ? 'text-emerald-600' : ''}`}>
226+
#{metric.rankValue}
227+
</td>
228+
<td className="p-6 text-muted-foreground text-sm leading-relaxed">
229+
<strong className="text-foreground block mb-1">{metric.insightTitle}</strong>
230+
{metric.insightDescription}
231+
</td>
232+
</tr>
233+
))}
234+
</tbody>
235+
</table>
236+
</motion.div>
237+
</div>
162238
{/* The Seven Sons Explanation */}
163239
<div className="grid md:grid-cols-2 gap-12 mb-24 items-center">
164240
<motion.div
@@ -174,7 +250,7 @@ export default function Home() {
174250
<Zap className="w-6 h-6" />
175251
</div>
176252
<div>
177-
<h3 className="text-xl font-bold font-display mb-2">The Funding Engine</h3>
253+
<h3 className="text-xl font-bold font-display mb-2">Funding Priority</h3>
178254
<p className="text-muted-foreground">
179255
While other universities struggle for grants, BIT&apos;s labs are capitalized by the state&apos;s most critical projects. This ensures priority in aerospace, high-end manufacturing, and national security research.
180256
</p>
@@ -260,80 +336,6 @@ export default function Home() {
260336
</ul>
261337
</div>
262338
</div>
263-
264-
{/* Rankings Table */}
265-
<div className="mb-12">
266-
<div className="text-center mb-8">
267-
<h2 className="text-3xl font-display font-bold mb-4">Other Metrics</h2>
268-
<p className="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-4">
269-
Global Recognition <span className="text-muted-foreground/50">(Multiple Rankings)</span>
270-
</p>
271-
</div>
272-
273-
{/* Mobile Card Layout */}
274-
<motion.div
275-
initial={{ opacity: 0, y: 20 }}
276-
whileInView={{ opacity: 1, y: 0 }}
277-
viewport={{ once: true, margin: "-100px" }}
278-
transition={{ duration: 0.5 }}
279-
className="block sm:hidden space-y-6"
280-
>
281-
{metricsData.map((metric, index) => (
282-
<div key={index} className="bg-white/60 backdrop-blur-md rounded-3xl p-8 border border-white/40 shadow-sm">
283-
<div className="flex items-baseline gap-1 mb-2">
284-
<span className="text-3xl md:text-4xl font-semibold font-display tabular-nums text-foreground">
285-
{metric.rankValue}
286-
</span>
287-
<span className={`text-sm font-medium ${metric.rankColor === 'emerald' ? 'text-emerald-600' : 'text-primary'}`}>
288-
{metric.rankSuffix}
289-
</span>
290-
</div>
291-
<p className="text-sm text-muted-foreground mb-4">
292-
{metric.metric}
293-
</p>
294-
<h3 className="font-bold text-foreground mb-2">
295-
{metric.insightTitle}
296-
</h3>
297-
<p className="text-muted-foreground">
298-
{metric.insightDescription}
299-
</p>
300-
</div>
301-
))}
302-
</motion.div>
303-
304-
{/* Desktop Table Layout */}
305-
<motion.div
306-
initial={{ opacity: 0, y: 20 }}
307-
whileInView={{ opacity: 1, y: 0 }}
308-
viewport={{ once: true, margin: "-100px" }}
309-
transition={{ duration: 0.5 }}
310-
className="hidden sm:block overflow-hidden rounded-3xl border border-border bg-white/40 backdrop-blur-sm shadow-xl"
311-
>
312-
<table className="w-full text-left border-collapse">
313-
<thead>
314-
<tr className="bg-white/50 border-b border-border/50">
315-
<th className="p-6 font-display font-bold text-foreground">Metric</th>
316-
<th className="p-6 font-display font-bold text-primary">Rank</th>
317-
<th className="p-6 font-display font-bold text-foreground">Strategic Insight</th>
318-
</tr>
319-
</thead>
320-
<tbody className="divide-y divide-border/50">
321-
{metricsData.map((metric, index) => (
322-
<tr key={index} className="hover:bg-white/40 transition-colors">
323-
<td className="p-6 font-medium">{metric.metric}</td>
324-
<td className={`p-6 font-bold text-xl ${metric.rankColor === 'emerald' ? 'text-emerald-600' : ''}`}>
325-
#{metric.rankValue}
326-
</td>
327-
<td className="p-6 text-muted-foreground text-sm leading-relaxed">
328-
<strong className="text-foreground block mb-1">{metric.insightTitle}</strong>
329-
{metric.insightDescription}
330-
</td>
331-
</tr>
332-
))}
333-
</tbody>
334-
</table>
335-
</motion.div>
336-
</div>
337339
</div>
338340
</section>
339341

‎bun.lock‎

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

‎components/layout/Navbar.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const navItems = [
1313
{ name: "Campus Life", href: "/campus-life" },
1414
{ name: "Community", href: "/community" },
1515
{ name: "FAQ", href: "/faq" },
16-
{ name: "Admissions", href: "/admissions" },
1716
];
1817

1918
export function Navbar() {

‎components/ui/ShinyText.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.shiny-text {
2+
display: inline-block;
3+
}

0 commit comments

Comments
 (0)