diff --git a/app/open-source/page.tsx b/app/open-source/page.tsx new file mode 100644 index 00000000..6715f587 --- /dev/null +++ b/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 ( +
+
+ +
+ {/* 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. */} + + + + + +
+ +
+ ); +} diff --git a/app/page.tsx b/app/page.tsx index 2f9d8e3a..06d3fdd6 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -115,6 +115,7 @@ export default function Home() { + {/* New: Organizations Section for company hosting */}
}> diff --git a/components/WhatIsOpenSource.tsx b/components/WhatIsOpenSource.tsx new file mode 100644 index 00000000..173857f2 --- /dev/null +++ b/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 ( +
+
+
+ + {/* Main Content: What is Open Source? */} +
+ +

+ The Essence of Open Source +

+ +
+

+ Open source is a philosophy that promotes free redistribution and access to an end product's design and implementation details. +

+

+ 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 collaborative development creates better, more resilient, and more innovative software than any single company could build alone. +

+
+ + + {/* Key Benefits Grid */} +
+ {[ + { + 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) => ( + +
+ +
+
+ +
+
+

{item.title}

+

{item.desc}

+
+
+ + ))} +
+
+ +
+
+
+ ); +} diff --git a/components/header.tsx b/components/header.tsx index 6e23c5de..fa474b6b 100644 --- a/components/header.tsx +++ b/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" }, diff --git a/components/open-source/OpenSourceFAQ.tsx b/components/open-source/OpenSourceFAQ.tsx new file mode 100644 index 00000000..261933b1 --- /dev/null +++ b/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 ( +
+
+ +

+ Frequently Asked Questions +

+

+ Common questions about getting started with open source. +

+ + + + + {faqs.map((faq, index) => ( + + + {faq.question} + + + {faq.answer} + + + ))} + + +
+
+ ); +} diff --git a/components/open-source/OpenSourceHero.tsx b/components/open-source/OpenSourceHero.tsx new file mode 100644 index 00000000..c93ceb0a --- /dev/null +++ b/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 ( +
+
+
+
+
+
+
+
+ + +
+ +
+ +
+ + + Building the Status{" "} + + Quo + + + + We believe in the power of open collaboration. Join us in building software that empowers everyone. + +
+ +
+ ); +} diff --git a/components/open-source/OpenSourceSteps.tsx b/components/open-source/OpenSourceSteps.tsx new file mode 100644 index 00000000..bb68208f --- /dev/null +++ b/components/open-source/OpenSourceSteps.tsx @@ -0,0 +1,93 @@ +"use client"; + +import { motion } from "framer-motion"; +import { GitPullRequest, Search, BookOpen, MessageSquare, Star, CheckCircle2 } from "lucide-react"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; + +export function OpenSourceSteps() { + const steps = [ + { + icon: Search, + title: "Find a Project", + description: "Look for projects that interest you. Use tags like 'good first issue' or 'help wanted' to find beginner-friendly tasks.", + color: "text-blue-500" + }, + { + icon: BookOpen, + title: "Read Documentation", + description: "Understand the project's goals, setup instructions, and contribution guidelines (CONTRIBUTING.md).", + color: "text-green-500" + }, + { + icon: MessageSquare, + title: "Join the Community", + description: "Introduce yourself in the project's communication channels (Discord, Slack, etc.). Ask questions and engage.", + color: "text-purple-500" + }, + { + icon: GitPullRequest, + title: "Submit a Pull Request", + description: "Fork the repo, make your changes, test them, and submit a PR. Be open to feedback and iterate.", + color: "text-orange-500" + }, + { + icon: Star, + title: "Celebrate & Repeat", + description: "Once merged, celebrate your contribution! Continue contributing and exploring new projects.", + color: "text-yellow-500" + } + ]; + + return ( +
+
+
+

+ How to Start Contributing +

+

+ Embarking on your open source journey is easier than you think. Follow these simple steps to make your first contribution. +

+
+ +
+ {/* Connecting Line (Desktop) */} +
+ + {steps.map((step, index) => ( + + +
+ +
+ + +
+ +
+ + + {index + 1} + + {step.title} + + + +

+ {step.description} +

+ + + + ))} +
+
+
+ ); +} diff --git a/components/open-source/SwagShowcase.tsx b/components/open-source/SwagShowcase.tsx new file mode 100644 index 00000000..2299ef94 --- /dev/null +++ b/components/open-source/SwagShowcase.tsx @@ -0,0 +1,104 @@ +"use client"; + +import { motion } from "framer-motion"; +import { Button } from "@/components/ui/button"; +import { ArrowRight, Gift, Sparkles } from "lucide-react"; +import Image from "next/image"; + +export function SwagShowcase() { + return ( +
+ {/* Animated background effects */} +
+
+ + {/* Grid overlay */} +
+ +
+
+ + {/* Left: Swag Image */} + +
+
+ OSCG 2026 Exclusive Swags - Hoodie, Cap, Bottle, and Bag +
+ + + {/* Right: Content */} + +
+ + Exclusive Rewards +
+ +

+ Grab Your Swag and Power Up the{" "} + Open Source Spirit +

+ +

+ Active contributors to OSCG 2026 will earn exclusive branded merchandise including hoodies, caps, water bottles, and backpacks. Show your open source pride! +

+ +
    + {[ + "Premium quality branded hoodie", + "Stylish cap with embroidered logo", + "Eco-friendly water bottle", + "Durable backpack for your gear" + ].map((item, i) => ( +
  • + + {item} +
    • + ))} +
+ +
+ +

+ Limited swags available • First come, first served +

+
+ + +
+
+
+ ); +} diff --git a/public/assets/oscg-swag-banner.jpg b/public/assets/oscg-swag-banner.jpg new file mode 100644 index 00000000..bdadbf40 Binary files /dev/null and b/public/assets/oscg-swag-banner.jpg differ