Skip to content

feat: Improve spacing, add time icons to Dev Weekends Method, fix alternati… #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
junaiddshaukat merged 1 commit into from
Nov 27, 2025
Merged

feat: Improve spacing, add time icons to Dev Weekends Method, fix alternati… #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function AboutPage() {
return (
<div className="min-h-screen">
{/* Hero Section */}
<section className="py-20 md:py-28 px-6 lg:px-12 relative overflow-hidden">
<section className="py-12 md:py-16 px-6 lg:px-12 relative overflow-hidden">
<div className="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.03)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:60px_60px]"></div>
<div className="max-w-[1100px] mx-auto relative">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
Expand Down Expand Up @@ -97,7 +97,7 @@ export default function AboutPage() {
</section>

{/* Mission Section */}
<section className="py-20 md:py-28 px-6 lg:px-12 bg-muted/20">
<section className="py-12 md:py-16 px-6 lg:px-12 bg-muted/20">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-14">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-muted-foreground mb-4">
Expand All @@ -113,11 +113,11 @@ export default function AboutPage() {
<p className="text-lg leading-relaxed text-muted-foreground mb-6">
We started Dev Weekends because we saw brilliant minds falling through the cracks.
Students with incredible potential but no roadmap. Engineers who could build anything
but didn''t know where to start. A generation of talent lost to a broken system.
but didn&apos;t know where to start. A generation of talent lost to a broken system.
</p>
<p className="text-lg leading-relaxed text-muted-foreground">
So we built something different. A community where engineers at top companies mentor
the next generation. Where practice isn''t optionalit''s daily. Where success is measured
the next generation. Where practice isn&apos;t optional—it&apos;s daily. Where success is measured
not by what you know, but by how many lives you change after your own transformation.
</p>
</div>
Expand All @@ -143,7 +143,7 @@ export default function AboutPage() {
</section>

{/* The Circles Ecosystem */}
<section className="py-20 md:py-28 px-6 lg:px-12">
<section className="py-12 md:py-16 px-6 lg:px-12 bg-muted/20">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-14">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-muted-foreground mb-4">
Expand Down Expand Up @@ -184,7 +184,7 @@ export default function AboutPage() {
</section>

{/* The Internal Engine */}
<section className="py-20 md:py-28 px-6 lg:px-12 bg-muted/20">
<section className="py-12 md:py-16 px-6 lg:px-12 bg-muted/20">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-14">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-muted-foreground mb-4">
Expand Down Expand Up @@ -253,7 +253,7 @@ export default function AboutPage() {
</section>

{/* Team Section */}
<section className="py-20 md:py-28 px-6 lg:px-12 bg-foreground text-background">
<section className="py-12 md:py-16 px-6 lg:px-12 bg-foreground text-background">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-14">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-background/40 mb-4">
Expand Down Expand Up @@ -300,14 +300,14 @@ export default function AboutPage() {
</section>

{/* CTA Section */}
<section className="py-20 md:py-28 px-6 lg:px-12 text-center">
<section className="py-12 md:py-16 px-6 lg:px-12 text-center bg-muted/20">
<div className="max-w-[600px] mx-auto">
<h2 className="text-[clamp(28px,4vw,42px)] font-bold tracking-tight mb-4">
Ready to Transform?
</h2>
<p className="text-muted-foreground mb-8 leading-relaxed">
Join 20,000+ engineers who chose to stop waiting and start building.
Your transformation starts with one decision. It''s free, forever.
Your transformation starts with one decision. It&apos;s free, forever.
</p>
<div className="flex flex-wrap justify-center gap-3">
<a
Expand All @@ -331,3 +331,5 @@ export default function AboutPage() {
</div>
)
}


62 changes: 35 additions & 27 deletions app/our-story/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { useState, useEffect, useRef } from "react"
import Link from "next/link"
import Image from "next/image"
import { ArrowRight, ExternalLink, X, Mail, Linkedin } from "lucide-react"
import { ArrowRight, ExternalLink, X, Mail, Linkedin, Sun, Sunset, Moon } from "lucide-react"

export default function OurStoryPage() {
const [showMentorModal, setShowMentorModal] = useState(false)
Expand Down Expand Up @@ -102,7 +102,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 1: HERO - THE EMOTIONAL HOOK
============================================ */}
<section className="relative min-h-[90vh] flex items-center py-20 md:py-28 px-6 lg:px-12 overflow-hidden">
<section className="relative min-h-[90vh] flex items-center py-12 md:py-16 px-6 lg:px-12 overflow-hidden">
{/* Grid Background Pattern */}
<div className="absolute inset-0">
<div className="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.03)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:80px_80px]"></div>
Expand Down Expand Up @@ -191,7 +191,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 2: OUR FOCUS AREAS
============================================ */}
<section id="focus" className="py-20 md:py-28 px-6 lg:px-12 bg-muted/20">
<section id="focus" className="py-12 md:py-16 px-6 lg:px-12 bg-muted/20">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-16 reveal">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-muted-foreground mb-4">
Expand Down Expand Up @@ -247,7 +247,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 3: THE PROBLEM WE SOLVE
============================================ */}
<section className="py-20 md:py-28 px-6 lg:px-12">
<section className="py-12 md:py-16 px-6 lg:px-12">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-16 reveal">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-muted-foreground mb-4">
Expand Down Expand Up @@ -283,7 +283,7 @@ export default function OurStoryPage() {
key={i}
className="bg-background p-8 relative"
>
<span className="text-[72px] font-bold text-muted-foreground/10 leading-none block mb-4">
<span className="text-[72px] font-bold text-muted-foreground/30 leading-none block mb-4">
{problem.num}
</span>
<h3 className="text-base font-bold mb-3 tracking-tight">{problem.title}</h3>
Expand All @@ -301,7 +301,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 4: THE THREE PILLARS PHILOSOPHY
============================================ */}
<section id="philosophy" className="py-20 md:py-28 px-6 lg:px-12 bg-foreground text-background">
<section id="philosophy" className="py-12 md:py-16 px-6 lg:px-12 bg-foreground text-background">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-16 reveal">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-background/40 mb-4">
Expand Down Expand Up @@ -388,9 +388,9 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 5: THE DEV WEEKENDS METHOD
============================================ */}
<section className="py-20 md:py-28 px-6 lg:px-12 bg-muted/20">
<section className="py-12 md:py-16 px-6 lg:px-12 bg-muted/20">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-16 reveal">
<div className="text-center mb-10 reveal">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-muted-foreground mb-4">
The Dev Weekends Method
</p>
Expand All @@ -408,28 +408,34 @@ export default function OurStoryPage() {
time: "Morning",
title: "Mindset Talks",
desc: "Productivity hacks, discipline frameworks, and the psychology of high performers.",
tags: ["Productivity", "Discipline", "Mindset"]
tags: ["Productivity", "Discipline", "Mindset"],
icon: Sun
},
{
time: "Afternoon",
title: "Tech Talks",
desc: "Deep dives into system design, industry best practices, and technical skills.",
tags: ["System Design", "DSA", "Industry Skills"]
tags: ["System Design", "DSA", "Industry Skills"],
icon: Sunset
},
{
time: "Evening",
title: "Spiritual Talks",
desc: "Purpose, resilience, giving back, and building a life beyond code.",
tags: ["Purpose", "Resilience", "Community"]
tags: ["Purpose", "Resilience", "Community"],
icon: Moon
},
].map((talk, i) => (
<div
key={i}
className="p-8 bg-background"
>
<span className="text-[10px] font-semibold tracking-[2px] uppercase text-muted-foreground mb-4 block">
{talk.time}
</span>
<div className="flex items-center gap-2 mb-4">
<talk.icon className="w-4 h-4 text-muted-foreground" />
<span className="text-[10px] font-semibold tracking-[2px] uppercase text-muted-foreground">
{talk.time}
</span>
</div>
<h3 className="text-lg font-bold tracking-tight mb-3">{talk.title}</h3>
<p className="text-sm text-muted-foreground leading-relaxed mb-5">{talk.desc}</p>
<div className="flex flex-wrap gap-2">
Expand All @@ -451,7 +457,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 6: THE 3-TRACK SYSTEM
============================================ */}
<section id="tracks" className="py-20 md:py-28 px-6 lg:px-12 bg-foreground text-background">
<section id="tracks" className="py-12 md:py-16 px-6 lg:px-12 bg-foreground text-background">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-14 reveal">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-background/40 mb-4">
Expand Down Expand Up @@ -518,7 +524,7 @@ export default function OurStoryPage() {
Path {track.num}
</span>
<h3 className="text-lg font-bold tracking-tight mb-1">{track.title}</h3>
<p className="text-xs text-yellow-300 font-medium mb-4">{track.tagline}</p>
<p className="text-xs text-background/50 font-medium mb-4">{track.tagline}</p>
<p className="text-sm text-background/60 leading-relaxed mb-5">{track.desc}</p>

<ul className="space-y-2 mb-6">
Expand Down Expand Up @@ -546,7 +552,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 7: THE FELLOWSHIP EXPERIENCE
============================================ */}
<section id="fellowship" className="py-20 md:py-28 px-6 lg:px-12 bg-muted/20">
<section id="fellowship" className="py-12 md:py-16 px-6 lg:px-12 bg-muted/20">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-16 reveal">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-muted-foreground mb-4">
Expand All @@ -572,7 +578,7 @@ export default function OurStoryPage() {
key={i}
className="bg-background p-6 text-center"
>
<div className="text-4xl font-bold text-muted-foreground/15 mb-2">{step.num}</div>
<div className="text-4xl font-bold text-muted-foreground/30 mb-2">{step.num}</div>
<h4 className="text-sm font-bold mb-1.5">{step.title}</h4>
<p className="text-xs text-muted-foreground leading-relaxed">{step.text}</p>
</div>
Expand Down Expand Up @@ -625,7 +631,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 7.25: THE CIRCLES ECOSYSTEM
============================================ */}
<section className="py-20 md:py-28 px-6 lg:px-12">
<section className="py-12 md:py-16 px-6 lg:px-12 bg-muted/20">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-14 reveal">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-muted-foreground mb-4">
Expand Down Expand Up @@ -668,7 +674,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 7.5: EVENTS CALENDAR
============================================ */}
<section className="py-20 md:py-28 px-6 lg:px-12 bg-foreground text-background">
<section className="py-12 md:py-16 px-6 lg:px-12 bg-foreground text-background">
<div className="max-w-[1100px] mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-10 items-start">
{/* Left: Info */}
Expand Down Expand Up @@ -733,7 +739,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 10: RESOURCES & TOOLS
============================================ */}
<section className="py-20 md:py-28 px-6 lg:px-12">
<section className="py-12 md:py-16 px-6 lg:px-12 bg-muted/20">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-16 reveal">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-muted-foreground mb-4">
Expand Down Expand Up @@ -801,7 +807,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 11: IMPACT DASHBOARD
============================================ */}
<section id="impact" ref={statsRef} className="py-20 md:py-28 px-6 lg:px-12 bg-foreground text-background">
<section id="impact" ref={statsRef} className="py-12 md:py-16 px-6 lg:px-12 bg-foreground text-background">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-16 reveal">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-background/40 mb-4">
Expand Down Expand Up @@ -874,7 +880,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 12: THE GIVING BACK MODEL
============================================ */}
<section className="py-20 md:py-28 px-6 lg:px-12 bg-muted/20">
<section className="py-12 md:py-16 px-6 lg:px-12 bg-muted/20">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-16 reveal">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-muted-foreground mb-4">
Expand Down Expand Up @@ -916,7 +922,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 12.5: LEARN FROM INDUSTRY LEADERS
============================================ */}
<section className="py-20 md:py-28 px-6 lg:px-12">
<section className="py-12 md:py-16 px-6 lg:px-12 bg-muted/20">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-14 reveal">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-muted-foreground mb-4">
Expand Down Expand Up @@ -1020,7 +1026,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 13: TESTIMONIALS / FELLOW VOICES
============================================ */}
<section id="community" className="py-20 md:py-28 px-6 lg:px-12 bg-foreground text-background">
<section id="community" className="py-12 md:py-16 px-6 lg:px-12 bg-foreground text-background">
<div className="max-w-[1100px] mx-auto">
<div className="text-center mb-16 reveal">
<p className="text-[11px] font-semibold tracking-[3px] uppercase text-background/40 mb-4">
Expand Down Expand Up @@ -1060,7 +1066,7 @@ export default function OurStoryPage() {
{/* ============================================
SECTION 14: JOIN THE MOVEMENT (CTA)
============================================ */}
<section id="apply" className="py-20 md:py-28 px-6 lg:px-12 text-center">
<section id="apply" className="py-12 md:py-16 px-6 lg:px-12 text-center">
<div className="max-w-[700px] mx-auto reveal">
<h2 className="text-[clamp(28px,5vw,48px)] font-bold tracking-tight mb-5">
Ready to Transform Your Career?
Expand Down Expand Up @@ -1095,7 +1101,7 @@ export default function OurStoryPage() {
{ num: "4", text: "Begin Journey" },
].map((step, i) => (
<div key={i} className="p-5 bg-background">
<div className="text-2xl font-bold text-muted-foreground/20 mb-1">{step.num}</div>
<div className="text-2xl font-bold text-muted-foreground/30 mb-1">{step.num}</div>
<div className="text-xs font-medium text-muted-foreground">{step.text}</div>
</div>
))}
Expand Down Expand Up @@ -1254,3 +1260,5 @@ export default function OurStoryPage() {
</div>
)
}