From 965b8c40383dd8e3adb37c44fdd8d471c9259f17 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Mon, 24 Nov 2025 15:08:42 +0530
Subject: [PATCH] feat(companies): Add company hosting page and organization
 promotion sections

- Create new company hosting page at `/companies/host` with hero, stats, features, FAQ, and CTA sections
- Add HostingHero component showcasing event hosting benefits and value proposition
- Add CompanyStats component displaying platform statistics and engagement metrics
- Add HowItWorksSection component explaining the hosting process step-by-step
- Add CompanyFeatures component highlighting key platform features for companies
- Add CompanyFAQ component with frequently asked questions about hosting
- Add CompanyCTA component with call-to-action for company registration
- Add CompanyStatsBanner component to companies listing page showing platform reach
- Add CompanyRegistrationCTA component to companies page encouraging company sign-ups
- Add OrganizationsSection component to home page promoting company hosting opportunities
- Update companies page description to emphasize career growth and industry connections
- Integrate new sections into home page with dynamic loading and suspense boundaries
- Update header and footer components for improved navigation and consistency
---
 app/companies/host/page.tsx                   |  39 ++++
 app/companies/page.tsx                        |  10 +-
 app/page.tsx                                  |  24 ++-
 components/companies/CompanyCTA.tsx           | 126 +++++++++++++
 components/companies/CompanyFAQ.tsx           | 110 +++++++++++
 components/companies/CompanyFeatures.tsx      | 178 ++++++++++++++++++
 .../companies/CompanyRegistrationCTA.tsx      | 154 +++++++++++++++
 components/companies/CompanyStats.tsx         | 109 +++++++++++
 components/companies/CompanyStatsBanner.tsx   |  95 ++++++++++
 components/companies/HostingHero.tsx          | 146 ++++++++++++++
 components/companies/HowItWorksSection.tsx    | 118 ++++++++++++
 components/footer.tsx                         |   6 +
 components/header.tsx                         |  13 +-
 components/home/OrganizationsSection.tsx      | 142 ++++++++++++++
 14 files changed, 1261 insertions(+), 9 deletions(-)
 create mode 100644 app/companies/host/page.tsx
 create mode 100644 components/companies/CompanyCTA.tsx
 create mode 100644 components/companies/CompanyFAQ.tsx
 create mode 100644 components/companies/CompanyFeatures.tsx
 create mode 100644 components/companies/CompanyRegistrationCTA.tsx
 create mode 100644 components/companies/CompanyStats.tsx
 create mode 100644 components/companies/CompanyStatsBanner.tsx
 create mode 100644 components/companies/HostingHero.tsx
 create mode 100644 components/companies/HowItWorksSection.tsx
 create mode 100644 components/home/OrganizationsSection.tsx

diff --git a/app/companies/host/page.tsx b/app/companies/host/page.tsx
new file mode 100644
index 00000000..a75a149e
--- /dev/null
+++ b/app/companies/host/page.tsx
@@ -0,0 +1,39 @@
+import Header from "@/components/header"
+import Footer from "@/components/footer"
+import { HostingHero } from "@/components/companies/HostingHero"
+import { CompanyStats } from "@/components/companies/CompanyStats"
+import { HowItWorksSection } from "@/components/companies/HowItWorksSection"
+import { CompanyFeatures } from "@/components/companies/CompanyFeatures"
+import { CompanyFAQ } from "@/components/companies/CompanyFAQ"
+import { CompanyCTA } from "@/components/companies/CompanyCTA"
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+    title: "Host Tech Events & Hackathons | Codeunia for Companies",
+    description: "Host verified events, hackathons, and workshops on Codeunia. Engage 3000+ developers with team collaboration, analytics, and professional event management tools.",
+    keywords: "host tech events, developer hackathons, workshop hosting, event management platform, tech community engagement",
+    openGraph: {
+        title: "Host Tech Events & Hackathons | Codeunia for Companies",
+        description: "Host verified events, hackathons, and workshops on Codeunia. Engage 3000+ developers with team collaboration, analytics, and professional event management tools.",
+        type: "website",
+    },
+}
+
+export default function CompanyHostingPage() {
+    return (
+        <div className="flex flex-col overflow-hidden bg-gradient-to-br from-background via-background to-muted/10">
+            <Header />
+
+            <main className="flex-1">
+                <HostingHero />
+                <CompanyStats />
+                <HowItWorksSection />
+                <CompanyFeatures />
+                <CompanyFAQ />
+                <CompanyCTA />
+            </main>
+
+            <Footer />
+        </div>
+    )
+}
diff --git a/app/companies/page.tsx b/app/companies/page.tsx
index b6d54736..24e0456e 100644
--- a/app/companies/page.tsx
+++ b/app/companies/page.tsx
@@ -8,6 +8,8 @@ import { motion } from "framer-motion"
 import Header from "@/components/header"
 import Footer from "@/components/footer"
 import { CompanyCard } from "@/components/companies/CompanyCard"
+import { CompanyStatsBanner } from "@/components/companies/CompanyStatsBanner"
+import { CompanyRegistrationCTA } from "@/components/companies/CompanyRegistrationCTA"
 import { Company } from "@/types/company"
 import { cn } from "@/lib/utils"
 import {
@@ -189,12 +191,15 @@ export default function CompaniesPage() {
               transition={{ duration: 0.5, delay: 0.3 }}
               className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"
             >
-              Explore verified companies hosting amazing events, workshops, and hackathons for the developer community.
+              Discover verified companies hosting events, hackathons, and workshops. Connect with industry leaders, participate in tech challenges, and grow your career.
             </motion.p>
           </div>
         </motion.div>
       </section>
 
+      {/* Stats Banner */}
+      <CompanyStatsBanner totalCompanies={total} />
+
       {/* Search and Filters */}
       <section className="py-8 bg-gradient-to-b from-muted/30 to-background relative border-b border-primary/10">
         <div className="container px-4 mx-auto">
@@ -383,6 +388,9 @@ export default function CompaniesPage() {
         </div>
       </section>
 
+      {/* Company Registration CTA */}
+      <CompanyRegistrationCTA />
+
       <Footer />
     </div>
   )
diff --git a/app/page.tsx b/app/page.tsx
index b9c69ca4..2f9d8e3a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -72,6 +72,21 @@ const SponsorsSection = dynamic(() => import("@/components/home/SponsorsSection"
   ssr: false
 });
 
+// New: OrganizationsSection for company hosting
+const OrganizationsSection = dynamic(() => import("@/components/home/OrganizationsSection").then(mod => ({ default: mod.OrganizationsSection })), {
+  loading: () => (
+    <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>
+  ),
+  ssr: false
+});
+
 const Footer = dynamic(() => import("@/components/footer"), {
   loading: () => (
     <footer className="border-t border-border/40 bg-gradient-to-b from-background/95 via-background to-background/95">
@@ -90,7 +105,7 @@ export default function Home() {
   return (
     <>
       <main className="flex min-h-screen flex-col items-center justify-between">
-        <Header/>
+        <Header />
         <div className="w-full max-w-[2000px]">
           <Suspense fallback={<div className="min-h-[600px] flex items-center justify-center"><div className="animate-pulse text-primary">Loading...</div></div>}>
             <HeroSection2 />
@@ -100,6 +115,11 @@ 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 />
+          </Suspense>
+
           <Suspense fallback={<div className="py-16"><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>}>
             <CommunitySpotlight />
           </Suspense>
@@ -113,7 +133,7 @@ export default function Home() {
             <LatestContentPreview />
           </Suspense>
         </div>
-        <Footer/>
+        <Footer />
       </main>
     </>
   )
diff --git a/components/companies/CompanyCTA.tsx b/components/companies/CompanyCTA.tsx
new file mode 100644
index 00000000..e18e29c0
--- /dev/null
+++ b/components/companies/CompanyCTA.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Button } from "@/components/ui/button"
+import { ArrowRight, Mail } from "lucide-react"
+import Link from "next/link"
+import { SparklesCore } from "@/components/ui/sparkles"
+
+export function CompanyCTA() {
+    return (
+        <section className="py-20 md:py-24 relative overflow-hidden bg-gradient-to-br from-primary/10 via-purple-500/10 to-background dark:from-primary/20 dark:via-purple-500/20 dark:to-background">
+            <div className="absolute inset-0">
+                <div className="absolute top-10 left-10 w-32 h-32 bg-primary/20 dark:bg-primary/30 rounded-full blur-xl animate-float"></div>
+                <div
+                    className="absolute bottom-10 right-10 w-48 h-48 bg-purple-500/20 dark:bg-purple-500/30 rounded-full blur-xl animate-float"
+                    style={{ animationDelay: "3s" }}
+                ></div>
+            </div>
+
+            {/* Sparkles effect */}
+            <div className="absolute inset-0 h-full w-full">
+                <SparklesCore
+                    id="company-cta-sparkles"
+                    background="transparent"
+                    minSize={0.6}
+                    maxSize={1.4}
+                    particleDensity={100}
+                    className="w-full h-full"
+                    particleColor="#6366f1"
+                />
+            </div>
+
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+                viewport={{ once: true }}
+                className="container px-4 mx-auto text-center relative z-10"
+            >
+                <div className="max-w-3xl mx-auto space-y-8 p-8 md:p-10 rounded-3xl bg-background/50 dark:bg-background/80 backdrop-blur-md border border-primary/10 dark:border-primary/20 shadow-xl">
+                    <div className="flex flex-col items-center justify-center gap-4">
+                        <button className="bg-slate-800 no-underline group cursor-default relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block">
+                            <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>Ready to Get Started?</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.h2
+                        initial={{ opacity: 0, y: 20 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.5, delay: 0.2 }}
+                        viewport={{ once: true }}
+                        className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight"
+                    >
+                        Ready to Engage the{" "}
+                        <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",
+                            }}
+                        >
+                            Developer Community?
+                        </motion.span>
+                    </motion.h2>
+
+                    <p className="text-lg md:text-xl text-muted-foreground dark:text-muted-foreground/90 leading-relaxed">
+                        Join 50+ verified companies hosting impactful events on Codeunia. Start engaging with 3000+ developers today.
+                    </p>
+
+                    <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                        <Button
+                            size="lg"
+                            className="bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 text-white px-8 py-6 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105"
+                            asChild
+                        >
+                            <Link href="/companies/register" className="flex items-center gap-2">
+                                Register Your Company
+                                <ArrowRight className="w-5 h-5" />
+                            </Link>
+                        </Button>
+
+                        <Button
+                            size="lg"
+                            variant="outline"
+                            className="px-8 py-6 text-lg font-semibold hover:scale-105 transition-transform duration-300"
+                            asChild
+                        >
+                            <Link href="/contact" className="flex items-center gap-2">
+                                <Mail className="w-5 h-5" />
+                                Contact Us
+                            </Link>
+                        </Button>
+                    </div>
+
+                    <p className="text-sm text-muted-foreground">
+                        Questions? Check out our{" "}
+                        <Link href="/companies/faq" className="text-primary hover:underline">
+                            FAQ
+                        </Link>{" "}
+                        or{" "}
+                        <Link href="/contact" className="text-primary hover:underline">
+                            contact our team
+                        </Link>
+                    </p>
+                </div>
+            </motion.div>
+        </section>
+    )
+}
diff --git a/components/companies/CompanyFAQ.tsx b/components/companies/CompanyFAQ.tsx
new file mode 100644
index 00000000..916768f6
--- /dev/null
+++ b/components/companies/CompanyFAQ.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import { motion } from "framer-motion"
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion"
+
+const faqs = [
+    {
+        question: "How long does verification take?",
+        answer: "Most applications are reviewed within 24-48 hours. You'll receive an email notification once your company is verified and ready to start hosting events.",
+    },
+    {
+        question: "What documents are required for verification?",
+        answer: "You'll need to provide business registration documents, your company website URL, and an official company email domain. All documents are securely stored and virus-scanned.",
+    },
+    {
+        question: "Can I invite team members to help manage events?",
+        answer: "Yes! You can invite unlimited team members with role-based permissions. Assign roles like Owner, Admin, Editor, or Viewer to control what each team member can do.",
+    },
+    {
+        question: "Is there a cost to host events on Codeunia?",
+        answer: "Currently, hosting events on Codeunia is completely free for all verified companies. We may introduce premium features in the future, but the core platform will remain free.",
+    },
+    {
+        question: "What types of events can I host?",
+        answer: "You can host workshops, hackathons, webinars, conferences, networking events, and any tech-related gatherings. Both online and in-person events are supported.",
+    },
+    {
+        question: "Can I edit events after publishing?",
+        answer: "Yes, admins and editors can update event details anytime. Changes are reflected immediately, and registered participants are notified of significant updates.",
+    },
+    {
+        question: "How do I track event performance?",
+        answer: "Your dashboard provides real-time analytics including views, registrations, attendance, and engagement metrics. You can also export detailed reports as CSV files.",
+    },
+    {
+        question: "What happens if my company is rejected?",
+        answer: "If your application is rejected, you'll receive an email with the specific reason. You can address the issues and resubmit your application for review.",
+    },
+]
+
+export function CompanyFAQ() {
+    return (
+        <section className="py-20 relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-br from-transparent via-primary/5 to-transparent"></div>
+
+            <div className="container px-4 mx-auto relative z-10">
+                <motion.div
+                    className="text-center space-y-6 mb-12"
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6 }}
+                    viewport={{ once: true }}
+                >
+                    <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>FAQ</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>
+
+                    <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold">
+                        Frequently Asked{" "}
+                        <span className="bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">
+                            Questions
+                        </span>
+                    </h2>
+
+                    <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+                        Everything you need to know about hosting events on Codeunia
+                    </p>
+                </motion.div>
+
+                <motion.div
+                    className="max-w-3xl mx-auto"
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 0.2 }}
+                    viewport={{ once: true }}
+                >
+                    <Accordion type="single" collapsible className="w-full space-y-4">
+                        {faqs.map((faq, index) => (
+                            <AccordionItem
+                                key={index}
+                                value={`item-${index}`}
+                                className="border border-primary/10 rounded-lg px-6 bg-background/50 backdrop-blur-sm hover:border-primary/20 transition-colors"
+                            >
+                                <AccordionTrigger className="text-left hover:no-underline py-4">
+                                    <span className="font-semibold text-lg">{faq.question}</span>
+                                </AccordionTrigger>
+                                <AccordionContent className="text-muted-foreground pb-4">
+                                    {faq.answer}
+                                </AccordionContent>
+                            </AccordionItem>
+                        ))}
+                    </Accordion>
+                </motion.div>
+            </div>
+        </section>
+    )
+}
diff --git a/components/companies/CompanyFeatures.tsx b/components/companies/CompanyFeatures.tsx
new file mode 100644
index 00000000..97ca0965
--- /dev/null
+++ b/components/companies/CompanyFeatures.tsx
@@ -0,0 +1,178 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Building2, Users, BarChart3, Shield, FileText, Sparkles } from "lucide-react"
+import { CardSpotlight } from "@/components/ui/card-spotlight"
+import { cn } from "@/lib/utils"
+
+const features = [
+    {
+        icon: Building2,
+        title: "Verified Company Profiles",
+        description: "Build credibility with verified badges and professional company pages. Showcase your logo, description, and social links with custom branding.",
+        benefits: [
+            "Professional company pages with custom branding",
+            "Verified badge for credibility",
+            "Industry and company size categorization",
+        ],
+        gradient: "from-blue-500 to-cyan-500",
+    },
+    {
+        icon: Sparkles,
+        title: "Event & Hackathon Management",
+        description: "Create unlimited events and hackathons with rich descriptions, image uploads, and built-in registration management.",
+        benefits: [
+            "Unlimited events and hackathons",
+            "Rich text editor with image uploads",
+            "Registration and participant tracking",
+        ],
+        gradient: "from-purple-500 to-pink-500",
+    },
+    {
+        icon: Users,
+        title: "Team Collaboration",
+        description: "Invite unlimited team members with role-based permissions. Collaborate on event creation with owners, admins, editors, and viewers.",
+        benefits: [
+            "Invite unlimited team members",
+            "Role-based permissions (Owner, Admin, Editor, Viewer)",
+            "Activity tracking and audit logs",
+        ],
+        gradient: "from-green-500 to-emerald-500",
+    },
+    {
+        icon: BarChart3,
+        title: "Analytics & Insights",
+        description: "Track event performance with real-time metrics. Monitor registrations, attendance, and engagement with exportable reports.",
+        benefits: [
+            "Real-time event performance metrics",
+            "Registration and attendance tracking",
+            "Export reports as CSV",
+        ],
+        gradient: "from-orange-500 to-red-500",
+    },
+    {
+        icon: FileText,
+        title: "Document Management",
+        description: "Securely upload verification documents with virus scanning and validation. Private storage with signed URLs for secure access.",
+        benefits: [
+            "Secure document uploads for verification",
+            "Virus scanning and validation",
+            "Private document storage with signed URLs",
+        ],
+        gradient: "from-indigo-500 to-purple-500",
+    },
+    {
+        icon: Shield,
+        title: "Brand Visibility",
+        description: "Get featured on the company directory and event listings. Benefit from search engine optimized pages and social media integration.",
+        benefits: [
+            "Featured on company directory",
+            "Event listings on homepage",
+            "SEO-optimized pages",
+        ],
+        gradient: "from-pink-500 to-rose-500",
+    },
+]
+
+export function CompanyFeatures() {
+    return (
+        <section className="py-20 relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-br from-transparent via-primary/5 to-transparent"></div>
+
+            <div className="container px-4 mx-auto relative z-10">
+                <motion.div
+                    className="text-center space-y-6 mb-16"
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6 }}
+                    viewport={{ once: true }}
+                >
+                    <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>Powerful Features</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>
+
+                    <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold">
+                        Everything You Need to{" "}
+                        <span className="bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">
+                            Host Successful Events
+                        </span>
+                    </h2>
+
+                    <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+                        Comprehensive tools for event management, team collaboration, and analytics
+                    </p>
+                </motion.div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
+                    {features.map((feature, index) => (
+                        <motion.div
+                            key={index}
+                            initial={{ opacity: 0, y: 30 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.6, delay: index * 0.1 }}
+                            viewport={{ once: true }}
+                            whileHover={{ y: -8, transition: { duration: 0.3 } }}
+                        >
+                            <CardSpotlight
+                                className="relative h-full bg-white/50 dark:bg-background/50 backdrop-blur-md border border-primary/10 overflow-hidden"
+                                color="rgba(99, 102, 241, 0.15)"
+                            >
+                                <div className="pointer-events-none absolute inset-0 z-0 bg-[radial-gradient(circle_at_center,_rgba(255,255,255,0.7)_0%,_rgba(255,255,255,0)_60%)] dark:bg-none" />
+
+                                <div className="relative z-10 space-y-4">
+                                    <div className="flex items-center space-x-4">
+                                        <motion.div
+                                            className={cn(
+                                                "w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg relative overflow-hidden",
+                                                `bg-gradient-to-br ${feature.gradient}`
+                                            )}
+                                            whileHover={{
+                                                rotate: [0, -10, 10, 0],
+                                                transition: { duration: 0.5 },
+                                            }}
+                                        >
+                                            <feature.icon className="h-8 w-8 text-white relative z-10" />
+                                            <motion.div
+                                                className="absolute inset-0 bg-white/20"
+                                                initial={{ scale: 0, opacity: 0 }}
+                                                whileHover={{
+                                                    scale: 1,
+                                                    opacity: 1,
+                                                    transition: { duration: 0.3 },
+                                                }}
+                                            />
+                                        </motion.div>
+                                        <h3 className="text-2xl font-bold text-zinc-900 dark:text-white">
+                                            {feature.title}
+                                        </h3>
+                                    </div>
+
+                                    <p className="text-zinc-800 dark:text-foreground/80 leading-relaxed">
+                                        {feature.description}
+                                    </p>
+
+                                    <ul className="space-y-2">
+                                        {feature.benefits.map((benefit, i) => (
+                                            <li key={i} className="flex items-start gap-2 text-sm text-muted-foreground">
+                                                <span className="text-primary mt-1">✓</span>
+                                                <span>{benefit}</span>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </div>
+                            </CardSpotlight>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}
diff --git a/components/companies/CompanyRegistrationCTA.tsx b/components/companies/CompanyRegistrationCTA.tsx
new file mode 100644
index 00000000..1463c4e8
--- /dev/null
+++ b/components/companies/CompanyRegistrationCTA.tsx
@@ -0,0 +1,154 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Button } from "@/components/ui/button"
+import { Building2, Users, Calendar, Briefcase, ArrowRight, CheckCircle } from "lucide-react"
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+
+const benefits = [
+    {
+        icon: Users,
+        title: "Reach Developers",
+        description: "Access 3000+ active developers looking for events, hackathons, and learning opportunities.",
+        gradient: "from-blue-500 to-cyan-500",
+    },
+    {
+        icon: Building2,
+        title: "Build Brand",
+        description: "Verified badge and professional presence to establish credibility in the developer community.",
+        gradient: "from-purple-500 to-pink-500",
+    },
+    {
+        icon: Calendar,
+        title: "Track Impact",
+        description: "Comprehensive analytics dashboard to measure event success and engagement metrics.",
+        gradient: "from-green-500 to-emerald-500",
+    },
+    {
+        icon: Briefcase,
+        title: "Team Management",
+        description: "Collaborative event creation with role-based permissions for your entire team.",
+        gradient: "from-orange-500 to-red-500",
+    },
+]
+
+export function CompanyRegistrationCTA() {
+    return (
+        <section className="py-20 bg-gradient-to-b from-background to-muted/30 relative overflow-hidden">
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.05),transparent_70%)]"></div>
+
+            <div className="container px-4 mx-auto relative z-10">
+                <motion.div
+                    className="text-center space-y-6 mb-12"
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6 }}
+                    viewport={{ once: true }}
+                >
+                    <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>For Organizations</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>
+
+                    <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold">
+                        Is Your Company Ready to{" "}
+                        <span className="bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">
+                            Host Events?
+                        </span>
+                    </h2>
+
+                    <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+                        Join verified companies engaging developers on Codeunia
+                    </p>
+                </motion.div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto mb-12">
+                    {benefits.map((benefit, index) => (
+                        <motion.div
+                            key={index}
+                            initial={{ opacity: 0, y: 30 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.6, delay: index * 0.1 }}
+                            viewport={{ once: true }}
+                            whileHover={{ y: -8, transition: { duration: 0.3 } }}
+                            className="relative"
+                        >
+                            <div className="h-full bg-background/50 backdrop-blur-sm border border-primary/10 rounded-2xl p-6 space-y-4 hover:border-primary/20 transition-all duration-300 hover:shadow-lg group">
+                                <div className="flex items-center gap-4">
+                                    <motion.div
+                                        className={cn(
+                                            "w-14 h-14 rounded-xl flex items-center justify-center shadow-lg flex-shrink-0",
+                                            `bg-gradient-to-br ${benefit.gradient}`
+                                        )}
+                                        whileHover={{
+                                            rotate: [0, -10, 10, 0],
+                                            transition: { duration: 0.5 },
+                                        }}
+                                    >
+                                        <benefit.icon className="h-7 w-7 text-white" />
+                                    </motion.div>
+
+                                    <div className="flex-1">
+                                        <h3 className="text-xl font-bold mb-1">{benefit.title}</h3>
+                                        <p className="text-sm text-muted-foreground leading-relaxed">
+                                            {benefit.description}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </motion.div>
+                    ))}
+                </div>
+
+                <motion.div
+                    className="text-center space-y-6"
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 0.4 }}
+                    viewport={{ once: true }}
+                >
+                    <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+                        <Button
+                            size="lg"
+                            className="bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 text-white px-8 py-6 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105"
+                            asChild
+                        >
+                            <Link href="/companies/register" className="flex items-center gap-2">
+                                Register Your Company
+                                <ArrowRight className="w-5 h-5" />
+                            </Link>
+                        </Button>
+
+                        <Button
+                            size="lg"
+                            variant="outline"
+                            className="px-8 py-6 text-lg font-semibold hover:scale-105 transition-all duration-300"
+                            asChild
+                        >
+                            <Link href="/companies/host">Learn More</Link>
+                        </Button>
+                    </div>
+
+                    <div className="flex items-center justify-center gap-6 text-sm text-muted-foreground">
+                        <div className="flex items-center gap-2">
+                            <CheckCircle className="w-4 h-4 text-primary" />
+                            <span>Free for verified companies</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <CheckCircle className="w-4 h-4 text-primary" />
+                            <span>24-48 hour verification</span>
+                        </div>
+                    </div>
+                </motion.div>
+            </div>
+        </section>
+    )
+}
diff --git a/components/companies/CompanyStats.tsx b/components/companies/CompanyStats.tsx
new file mode 100644
index 00000000..4f417526
--- /dev/null
+++ b/components/companies/CompanyStats.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Building2, Calendar, Users as UsersIcon, Briefcase } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const stats = [
+    {
+        number: "50+",
+        label: "Verified Companies",
+        icon: Building2,
+        color: "text-blue-500",
+        gradient: "from-blue-500/10 to-cyan-500/10",
+    },
+    {
+        number: "200+",
+        label: "Events Hosted",
+        icon: Calendar,
+        color: "text-purple-500",
+        gradient: "from-purple-500/10 to-pink-500/10",
+    },
+    {
+        number: "3000+",
+        label: "Developers Reached",
+        icon: UsersIcon,
+        color: "text-green-500",
+        gradient: "from-green-500/10 to-emerald-500/10",
+    },
+    {
+        number: "15+",
+        label: "Industries",
+        icon: Briefcase,
+        color: "text-orange-500",
+        gradient: "from-orange-500/10 to-red-500/10",
+    },
+]
+
+export function CompanyStats() {
+    return (
+        <section className="py-20 bg-gradient-to-b from-muted/30 to-background relative overflow-hidden">
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.05),transparent_70%)]"></div>
+
+            <div className="container px-4 mx-auto relative z-10">
+                <motion.div
+                    className="text-center space-y-6 mb-12"
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6 }}
+                    viewport={{ once: true }}
+                >
+                    <h2 className="text-3xl md:text-4xl font-bold">
+                        Trusted by{" "}
+                        <span className="bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">
+                            Leading Organizations
+                        </span>
+                    </h2>
+                    <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+                        Join companies already engaging developers on Codeunia
+                    </p>
+                </motion.div>
+
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-5xl mx-auto">
+                    {stats.map((stat, index) => (
+                        <motion.div
+                            key={index}
+                            initial={{ opacity: 0, y: 30 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.6, delay: index * 0.1 }}
+                            viewport={{ once: true }}
+                            whileHover={{
+                                scale: 1.05,
+                                transition: { duration: 0.2 },
+                            }}
+                            className="text-center space-y-4 p-6 rounded-2xl bg-background/50 backdrop-blur-sm border border-primary/10 hover:border-primary/20 transition-all duration-300 hover:shadow-lg group"
+                        >
+                            <div className="flex justify-center">
+                                <div
+                                    className={cn(
+                                        "w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-110",
+                                        `bg-gradient-to-br ${stat.gradient} group-hover:shadow-lg`
+                                    )}
+                                >
+                                    <stat.icon className={cn("h-6 w-6", stat.color)} />
+                                </div>
+                            </div>
+
+                            <motion.h3
+                                className="text-4xl font-bold text-primary"
+                                initial={{ scale: 0 }}
+                                whileInView={{ scale: 1 }}
+                                transition={{
+                                    duration: 0.5,
+                                    delay: index * 0.1 + 0.2,
+                                }}
+                                viewport={{ once: true }}
+                            >
+                                {stat.number}
+                            </motion.h3>
+
+                            <p className="text-muted-foreground font-medium">
+                                {stat.label}
+                            </p>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}
diff --git a/components/companies/CompanyStatsBanner.tsx b/components/companies/CompanyStatsBanner.tsx
new file mode 100644
index 00000000..0fa9ab7a
--- /dev/null
+++ b/components/companies/CompanyStatsBanner.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Building2, Calendar, Users, Briefcase } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface CompanyStatsBannerProps {
+    totalCompanies?: number
+    totalEvents?: number
+    totalDevelopers?: number
+    totalIndustries?: number
+}
+
+export function CompanyStatsBanner({
+    totalCompanies = 50,
+    totalEvents = 200,
+    totalDevelopers = 3000,
+    totalIndustries = 15,
+}: CompanyStatsBannerProps) {
+    const stats = [
+        {
+            number: `${totalCompanies}+`,
+            label: "Verified Companies",
+            icon: Building2,
+            color: "text-blue-500",
+            gradient: "from-blue-500/10 to-cyan-500/10",
+        },
+        {
+            number: `${totalEvents}+`,
+            label: "Events Hosted",
+            icon: Calendar,
+            color: "text-purple-500",
+            gradient: "from-purple-500/10 to-pink-500/10",
+        },
+        {
+            number: `${totalDevelopers}+`,
+            label: "Developers Reached",
+            icon: Users,
+            color: "text-green-500",
+            gradient: "from-green-500/10 to-emerald-500/10",
+        },
+        {
+            number: `${totalIndustries}+`,
+            label: "Industries",
+            icon: Briefcase,
+            color: "text-orange-500",
+            gradient: "from-orange-500/10 to-red-500/10",
+        },
+    ]
+
+    return (
+        <section className="py-12 bg-gradient-to-b from-muted/30 to-background relative border-b border-primary/10">
+            <div className="container px-4 mx-auto">
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-5xl mx-auto">
+                    {stats.map((stat, index) => (
+                        <motion.div
+                            key={index}
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.5, delay: index * 0.1 }}
+                            className="text-center space-y-3 p-4 rounded-xl bg-background/50 backdrop-blur-sm border border-primary/10 hover:border-primary/20 transition-all duration-300 hover:shadow-md group"
+                        >
+                            <div className="flex justify-center">
+                                <div
+                                    className={cn(
+                                        "w-10 h-10 rounded-lg flex items-center justify-center transition-all duration-300 group-hover:scale-110",
+                                        `bg-gradient-to-br ${stat.gradient}`
+                                    )}
+                                >
+                                    <stat.icon className={cn("h-5 w-5", stat.color)} />
+                                </div>
+                            </div>
+
+                            <motion.h3
+                                className="text-3xl font-bold text-primary"
+                                initial={{ scale: 0 }}
+                                animate={{ scale: 1 }}
+                                transition={{
+                                    duration: 0.5,
+                                    delay: index * 0.1 + 0.2,
+                                }}
+                            >
+                                {stat.number}
+                            </motion.h3>
+
+                            <p className="text-sm text-muted-foreground font-medium">
+                                {stat.label}
+                            </p>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}
diff --git a/components/companies/HostingHero.tsx b/components/companies/HostingHero.tsx
new file mode 100644
index 00000000..ccad5177
--- /dev/null
+++ b/components/companies/HostingHero.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Button } from "@/components/ui/button"
+import { Building2, Sparkles, ArrowRight } from "lucide-react"
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+
+export function HostingHero() {
+    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>For Organizations</span>
+                                    <span>
+                                        <Building2 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 lg:text-7xl font-bold tracking-tight leading-tight"
+                    >
+                        Host Events That{" "}
+                        <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",
+                            }}
+                        >
+                            Matter
+                        </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"
+                    >
+                        Empower your company to engage the developer community. Create verified events, hackathons, and workshops with powerful team collaboration and analytics.
+                    </motion.p>
+
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.5, delay: 0.4 }}
+                        className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4"
+                    >
+                        <Button
+                            size="lg"
+                            className="bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 text-white px-8 py-6 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105"
+                            asChild
+                        >
+                            <Link href="/companies/register" className="flex items-center gap-2">
+                                Register Your Company
+                                <ArrowRight className="w-5 h-5" />
+                            </Link>
+                        </Button>
+
+                        <Button
+                            size="lg"
+                            variant="outline"
+                            className="px-8 py-6 text-lg font-semibold hover:scale-105 transition-all duration-300"
+                            asChild
+                        >
+                            <Link href="/companies">Browse Companies</Link>
+                        </Button>
+                    </motion.div>
+
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ duration: 0.5, delay: 0.5 }}
+                        className="flex items-center justify-center gap-8 pt-8 text-sm text-muted-foreground"
+                    >
+                        <div className="flex items-center gap-2">
+                            <Sparkles className="w-4 h-4 text-primary" />
+                            <span>Free for verified companies</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <Sparkles className="w-4 h-4 text-primary" />
+                            <span>24-48 hour verification</span>
+                        </div>
+                    </motion.div>
+                </div>
+            </motion.div>
+        </section>
+    )
+}
diff --git a/components/companies/HowItWorksSection.tsx b/components/companies/HowItWorksSection.tsx
new file mode 100644
index 00000000..2e26dda2
--- /dev/null
+++ b/components/companies/HowItWorksSection.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { CheckCircle, FileCheck, Rocket } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const steps = [
+    {
+        number: "01",
+        icon: FileCheck,
+        title: "Register Your Company",
+        description: "Fill out the registration form with company details, upload verification documents, and submit for review.",
+        gradient: "from-blue-500 to-cyan-500",
+    },
+    {
+        number: "02",
+        icon: CheckCircle,
+        title: "Get Verified",
+        description: "Our admin team reviews your application within 24-48 hours. Receive email notification upon approval.",
+        gradient: "from-purple-500 to-pink-500",
+    },
+    {
+        number: "03",
+        icon: Rocket,
+        title: "Start Hosting Events",
+        description: "Access your dashboard, invite team members, create events, and engage with the developer community.",
+        gradient: "from-orange-500 to-red-500",
+    },
+]
+
+export function HowItWorksSection() {
+    return (
+        <section className="py-20 bg-gradient-to-b from-muted/30 to-background relative overflow-hidden">
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.05),transparent_70%)]"></div>
+
+            <div className="container px-4 mx-auto relative z-10">
+                <motion.div
+                    className="text-center space-y-6 mb-16"
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6 }}
+                    viewport={{ once: true }}
+                >
+                    <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>Simple Process</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>
+
+                    <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold">
+                        Get Started in{" "}
+                        <span className="bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">
+                            3 Simple Steps
+                        </span>
+                    </h2>
+
+                    <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+                        From registration to hosting your first event in just a few days
+                    </p>
+                </motion.div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+                    {steps.map((step, index) => (
+                        <motion.div
+                            key={index}
+                            initial={{ opacity: 0, y: 30 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.6, delay: index * 0.2 }}
+                            viewport={{ once: true }}
+                            whileHover={{ y: -8, transition: { duration: 0.3 } }}
+                            className="relative"
+                        >
+                            <div className="h-full bg-background/50 backdrop-blur-sm border border-primary/10 rounded-2xl p-8 space-y-6 hover:border-primary/20 transition-all duration-300 hover:shadow-lg">
+                                {/* Step Number */}
+                                <div className="flex items-start justify-between">
+                                    <span className="text-6xl font-bold text-primary/10">
+                                        {step.number}
+                                    </span>
+                                    <motion.div
+                                        className={cn(
+                                            "w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg",
+                                            `bg-gradient-to-br ${step.gradient}`
+                                        )}
+                                        whileHover={{
+                                            rotate: [0, -10, 10, 0],
+                                            transition: { duration: 0.5 },
+                                        }}
+                                    >
+                                        <step.icon className="h-8 w-8 text-white" />
+                                    </motion.div>
+                                </div>
+
+                                {/* Content */}
+                                <div className="space-y-3">
+                                    <h3 className="text-2xl font-bold">{step.title}</h3>
+                                    <p className="text-muted-foreground leading-relaxed">
+                                        {step.description}
+                                    </p>
+                                </div>
+
+                                {/* Connector Line (except for last item) */}
+                                {index < steps.length - 1 && (
+                                    <div className="hidden md:block absolute top-1/2 -right-4 w-8 h-0.5 bg-gradient-to-r from-primary/50 to-transparent"></div>
+                                )}
+                            </div>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}
diff --git a/components/footer.tsx b/components/footer.tsx
index 0fa68178..8040a94c 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -115,6 +115,12 @@ export default function Footer() {
                 >
                   About Us
                 </Link>
+                <Link
+                  href="/companies"
+                  className="block text-sm text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
+                >
+                  Browse Companies
+                </Link>
                 <Link
                   href="/hackathons"
                   className="block text-sm text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
diff --git a/components/header.tsx b/components/header.tsx
index c4a65997..4b71ffb7 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -68,6 +68,7 @@ export default function Header() {
   const navItems = [
     { href: "/", label: "Home" },
     { href: "/about", label: "About" },
+    { href: "/companies", label: "Companies" },
     { href: "/opportunities", label: "Opportunities" },
     { href: "/zenith-hall", label: "Zenith Hall" },
     { href: "/blog", label: "Blog" },
@@ -93,15 +94,15 @@ export default function Header() {
                 key={item.href}
                 href={item.href}
                 className={`text-sm font-medium transition-colors relative group ${isActive(item.href)
-                    ? "text-primary"
-                    : "text-foreground hover:text-primary"
+                  ? "text-primary"
+                  : "text-foreground hover:text-primary"
                   }`}
               >
                 {item.label}
                 <span
                   className={`absolute -bottom-1 left-0 h-0.5 bg-primary transition-all duration-300 ${isActive(item.href)
-                      ? "w-full"
-                      : "w-0 group-hover:w-full"
+                    ? "w-full"
+                    : "w-0 group-hover:w-full"
                     }`}
                 ></span>
               </Link>
@@ -189,8 +190,8 @@ export default function Header() {
                       key={item.href}
                       href={item.href}
                       className={`block text-sm font-medium transition-colors py-2.5 px-3 rounded-md relative ${isActive(item.href)
-                          ? "text-primary font-semibold bg-primary/10"
-                          : "text-foreground hover:text-primary hover:bg-muted/50"
+                        ? "text-primary font-semibold bg-primary/10"
+                        : "text-foreground hover:text-primary hover:bg-muted/50"
                         }`}
                       onClick={() => setIsMenuOpen(false)}
                     >
diff --git a/components/home/OrganizationsSection.tsx b/components/home/OrganizationsSection.tsx
new file mode 100644
index 00000000..695c89e2
--- /dev/null
+++ b/components/home/OrganizationsSection.tsx
@@ -0,0 +1,142 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Button } from "@/components/ui/button"
+import { Building2, Users, ArrowRight, Sparkles } from "lucide-react"
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+
+const features = [
+    {
+        icon: Building2,
+        title: "Verified Company Profiles",
+        description: "Build credibility with verified badges. Showcase your brand to 3000+ developers with custom company pages.",
+        gradient: "from-blue-500 to-cyan-500",
+    },
+    {
+        icon: Sparkles,
+        title: "Event & Hackathon Management",
+        description: "Create unlimited events and hackathons. Built-in registration, participant tracking, and real-time analytics.",
+        gradient: "from-purple-500 to-pink-500",
+    },
+    {
+        icon: Users,
+        title: "Team Collaboration",
+        description: "Invite team members with role-based access. Owner, Admin, Editor, and Viewer roles for collaborative event creation.",
+        gradient: "from-green-500 to-emerald-500",
+    },
+]
+
+export function OrganizationsSection() {
+    return (
+        <section className="py-20 md:py-24 bg-gradient-to-b from-background to-muted/30 relative overflow-hidden">
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.05),transparent_70%)]"></div>
+
+            <div className="container px-4 mx-auto relative z-10">
+                <motion.div
+                    className="text-center space-y-6 mb-16"
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6 }}
+                    viewport={{ once: true }}
+                >
+                    <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>For Organizations</span>
+                                <span>
+                                    <Building2 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>
+
+                    <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight">
+                        Host Events &{" "}
+                        <span className="bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">
+                            Engage Developers
+                        </span>
+                    </h2>
+
+                    <p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+                        Empower your organization to create, manage, and promote tech events at scale
+                    </p>
+                </motion.div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto mb-12">
+                    {features.map((feature, index) => (
+                        <motion.div
+                            key={index}
+                            initial={{ opacity: 0, y: 30 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.6, delay: index * 0.1 }}
+                            viewport={{ once: true }}
+                            whileHover={{ y: -8, transition: { duration: 0.3 } }}
+                            className="relative"
+                        >
+                            <div className="h-full bg-background/50 backdrop-blur-sm border border-primary/10 rounded-2xl p-8 space-y-6 hover:border-primary/20 transition-all duration-300 hover:shadow-lg group">
+                                <motion.div
+                                    className={cn(
+                                        "w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg",
+                                        `bg-gradient-to-br ${feature.gradient}`
+                                    )}
+                                    whileHover={{
+                                        rotate: [0, -10, 10, 0],
+                                        transition: { duration: 0.5 },
+                                    }}
+                                >
+                                    <feature.icon className="h-8 w-8 text-white" />
+                                </motion.div>
+
+                                <div className="space-y-3">
+                                    <h3 className="text-2xl font-bold">{feature.title}</h3>
+                                    <p className="text-muted-foreground leading-relaxed">
+                                        {feature.description}
+                                    </p>
+                                </div>
+                            </div>
+                        </motion.div>
+                    ))}
+                </div>
+
+                <motion.div
+                    className="text-center"
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 0.4 }}
+                    viewport={{ once: true }}
+                >
+                    <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+                        <Button
+                            size="lg"
+                            className="bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 text-white px-8 py-6 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105"
+                            asChild
+                        >
+                            <Link href="/companies/host" className="flex items-center gap-2">
+                                Learn More
+                                <ArrowRight className="w-5 h-5" />
+                            </Link>
+                        </Button>
+
+                        <Button
+                            size="lg"
+                            variant="outline"
+                            className="px-8 py-6 text-lg font-semibold hover:scale-105 transition-all duration-300"
+                            asChild
+                        >
+                            <Link href="/companies">Browse Companies</Link>
+                        </Button>
+                    </div>
+
+                    <p className="mt-6 text-sm text-muted-foreground">
+                        Join 50+ verified companies already hosting events on Codeunia
+                    </p>
+                </motion.div>
+            </div>
+        </section>
+    )
+}