feat: Add a dedicated Open Source page with hero, FAQ, and informational components.

app/open-source/page.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import React, { Suspense } from "react";
+import dynamic from "next/dynamic";
+import Header from "@/components/header";
+import { WhatIsOpenSource } from "@/components/WhatIsOpenSource";
+import { OpenSourceSteps } from "@/components/open-source/OpenSourceSteps";
+import { OpenSourceFAQ } from "@/components/open-source/OpenSourceFAQ";
+import { OpenSourceHero } from "@/components/open-source/OpenSourceHero";
+import { SwagShowcase } from "@/components/open-source/SwagShowcase";
+
+const Footer = dynamic(() => import("@/components/footer"), {
+    ssr: true
+});
+
+export default function OpenSourcePage() {
+    return (
+        <main className="min-h-screen bg-background flex flex-col">
+            <Header />
+
+            <div className="flex-1 mt-16">
+                {/* We can reuse the WhatIsOpenSource component here. 
+            Since it's a dedicated page, we might want to add a hero section or breadcrumbs later, 
+            but the current component is designed as a full section so it works well. */}
+                <OpenSourceHero />
+                <SwagShowcase />
+                <WhatIsOpenSource />
+                <OpenSourceSteps />
+                <OpenSourceFAQ />
+            </div>
+
+            <Footer />
+        </main>
+    );
+}

app/page.tsx

@@ -115,6 +115,7 @@ export default function Home() {
             <FeaturesSection />
           </Suspense>
 
+
           {/* New: Organizations Section for company hosting */}
           <Suspense fallback={<div className="py-20"><div className="container px-4 mx-auto"><div className="animate-pulse"><div className="h-8 bg-gray-200 rounded w-1/3 mx-auto mb-4"></div><div className="h-4 bg-gray-200 rounded w-1/2 mx-auto"></div></div></div></div>}>
             <OrganizationsSection />

components/WhatIsOpenSource.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight, Globe, Code2, Users, GitBranch, Terminal, Sparkles } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+export function WhatIsOpenSource() {
+    return (
+        <section className="relative overflow-hidden bg-background">
+            <div className="container px-4 mx-auto relative z-10 py-12 md:py-16">
+                <div className="max-w-5xl mx-auto">
+
+                    {/* Main Content: What is Open Source? */}
+                    <div className="space-y-8">
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true }}
+                            transition={{ duration: 0.5 }}
+                        >
+                            <h2 className="text-3xl md:text-5xl font-bold tracking-tight mb-6">
+                                The Essence of <span className="bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent">Open Source</span>
+                            </h2>
+
+                            <div className="prose prose-lg dark:prose-invert leading-relaxed text-muted-foreground">
+                                <p className="text-xl md:text-2xl font-light text-foreground/90">
+                                    Open source is a philosophy that promotes free redistribution and access to an end product's design and implementation details.
+                                </p>
+                                <p>
+                                    In the world of software, it means the code is available for anyone to inspect, modify, and enhance. It's built on the belief that <span className="text-primary font-medium">collaborative development</span> creates better, more resilient, and more innovative software than any single company could build alone.
+                                </p>
+                            </div>
+                        </motion.div>
+
+                        {/* Key Benefits Grid */}
+                        <div className="grid sm:grid-cols-2 gap-6 pt-4">
+                            {[
+                                {
+                                    icon: Users,
+                                    title: "Community Driven",
+                                    desc: "Powered by a global community of developers working together.",
+                                    gradient: "from-blue-500 to-purple-600"
+                                },
+                                {
+                                    icon: GitBranch,
+                                    title: "Transparency",
+                                    desc: "Code that is open for everyone to review, audit, and improve.",
+                                    gradient: "from-green-500 to-blue-500"
+                                },
+                                {
+                                    icon: Code2,
+                                    title: "Collaboration",
+                                    desc: "Learn from others' code and contribute your own solutions.",
+                                    gradient: "from-purple-500 to-pink-500"
+                                },
+                                {
+                                    icon: Sparkles,
+                                    title: "Innovation",
+                                    desc: "Rapid evolution through shared ideas and collective problem solving.",
+                                    gradient: "from-orange-500 to-red-500"
+                                }
+                            ].map((item, index) => (
+                                <motion.div
+                                    key={index}
+                                    initial={{ opacity: 0, y: 20 }}
+                                    whileInView={{ opacity: 1, y: 0 }}
+                                    viewport={{ once: true }}
+                                    transition={{ duration: 0.5, delay: 0.1 * index }}
+                                    className="group relative p-6 rounded-2xl bg-card border border-border/50 hover:border-primary/20 shadow-lg hover:shadow-xl transition-all duration-300"
+                                >
+                                    <div className={`absolute inset-0 bg-gradient-to-br ${item.gradient} opacity-0 group-hover:opacity-5 transition-opacity duration-500 rounded-2xl`} />
+
+                                    <div className="flex gap-4">
+                                        <div className={`shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br ${item.gradient} p-2.5 flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300`}>
+                                            <item.icon className="w-full h-full text-white" />
+                                        </div>
+                                        <div>
+                                            <h3 className="font-semibold text-foreground text-lg">{item.title}</h3>
+                                            <p className="text-muted-foreground text-sm mt-1 leading-relaxed">{item.desc}</p>
+                                        </div>
+                                    </div>
+                                </motion.div>
+                            ))}
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </section>
+    );
+}

components/header.tsx

@@ -68,7 +68,7 @@ export default function Header() {
   const navItems = [
     { href: "/", label: "Home" },
     { href: "/about", label: "About" },
-    { href: "/companies", label: "Companies" },
+    { href: "/open-source", label: "Open Source" },
     { href: "/opportunities", label: "Opportunities" },
     { href: "/zenith-hall", label: "Zenith Hall" },
     { href: "/blog", label: "Blog" },

components/open-source/OpenSourceFAQ.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { motion } from "framer-motion";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion";
+
+export function OpenSourceFAQ() {
+    const faqs = [
+        {
+            question: "Do I need to be an expert coder to contribute?",
+            answer: "Not at all! Open source projects need all kinds of help, including documentation, design, testing, and translation. Many projects have 'good first issue' tags specifically for beginners."
+        },
+        {
+            question: "What if I mess up the code?",
+            answer: "That's what the review process is for! Maintainers will review your Pull Request (PR) before merging it. They will provide feedback and help you correct any mistakes. You can't break the main project just by submitting a PR."
+        },
+        {
+            question: "How do I find a project to work on?",
+            answer: "Start with tools you already use. Check if they are open source. Platforms like GitHub also have an 'Explore' section. Codeunia's OSCG 2026 is also a great place to start finding mentored projects."
+        },
+        {
+            question: "Will I get paid for open source?",
+            answer: "Most open source contributions are voluntary, but they build your portfolio and reputation, which can lead to job offers. Some programs (like GSoC, Outreachy, and sometimes OSCG) offer stipends or rewards."
+        },
+        {
+            question: "What is a Pull Request (PR)?",
+            answer: "A Pull Request is a way to notify project maintainers that you have completed a change and want them to review and merge it into the main codebase. It's the standard way to submit contributions."
+        }
+    ];
+
+    return (
+        <section className="py-24 bg-background">
+            <div className="container px-4 mx-auto max-w-4xl">
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.5 }}
+                    className="text-center mb-16"
+                >
+                    <h2 className="text-3xl md:text-5xl font-bold tracking-tight mb-4">
+                        Frequently Asked <span className="text-primary">Questions</span>
+                    </h2>
+                    <p className="text-lg text-muted-foreground">
+                        Common questions about getting started with open source.
+                    </p>
+                </motion.div>
+
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.5, delay: 0.2 }}
+                >
+                    <Accordion type="single" collapsible className="w-full">
+                        {faqs.map((faq, index) => (
+                            <AccordionItem key={index} value={`item-${index}`}>
+                                <AccordionTrigger className="text-left text-lg font-medium">
+                                    {faq.question}
+                                </AccordionTrigger>
+                                <AccordionContent className="text-muted-foreground text-base leading-relaxed">
+                                    {faq.answer}
+                                </AccordionContent>
+                            </AccordionItem>
+                        ))}
+                    </Accordion>
+                </motion.div>
+            </div>
+        </section>
+    );
+}

components/open-source/OpenSourceHero.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { Sparkles } from "lucide-react";
+
+export function OpenSourceHero() {
+    return (
+        <section className="py-20 md:py-32 relative overflow-hidden">
+            <div
+                className={cn(
+                    "absolute inset-0",
+                    "[background-size:20px_20px]",
+                    "[background-image:linear-gradient(to_right,rgba(99,102,241,0.8)_1px,transparent_1px),linear-gradient(to_bottom,rgba(99,102,241,0.8)_1px,transparent_1px)]",
+                    "dark:[background-image:linear-gradient(to_right,rgba(139,92,246,0.8)_1px,transparent_1px),linear-gradient(to_bottom,rgba(139,92,246,0.8)_1px,transparent_1px)]"
+                )}
+            />
+            <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+            <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-purple-500/5 animate-gradient"></div>
+            <div className="absolute inset-0">
+                <div className="absolute top-20 left-10 w-72 h-72 bg-primary/10 rounded-full blur-3xl animate-pulse-slow"></div>
+                <div
+                    className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse-slow"
+                    style={{ animationDelay: "2s" }}
+                ></div>
+            </div>
+
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+                className="container px-4 mx-auto relative z-10"
+            >
+                <div className="max-w-4xl mx-auto text-center space-y-8">
+                    <motion.div
+                        initial={{ scale: 0.9 }}
+                        animate={{ scale: 1 }}
+                        transition={{ duration: 0.3 }}
+                    >
+                        <div className="flex flex-col items-center justify-center gap-4">
+                            <button className="bg-slate-800 no-underline group relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block cursor-default">
+                                <span className="absolute inset-0 overflow-hidden rounded-full">
+                                    <span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+                                </span>
+                                <div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10">
+                                    <span>Open Source</span>
+                                    <span>
+                                        <Sparkles className="w-3 h-3" />
+                                    </span>
+                                </div>
+                                <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40" />
+                            </button>
+                        </div>
+                    </motion.div>
+                    <motion.h1
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.5, delay: 0.2 }}
+                        className="text-5xl md:text-6xl font-bold tracking-tight leading-tight"
+                    >
+                        Building the Status{" "}
+                        <motion.span
+                            className="gradient-text inline-block"
+                            animate={{
+                                backgroundPosition: [
+                                    "0% 50%",
+                                    "100% 50%",
+                                    "0% 50%",
+                                ],
+                            }}
+                            transition={{
+                                duration: 4,
+                                repeat: Infinity,
+                                ease: "linear",
+                            }}
+                            style={{
+                                background:
+                                    "linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4, #6366f1)",
+                                backgroundSize: "300% 100%",
+                                WebkitBackgroundClip: "text",
+                                WebkitTextFillColor: "transparent",
+                            }}
+                        >
+                            Quo
+                        </motion.span>
+                    </motion.h1>
+                    <motion.p
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.5, delay: 0.3 }}
+                        className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"
+                    >
+                        We believe in the power of open collaboration. Join us in building software that empowers everyone.
+                    </motion.p>
+                </div>
+            </motion.div>
+        </section>
+    );
+}