feat(companies): Add company hosting page and organization promotion sections

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>
+    )
+}

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>
   )

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>
     </>
   )

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>
+    )
+}

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>
+    )
+}