Skip to content

Landing page redesign #108

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

Closed
AshishDev-16 wants to merge 2 commits into from
Closed

Landing page redesign #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d1a2d0
feat(landing): redesign homepage with Emergent SaaS design system
AshishDev-16 Mar 31, 2026
e0eeda7
chore(hero): remove unused imports flagged by ESLint
AshishDev-16 Mar 31, 2026
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
12 changes: 2 additions & 10 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
import { Header } from "@/components/header";
import { HeroComponent } from "@/components/hero-component";
import { BrandsGrid } from "@/components/ui";
import {
OrganizationsBlock,
PreviousEditionsBlock,
TechStackBlock,
AnalyticsBlock,
} from "@/components/value-blocks";
import { ValueBlocks } from "@/components/value-blocks";
import { TrendingOrgs } from "@/components/trending-orgs";
import { Testimonials } from "@/components/testimonials";
import { WaitlistCTA } from "@/components/waitlist-cta";
Expand Down Expand Up @@ -103,10 +98,7 @@ export default function Home() {
]}
/>
{/* Primary Value Blocks */}
<OrganizationsBlock />
<PreviousEditionsBlock />
<TechStackBlock />
<AnalyticsBlock />
<ValueBlocks />
{/* Social Proof & Discovery */}
<TrendingOrgs />
<Testimonials />
Expand Down
106 changes: 60 additions & 46 deletions components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,72 @@
import Link from "next/link";
import { Section, Heading, Text } from "@/components/ui";
import { SocialLinks } from "@/components/social-links";
import { FOOTER_NAVIGATION_ITEMS, FOOTER_COPYRIGHT } from "@/components/footer-common";
import { Heading, Text } from "@/components/ui";

export const Footer = () => {

return (
<Section className="bg-foreground text-background dark:bg-card dark:text-white">
<div className="grid lg:grid-cols-2 gap-18 items-center">
<div className="flex gap-8 flex-col items-start">
<div className="flex gap-2 flex-col">
<Heading>GSoC Organizations Guide</Heading>
<Text className="max-w-lg text-background/75 dark:text-white">
Your comprehensive platform to discover, explore, and prepare for Google Summer of Code opportunities.
</Text>
</div>
<div className="flex gap-20 flex-row ">
<div className="flex flex-col text-sm max-w-lg leading-relaxed tracking-tight text-background/75 text-left dark:text-white">
<p>{FOOTER_COPYRIGHT.text}.</p>
<p className="mt-1">© {FOOTER_COPYRIGHT.year} <Link href={FOOTER_COPYRIGHT.organizationUrl} className="hover:underline">{FOOTER_COPYRIGHT.organization}</Link></p>
return (
<footer className="w-full bg-white dark:bg-zinc-950 border-t border-zinc-200 dark:border-zinc-800 pt-16 pb-8">
<div className="container mx-auto px-4 md:px-6 max-w-7xl">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 mb-16">

{/* Brand & Mission Section */}
<div className="flex flex-col items-start gap-6 lg:col-span-4">
<div className="space-y-4">
<Heading as="h3" className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
GSoC Organizations Guide
</Heading>
<Text className="text-zinc-600 dark:text-zinc-400 max-w-sm leading-relaxed">
Your comprehensive platform to discover, explore, and prepare for Google Summer of Code opportunities. Maximize your selection chances with data-driven insights.
</Text>
</div>

<SocialLinks
showLabels={false}
className="flex items-center gap-4 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50"
/>
</div>
{/* Social Links */}
<SocialLinks
showLabels={false}
className="flex items-center gap-4 text-black"
textColor="white"
/>
</div>
<div className="grid lg:grid-cols-3 gap-10 items-start">
{FOOTER_NAVIGATION_ITEMS.map((item) => (
<div
key={item.title}
className="flex text-base gap-1 flex-col items-start"
>
<div className="flex flex-col gap-2">
<p className="text-xl">{item.title}</p>
{item.items &&
item.items.map((subItem) => (
<Link
key={subItem.title}
href={subItem.href}
className="flex justify-between items-center"
>
<span className="text-background/75 dark:text-white">
{subItem.title}
</span>
</Link>
))}

{/* Navigation Links */}
<div className="grid grid-cols-2 md:grid-cols-3 gap-8 lg:col-span-8 lg:justify-items-end w-full">
{FOOTER_NAVIGATION_ITEMS.map((item) => (
<div
key={item.title}
className="flex flex-col items-start lg:items-end text-left lg:text-right w-full"
>
<div className="flex flex-col gap-4">
<h4 className="text-zinc-900 dark:text-zinc-100 font-semibold">
{item.title}
</h4>
<ul className="flex flex-col gap-3">
{item.items &&
item.items.map((subItem) => (
<li key={subItem.title}>
<Link
href={subItem.href}
className="text-zinc-500 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm font-medium"
>
{subItem.title}
</Link>
</li>
))}
</ul>
</div>
</div>
</div>
))}
))}
</div>

</div>

{/* Bottom Bar: Copyright */}
<div className="border-t border-zinc-200 dark:border-zinc-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-sm text-zinc-500 dark:text-zinc-400 font-medium">
© {FOOTER_COPYRIGHT.year} <Link href={FOOTER_COPYRIGHT.organizationUrl} className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">{FOOTER_COPYRIGHT.organization}</Link>. All rights reserved.
</p>
<p className="text-sm text-zinc-500 dark:text-zinc-400 font-medium text-center md:text-right">
{FOOTER_COPYRIGHT.text}
</p>
</div>
</div>
</Section>
</footer>
);
};
91 changes: 50 additions & 41 deletions components/faq.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,82 +3,91 @@ import {
AccordionContent,
AccordionItem,
AccordionTrigger,
Section,
SectionHeader,
} from "@/components/ui";
} from "@/components/ui/accordion";
import { Heading, Text } from "@/components/ui/typography";

export const gsocFaq = [
{
question: "What is Google Summer of Code (GSoC)?",
answer:
"Google Summer of Code is an open-source program where contributors work with mentor organizations on real-world software projects and receive a stipend from Google."
answer: "Google Summer of Code is an open-source program where contributors work with mentor organizations on real-world software projects and receive a stipend from Google."
},
{
question: "Who is eligible for GSoC?",
answer:
"Anyone who meets Google’s eligibility requirements can participate—students and non-students. Organizations typically look for consistent interest, communication skills, and basic familiarity with their tech stack."
answer: "Anyone who meets Google’s eligibility requirements can participate—students and non-students. Organizations typically look for consistent interest, communication skills, and basic familiarity with their tech stack."
},
{
question: "How do I find the right GSoC organization?",
answer:
"Choose an organization based on your tech stack, project ideas, beginner-friendliness, and past GSoC performance. Reviewing previous projects helps you understand what each organization expects."
answer: "Choose an organization based on your tech stack, project ideas, beginner-friendliness, and past GSoC performance. Reviewing previous projects helps you understand what each organization expects."
},
{
question: "What is the GSoC timeline for 2026?",
answer:
"The GSoC timeline includes phases like org announcements, contributor applications, coding period, and evaluations. Dates change yearly, but you can track every update using our timeline tools."
answer: "The GSoC timeline includes phases like org announcements, contributor applications, coding period, and evaluations. Dates change yearly, but you can track every update using our timeline tools."
},
{
question: "How do I choose a GSoC project idea?",
answer:
"Explore official org ideas pages and analyze previous GSoC projects to understand feasibility, required skills, and mentor expectations. Pick an idea that matches your interests and experience."
answer: "Explore official org ideas pages and analyze previous GSoC projects to understand feasibility, required skills, and mentor expectations. Pick an idea that matches your interests and experience."
},
{
question: "Do I need to contribute before submitting my GSoC proposal?",
answer:
"Most organizations recommend making small contributions, exploring the codebase, or asking relevant questions before applying. It shows commitment and improves your chances of selection."
answer: "Most organizations recommend making small contributions, exploring the codebase, or asking relevant questions before applying. It shows commitment and improves your chances of selection."
},
{
question: "How do I write a strong GSoC proposal?",
answer:
"A strong proposal includes clear goals, achievable milestones, a realistic timeline, understanding of the project, and evidence of communication with mentors. Reviewing previous accepted proposals helps a lot."
answer: "A strong proposal includes clear goals, achievable milestones, a realistic timeline, understanding of the project, and evidence of communication with mentors. Reviewing previous accepted proposals helps a lot."
},
{
question: "Where can I find previous GSoC projects?",
answer:
"You can browse previous GSoC projects from past years on our website. They include mentors, difficulty levels, technologies used, and project outcomes to help you prepare better."
answer: "You can browse previous GSoC projects from past years on our website. They include mentors, difficulty levels, technologies used, and project outcomes to help you prepare better."
},
{
question: "Which programming languages are used in GSoC?",
answer:
"GSoC organizations use many languages including Python, JavaScript, C++, Java, Rust, Go, Kotlin, and more. Each org lists the technologies required for their project ideas."
answer: "GSoC organizations use many languages including Python, JavaScript, C++, Java, Rust, Go, Kotlin, and more. Each org lists the technologies required for their project ideas."
},
{
question: "Is GSoC difficult for beginners?",
answer:
"No—many GSoC organizations offer beginner-friendly project ideas. With early preparation, consistent communication, and a solid proposal, beginners have a strong chance of getting selected."
answer: "No—many GSoC organizations offer beginner-friendly project ideas. With early preparation, consistent communication, and a solid proposal, beginners have a strong chance of getting selected."
}
];


export const FaqComponent = () => (
<Section>
<div className="grid lg:grid-cols-2 gap-10">
<div className="flex gap-10 flex-col">
<SectionHeader
badge="FAQ"
title="Google Summer of Code Related Queries"
description="Understanding GSoC organizations, project ideas, timelines, and proposal requirements can be challenging. This FAQ gives you clear, concise answers to the most common GSoC queries helping you prepare smarter and avoid confusion."
/>
<section className="w-full py-24 bg-zinc-50 dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800">
<div className="container mx-auto px-4 md:px-6 max-w-7xl">
<div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-start">

{/* Left Side: Title & Description */}
<div className="lg:col-span-4 space-y-4 lg:sticky lg:top-32">
<div className="inline-flex items-center rounded-full border border-blue-200 bg-blue-50/50 px-3 py-1 text-sm font-medium text-blue-700 dark:border-blue-900/50 dark:bg-blue-950/50 dark:text-blue-400 mb-2">
FAQ
</div>
<Heading as="h2" className="text-4xl md:text-5xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
Google Summer of Code Queries
</Heading>
<Text className="text-lg text-zinc-600 dark:text-zinc-400">
Understanding GSoC organizations, project ideas, timelines, and proposal requirements can be challenging. This FAQ gives you clear, concise answers to the most common GSoC queries helping you prepare smarter.
</Text>
</div>

{/* Right Side: Accordion */}
<div className="lg:col-span-8 bg-white dark:bg-zinc-950 rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-sm overflow-hidden">
<Accordion type="single" collapsible className="w-full divide-y divide-zinc-200 dark:divide-zinc-800">
{gsocFaq.map((faq, index) => (
<AccordionItem
key={index}
value={"item-" + index}
className="border-none px-6 sm:px-8 py-2 data-[state=open]:bg-zinc-50 dark:data-[state=open]:bg-zinc-900/50 transition-colors"
>
<AccordionTrigger className="text-left font-semibold text-zinc-900 dark:text-zinc-100 hover:no-underline py-6">
{faq.question}
</AccordionTrigger>
<AccordionContent className="text-zinc-600 dark:text-zinc-400 leading-relaxed pb-6 text-base">
{faq.answer}
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>

</div>
<Accordion type="single" collapsible className="w-full">
{gsocFaq.map((faq, index) => (
<AccordionItem key={index} value={"index-" + index}>
<AccordionTrigger>{faq.question}</AccordionTrigger>
<AccordionContent>{faq.answer}</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
</Section>
</section>
);
Loading
Loading