feat(raise): add RaiseIncubator page assets and component files

src/pages/RaiseIncubator/components/AboutSection.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { BookOpen, Target, Sparkles, Milestone, Award, Lightbulb, Cpu, ShieldCheck } from 'lucide-react';
+
+export const AboutSection: React.FC = () => {
+  const offerings = [
+    { icon: <Milestone className="w-5 h-5 text-neutral-800" />, name: "Guidance & Training" },
+    { icon: <Cpu className="w-5 h-5 text-neutral-800" />, name: "Infrastructure support" },
+    { icon: <Target className="w-5 h-5 text-neutral-800" />, name: "1-on-1 Mentorship" },
+    { icon: <Award className="w-5 h-5 text-neutral-800" />, name: "Seed Funding Support" },
+    { icon: <Sparkles className="w-5 h-5 text-neutral-800" />, name: "IPR & Patent Filing" },
+    { icon: <ShieldCheck className="w-5 h-5 text-neutral-800" />, name: "Networking Events" }
+  ];
+
+  const curriculumPoints = [
+    { title: "Academic Ideation", desc: "Formulate ideas with solid validation and engineering frameworks built into your college curriculum." },
+    { title: "Business Model Design", desc: "Map your target market, construct unit economics, and define your revenue capture strategy." },
+    { title: "IPR & Pitch Readiness", desc: "Gain legal structures, learn patent filing mechanics, and polish your investor-facing deck." }
+  ];
+
+  return (
+    <section 
+      id="about" 
+      className="relative w-full py-24 md:py-32 px-6 md:px-12 bg-white overflow-hidden"
+    >
+      <div className="absolute top-0 right-1/3 w-96 h-96 bg-brand-orange/5 rounded-full blur-[120px] pointer-events-none" />
+      
+      <div className="max-w-7xl mx-auto space-y-24 md:space-y-32">
+        {/* Core Vision & Mission */}
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
+          <motion.div 
+            initial={{ opacity: 0, x: -30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="lg:col-span-5 space-y-6"
+          >
+            <span className="font-sans text-xs font-bold uppercase tracking-widest text-[#e91e63] bg-[#e91e63]/10 px-3.5 py-1.5 rounded-full">
+              Who We Are
+            </span>
+            <h2 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-900 tracking-tight leading-none">
+              Empowering Student Founders
+            </h2>
+            <p className="font-sans text-sm md:text-base text-neutral-500 leading-relaxed">
+              RAISE Incubator is a dedicated Section 8 (not-for-profit) company situated directly within the Rajalakshmi Institute of Technology campus. We transform engineering ideas into market-viable products.
+            </p>
+            
+            {/* Offerings Icons List */}
+            <div className="pt-6">
+              <h4 className="font-heading font-bold text-xs uppercase tracking-wider text-neutral-400 mb-4">
+                What We Provide
+              </h4>
+              <div className="grid grid-cols-2 gap-4">
+                {offerings.map((item, i) => (
+                  <div key={i} className="flex items-center gap-2.5">
+                    <div className="p-2 bg-neutral-50 border border-neutral-200/50 rounded-lg">
+                      {item.icon}
+                    </div>
+                    <span className="font-sans text-xs font-bold text-neutral-700">{item.name}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+
+          <motion.div 
+            initial={{ opacity: 0, x: 30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-6"
+          >
+            {/* Vision Card */}
+            <div className="bg-neutral-50 rounded-3xl p-6 md:p-8 border border-neutral-200/60 shadow-premium">
+              <div className="w-12 h-12 rounded-xl bg-neutral-900 text-white flex items-center justify-center mb-6">
+                <Target className="w-6 h-6" />
+              </div>
+              <h3 className="font-heading text-xl font-bold text-neutral-900 mb-3">Our Vision</h3>
+              <p className="font-sans text-xs md:text-sm text-neutral-500 leading-relaxed">
+                To create a vibrant innovation and entrepreneurship ecosystem that transforms ideas into impactful startups, fosters industry-relevant technologies, and nurtures socially responsible innovators.
+              </p>
+            </div>
+
+            {/* Mission Card */}
+            <div className="bg-neutral-50 rounded-3xl p-6 md:p-8 border border-neutral-200/60 shadow-premium">
+              <div className="w-12 h-12 rounded-xl bg-neutral-900 text-white flex items-center justify-center mb-6">
+                <Lightbulb className="w-6 h-6" />
+              </div>
+              <h3 className="font-heading text-xl font-bold text-neutral-900 mb-3">Our Mission</h3>
+              <ul className="font-sans text-xs md:text-sm text-neutral-500 space-y-3 list-disc pl-4 leading-relaxed">
+                <li>Promote entrepreneurial thinking among students & faculty through structured ideation.</li>
+                <li>Facilitate industry partnerships, IP/Patent creation, and critical seed funding.</li>
+                <li>Align initiatives with national missions for long-term societal and economic impact.</li>
+              </ul>
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Unique Differentiator - Academic Course */}
+        <div className="relative rounded-3xl bg-neutral-950 text-white p-8 md:p-16 border border-neutral-800 shadow-2xl overflow-hidden">
+          {/* Subtle decoration */}
+          <div className="absolute right-0 bottom-0 w-80 h-80 bg-brand-pink/10 rounded-full blur-[100px] pointer-events-none" />
+          
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center relative z-10">
+            <div className="lg:col-span-5 space-y-6">
+              <span className="font-sans text-xs font-bold uppercase tracking-widest text-yellow-400 bg-yellow-400/10 px-3.5 py-1.5 rounded-full border border-yellow-400/20">
+                Unique Differentiator
+              </span>
+              <h2 className="font-heading text-3xl md:text-4xl font-extrabold tracking-tight leading-none">
+                Not Just a Club. <br />An Academic Course.
+              </h2>
+              <p className="font-sans text-xs md:text-sm text-neutral-400 leading-relaxed">
+                RAISE is different from regular university incubators. We integrate entrepreneurship as a structured academic course for RIT students.
+              </p>
+              <div className="flex items-center gap-3">
+                <div className="p-3 bg-neutral-800 rounded-xl">
+                  <BookOpen className="w-6 h-6 text-yellow-400" />
+                </div>
+                <div>
+                  <span className="font-heading font-bold text-sm block">Structured Syllabus</span>
+                  <span className="font-sans text-xs text-neutral-400">Earn course credits while launching a company.</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Differentiator Milestones */}
+            <div className="lg:col-span-7 space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {curriculumPoints.map((point, index) => (
+                  <div key={index} className="bg-neutral-900 border border-neutral-800 rounded-2xl p-5 space-y-3">
+                    <span className="font-heading font-extrabold text-sm text-neutral-600">0{index + 1}</span>
+                    <h4 className="font-heading font-bold text-sm text-white">{point.title}</h4>
+                    <p className="font-sans text-xs text-neutral-400 leading-relaxed">{point.desc}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};

src/pages/RaiseIncubator/components/FooterContact.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import { MapPin, Phone, Mail, Landmark, ExternalLink, User } from 'lucide-react';
+import raiseLogo from '../assets/Raiselogo.png';
+
+interface FooterProps {
+  onScrollToSection: (sectionId: string) => void;
+}
+
+export const FooterContact: React.FC<FooterProps> = ({ onScrollToSection }) => {
+  return (
+    <footer 
+      id="contact" 
+      className="relative w-full bg-white border-t border-neutral-200/60 pt-20 pb-10 px-6 md:px-12 grid-bg"
+    >
+      <div className="max-w-7xl mx-auto space-y-16">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8">
+          
+          {/* Brand Column */}
+          <div className="lg:col-span-4 space-y-6">
+            <div className="flex items-center gap-3">
+              <img src={raiseLogo} alt="RAISE Incubator Logo" className="h-10 w-auto object-contain rounded-lg" />
+              <div>
+                <span className="font-heading font-extrabold text-lg tracking-tight text-neutral-900 block leading-none">RAISE</span>
+                <span className="font-sans font-semibold text-[9px] text-neutral-400 uppercase tracking-wider block mt-1">
+                  Incubation Cell
+                </span>
+              </div>
+            </div>
+            
+            <p className="font-sans text-xs md:text-sm text-neutral-400 leading-relaxed max-w-sm">
+              Rajalakshmi Accelerator & Incubator for Startup Enterprises Association (RAISE) is a Sec 8 Not-For-Profit company built to elevate student builders at Rajalakshmi Institute of Technology.
+            </p>
+            
+            <div className="flex items-center gap-2 pt-2 text-xs font-semibold text-neutral-500">
+              <Landmark className="w-4 h-4 text-neutral-400" />
+              <span>Affiliated with Rajalakshmi Institute of Technology</span>
+            </div>
+          </div>
+
+          {/* Quick Links Column */}
+          <div className="lg:col-span-3 space-y-6">
+            <h3 className="font-heading font-bold text-xs uppercase tracking-wider text-neutral-400">
+              Quick Navigation
+            </h3>
+            <div className="flex flex-col gap-3">
+              <button 
+                onClick={() => onScrollToSection('about')}
+                className="font-sans text-sm font-semibold text-neutral-600 hover:text-neutral-900 transition-colors text-left"
+              >
+                About Incubator
+              </button>
+              <button 
+                onClick={() => onScrollToSection('process')}
+                className="font-sans text-sm font-semibold text-neutral-600 hover:text-neutral-900 transition-colors text-left"
+              >
+                Incubation Pathway
+              </button>
+              <button 
+                onClick={() => onScrollToSection('stats')}
+                className="font-sans text-sm font-semibold text-neutral-600 hover:text-neutral-900 transition-colors text-left"
+              >
+                Our Metrics
+              </button>
+              <button 
+                onClick={() => onScrollToSection('portfolio')}
+                className="font-sans text-sm font-semibold text-neutral-600 hover:text-neutral-900 transition-colors text-left"
+              >
+                Startups Directory
+              </button>
+              <button 
+                onClick={() => onScrollToSection('pitch')}
+                className="font-sans text-sm font-semibold text-neutral-600 hover:text-neutral-900 transition-colors text-left"
+              >
+                Pitch Session Request
+              </button>
+            </div>
+          </div>
+
+          {/* Contact Details Column */}
+          <div className="lg:col-span-5 space-y-6">
+            <h3 className="font-heading font-bold text-xs uppercase tracking-wider text-neutral-400">
+              Contact & Location
+            </h3>
+            
+            <div className="space-y-6">
+              {/* Incubation Manager Contact Card */}
+              <div className="bg-neutral-50/50 border border-neutral-200/60 rounded-2xl p-5 space-y-4 shadow-sm">
+                <div className="flex gap-3 items-center">
+                  <div className="p-2 bg-neutral-100 border border-neutral-200/50 rounded-xl text-neutral-700">
+                    <User className="w-4 h-4" />
+                  </div>
+                  <div>
+                    <h4 className="font-heading font-extrabold text-[10px] text-neutral-400 uppercase tracking-widest leading-none">
+                      Incubation Manager
+                    </h4>
+                    <p className="font-heading font-bold text-sm text-neutral-900 mt-1.5">
+                      Mr. B. Aravind
+                    </p>
+                  </div>
+                </div>
+
+                <div className="space-y-3 pl-1">
+                  {/* Email */}
+                  <div className="flex items-center gap-2.5 text-xs">
+                    <Mail className="w-4 h-4 text-neutral-400" />
+                    <a 
+                      href="mailto:aravind.b@ritchennai.edu.in" 
+                      className="font-sans font-semibold text-neutral-500 hover:text-neutral-900 hover:underline transition-all"
+                    >
+                      aravind.b@ritchennai.edu.in
+                    </a>
+                  </div>
+
+                  {/* Phone */}
+                  <div className="flex items-center gap-2.5 text-xs">
+                    <Phone className="w-4 h-4 text-neutral-400" />
+                    <a 
+                      href="tel:+918838976942" 
+                      className="font-sans font-semibold text-neutral-500 hover:text-neutral-900 hover:underline transition-all"
+                    >
+                      +91 88389 76942
+                    </a>
+                  </div>
+
+                  {/* Office */}
+                  <div className="flex items-start gap-2.5 text-xs leading-normal">
+                    <Landmark className="w-4 h-4 text-neutral-400 mt-0.5 flex-shrink-0" />
+                    <span className="font-sans text-neutral-500">
+                      <strong>Office:</strong> C Block 3rd floor, C306,<br />Panel 4 Inside Placement Cell
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Address */}
+              <div className="flex gap-3.5 items-start pl-1 pt-2">
+                <div className="p-2 bg-neutral-50 border border-neutral-200/50 rounded-lg text-neutral-600 mt-1">
+                  <MapPin className="w-4 h-4" />
+                </div>
+                <div>
+                  <h4 className="font-heading font-bold text-xs text-neutral-800 uppercase tracking-wide">
+                    Campus Lab Address
+                  </h4>
+                  <p className="font-sans text-xs md:text-sm text-neutral-400 leading-relaxed max-w-sm mt-1">
+                    C Block 3rd floor, C306,<br />
+                    Panel 4 Inside Placement Cell,<br />
+                    RIT Campus, Chennai – 600124.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer Bottom Bar */}
+        <div className="border-t border-neutral-200/60 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs font-semibold text-neutral-400">
+          <div>
+            &copy; {new Date().getFullYear()} RAISE Incubation Cell. All rights reserved.
+          </div>
+          <div className="flex gap-6">
+            <a 
+              href="https://www.ritchennai.org" 
+              target="_blank" 
+              rel="noreferrer" 
+              className="hover:text-neutral-900 flex items-center gap-1 transition-colors"
+            >
+              ritchennai.org <ExternalLink className="w-3.5 h-3.5" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};

src/pages/RaiseIncubator/components/PitchBooking.tsx

@@ -0,0 +1,376 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Calendar, User, Mail, GraduationCap, FileText, CheckCircle, Clock } from 'lucide-react';
+
+export const PitchBooking: React.FC = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    department: '',
+    projectTitle: '',
+    uniqueness: '',
+    slotDate: '',
+    slotTime: ''
+  });
+
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    
+    if (name === 'slotDate' && value) {
+      const date = new Date(value);
+      const day = date.getUTCDay();
+      if (day === 6 || day === 0) {
+        setErrors(prev => ({ 
+          ...prev, 
+          slotDate: 'Sessions cannot be scheduled on weekends (Saturday/Sunday)' 
+        }));
+        setFormData(prev => ({ ...prev, slotDate: '' }));
+        return;
+      }
+    }
+
+    setFormData(prev => ({ ...prev, [name]: value }));
+    if (errors[name]) {
+      setErrors(prev => {
+        const next = { ...prev };
+        delete next[name];
+        return next;
+      });
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+    if (!formData.name.trim()) newErrors.name = 'Full name is required';
+    if (!formData.email.trim()) {
+      newErrors.email = 'RIT student email is required';
+    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+      newErrors.email = 'Please enter a valid email address';
+    }
+    if (!formData.department) newErrors.department = 'Department is required';
+    if (!formData.projectTitle.trim()) newErrors.projectTitle = 'Project title is required';
+    if (!formData.uniqueness.trim()) {
+      newErrors.uniqueness = 'Please explain what makes your project unique';
+    } else if (formData.uniqueness.trim().length < 20) {
+      newErrors.uniqueness = 'Please provide a more detailed description (min 20 characters)';
+    }
+    if (!formData.slotDate) {
+      newErrors.slotDate = 'Please select a date';
+    } else {
+      const date = new Date(formData.slotDate);
+      const day = date.getUTCDay();
+      if (day === 6 || day === 0) {
+        newErrors.slotDate = 'Sessions cannot be scheduled on weekends (Saturday/Sunday)';
+      }
+    }
+    if (!formData.slotTime) newErrors.slotTime = 'Please select a time slot';
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (validateForm()) {
+      setIsSubmitting(true);
+      // Simulate API submit delay
+      setTimeout(() => {
+        setIsSubmitting(false);
+        setIsSubmitted(true);
+      }, 1500);
+    }
+  };
+
+  const timeSlots = [
+    "09:00 AM - 11:00 AM",
+    "11:00 AM - 01:00 PM",
+    "01:00 PM - 03:00 PM"
+  ];
+
+  return (
+    <section 
+      id="pitch" 
+      className="relative w-full py-24 md:py-32 px-6 md:px-12 bg-neutral-50/50 border-t border-neutral-100 overflow-hidden flex flex-col items-center"
+    >
+      <div className="absolute bottom-0 left-1/4 w-[600px] h-[600px] bg-gradient-to-br from-brand-pink/5 to-brand-purple/5 rounded-full blur-[150px] pointer-events-none" />
+
+      {/* Header */}
+      <div className="max-w-4xl text-center mb-16 z-10">
+        <span className="font-sans text-xs font-bold uppercase tracking-widest text-[#e91e63] bg-[#e91e63]/10 px-3.5 py-1.5 rounded-full">
+          Work With Us
+        </span>
+        <h2 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-900 mt-4 mb-6 tracking-tight">
+          Pitch Your Startup Idea
+        </h2>
+        <p className="font-sans text-sm md:text-base text-neutral-500 max-w-2xl mx-auto leading-relaxed">
+          Ready to present? Secure a time slot with our RAISE Incubation Manager, <span className="font-semibold text-neutral-800">Mr. B. Aravind</span>. Once approved, the project will be fast-tracked to college administration for seed grant checks up to <span className="font-bold text-neutral-800">₹20,000</span>.
+        </p>
+      </div>
+
+      <div className="w-full max-w-3xl z-10">
+        <AnimatePresence mode="wait">
+          {!isSubmitted ? (
+            <motion.form
+              key="booking-form"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+              onSubmit={handleSubmit}
+              className="bg-white rounded-3xl p-6 md:p-10 border border-neutral-200/60 shadow-premium space-y-6 md:space-y-8"
+            >
+              {/* Form Grid */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Founder Name */}
+                <div className="flex flex-col gap-2">
+                  <label htmlFor="name" className="font-sans text-xs font-bold text-neutral-700 uppercase tracking-wider flex items-center gap-1.5">
+                    <User className="w-4 h-4 text-neutral-400" /> Full Name
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleInputChange}
+                    placeholder="Enter full name"
+                    className={`px-4 py-3 rounded-xl border font-sans text-sm outline-none transition-all ${
+                      errors.name ? 'border-red-400 focus:border-red-500 bg-red-50/10' : 'border-neutral-200 focus:border-neutral-950'
+                    }`}
+                  />
+                  {errors.name && <span className="font-sans text-xs text-red-500 font-semibold">{errors.name}</span>}
+                </div>
+
+                {/* Email Address */}
+                <div className="flex flex-col gap-2">
+                  <label htmlFor="email" className="font-sans text-xs font-bold text-neutral-700 uppercase tracking-wider flex items-center gap-1.5">
+                    <Mail className="w-4 h-4 text-neutral-400" /> RIT Student Email
+                  </label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    placeholder="studentname@ritchennai.edu.in"
+                    className={`px-4 py-3 rounded-xl border font-sans text-sm outline-none transition-all ${
+                      errors.email ? 'border-red-400 focus:border-red-500 bg-red-50/10' : 'border-neutral-200 focus:border-neutral-950'
+                    }`}
+                  />
+                  {errors.email && <span className="font-sans text-xs text-red-500 font-semibold">{errors.email}</span>}
+                </div>
+
+                {/* Department */}
+                <div className="flex flex-col gap-2">
+                  <label htmlFor="department" className="font-sans text-xs font-bold text-neutral-700 uppercase tracking-wider flex items-center gap-1.5">
+                    <GraduationCap className="w-4 h-4 text-neutral-400" /> Department
+                  </label>
+                  <select
+                    id="department"
+                    name="department"
+                    value={formData.department}
+                    onChange={handleInputChange}
+                    className={`px-4 py-3 rounded-xl border font-sans text-sm outline-none bg-white transition-all ${
+                      errors.department ? 'border-red-400 focus:border-red-500 bg-red-50/10' : 'border-neutral-200 focus:border-neutral-950'
+                    }`}
+                  >
+                    <option value="">Select your department</option>
+                    <option value="Artificial Intelligence and Data Science">Artificial Intelligence and Data Science</option>
+                    <option value="Computer Science and Engineering">Computer Science and Engineering</option>
+                    <option value="Computer Science and Engineering (AI & ML)">Computer Science and Engineering (AI & ML)</option>
+                    <option value="Computer Science and Business Systems">Computer Science and Business Systems</option>
+                    <option value="Computer and Communication Engineering">Computer and Communication Engineering</option>
+                    <option value="Electrical and Communication Engineering">Electrical and Communication Engineering</option>
+                    <option value="EE(VLSI)">EE(VLSI)</option>
+                    <option value="Mechanical Engineering">Mechanical Engineering</option>
+                    <option value="Biotechnology">Biotechnology</option>
+                    <option value="Other / Interdisciplinary">Other / Interdisciplinary</option>
+                  </select>
+                  {errors.department && <span className="font-sans text-xs text-red-500 font-semibold">{errors.department}</span>}
+                </div>
+
+                {/* Project Title */}
+                <div className="flex flex-col gap-2">
+                  <label htmlFor="projectTitle" className="font-sans text-xs font-bold text-neutral-700 uppercase tracking-wider flex items-center gap-1.5">
+                    <FileText className="w-4 h-4 text-neutral-400" /> Project / Startup Title
+                  </label>
+                  <input
+                    type="text"
+                    id="projectTitle"
+                    name="projectTitle"
+                    value={formData.projectTitle}
+                    onChange={handleInputChange}
+                    placeholder="Enter project name"
+                    className={`px-4 py-3 rounded-xl border font-sans text-sm outline-none transition-all ${
+                      errors.projectTitle ? 'border-red-400 focus:border-red-500 bg-red-50/10' : 'border-neutral-200 focus:border-neutral-950'
+                    }`}
+                  />
+                  {errors.projectTitle && <span className="font-sans text-xs text-red-500 font-semibold">{errors.projectTitle}</span>}
+                </div>
+              </div>
+
+              {/* Uniqueness description */}
+              <div className="flex flex-col gap-2">
+                <div className="flex justify-between items-center">
+                  <label htmlFor="uniqueness" className="font-sans text-xs font-bold text-neutral-700 uppercase tracking-wider">
+                    Uniqueness & Problem Solved
+                  </label>
+                  <span className="font-sans text-[10px] md:text-xs font-semibold text-neutral-400">
+                    Required for Incubation Manager approval
+                  </span>
+                </div>
+                <textarea
+                  id="uniqueness"
+                  name="uniqueness"
+                  rows={4}
+                  value={formData.uniqueness}
+                  onChange={handleInputChange}
+                  placeholder="Explain why your project idea is unique, what problem it solves, and how it is technically viable."
+                  className={`px-4 py-3 rounded-xl border font-sans text-sm outline-none resize-y transition-all ${
+                    errors.uniqueness ? 'border-red-400 focus:border-red-500 bg-red-50/10' : 'border-neutral-200 focus:border-neutral-950'
+                  }`}
+                />
+                {errors.uniqueness && <span className="font-sans text-xs text-red-500 font-semibold">{errors.uniqueness}</span>}
+              </div>
+
+              {/* Slot Scheduling Title */}
+              <div className="border-t border-neutral-100 pt-6">
+                <h3 className="font-heading font-bold text-base text-neutral-900 mb-4 flex items-center gap-2">
+                  <Calendar className="w-5 h-5 text-neutral-600" /> Select Pitch Session Slot
+                </h3>
+                
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                  {/* Date Input */}
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="slotDate" className="font-sans text-xs font-bold text-neutral-700 uppercase tracking-wider flex justify-between">
+                      <span>Presentation Date</span>
+                      <span className="text-neutral-400 font-semibold text-[10px] normal-case">Mon - Fri only</span>
+                    </label>
+                    <input
+                      type="date"
+                      id="slotDate"
+                      name="slotDate"
+                      value={formData.slotDate}
+                      onChange={handleInputChange}
+                      min={new Date().toISOString().split('T')[0]} // limit to future dates
+                      className={`px-4 py-3 rounded-xl border font-sans text-sm outline-none bg-white transition-all ${
+                        errors.slotDate ? 'border-red-400 focus:border-red-500 bg-red-50/10' : 'border-neutral-200 focus:border-neutral-950'
+                      }`}
+                    />
+                    {errors.slotDate && <span className="font-sans text-xs text-red-500 font-semibold">{errors.slotDate}</span>}
+                  </div>
+
+                  {/* Time slot buttons */}
+                  <div className="flex flex-col gap-2">
+                    <label className="font-sans text-xs font-bold text-neutral-700 uppercase tracking-wider flex justify-between">
+                      <span>Time Slot</span>
+                      <span className="text-neutral-400 font-semibold text-[10px] normal-case">9:00 AM - 3:00 PM</span>
+                    </label>
+                    <div className="grid grid-cols-1 gap-2">
+                      {timeSlots.map((slot) => (
+                        <button
+                          type="button"
+                          key={slot}
+                          onClick={() => handleInputChange({ target: { name: 'slotTime', value: slot } } as any)}
+                          className={`px-4 py-2.5 rounded-xl border font-sans text-xs font-semibold text-left transition-all ${
+                            formData.slotTime === slot
+                              ? 'bg-neutral-950 border-neutral-950 text-white shadow-md'
+                              : 'bg-neutral-50 hover:bg-neutral-100 border-neutral-200 text-neutral-600 hover:text-neutral-900'
+                          }`}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Clock className="w-3.5 h-3.5" />
+                            {slot}
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                    {errors.slotTime && <span className="font-sans text-xs text-red-500 font-semibold">{errors.slotTime}</span>}
+                  </div>
+                </div>
+              </div>
+
+              {/* Submit Action */}
+              <div className="pt-2">
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="w-full relative py-4 rounded-xl bg-neutral-950 hover:bg-neutral-850 text-white font-sans text-sm font-bold shadow-xl shadow-neutral-950/15 transition-all duration-300 hover:scale-[1.01] active:scale-[0.99] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                >
+                  {isSubmitting ? (
+                    <>
+                      <div className="w-5 h-5 rounded-full border-2 border-white/20 border-t-white animate-spin" />
+                      Scheduling Session...
+                    </>
+                  ) : (
+                    "Submit Pitch Request"
+                  )}
+                </button>
+              </div>
+            </motion.form>
+          ) : (
+            <motion.div
+              key="booking-success"
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+              className="bg-white rounded-3xl p-8 md:p-12 border border-neutral-200/60 shadow-premium text-center flex flex-col items-center"
+            >
+              <div className="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mb-6">
+                <CheckCircle className="w-10 h-10 text-emerald-600" />
+              </div>
+
+              <h3 className="font-heading text-2xl md:text-3xl font-extrabold text-neutral-900 mb-2">
+                Showcase Session Scheduled!
+              </h3>
+              <p className="font-sans text-sm md:text-base text-neutral-500 max-w-md mb-8">
+                Your pitch request has been successfully queued for review by the Incubation Manager. We have sent a confirmation email containing review guidelines to your mailbox.
+              </p>
+
+              {/* Summary Receipt */}
+              <div className="w-full bg-neutral-50 rounded-2xl p-6 border border-neutral-200/40 text-left space-y-4 max-w-md mb-8">
+                <div className="flex justify-between items-center text-xs border-b border-neutral-200/50 pb-2">
+                  <span className="font-bold text-neutral-400 uppercase">Project</span>
+                  <span className="font-bold text-neutral-800">{formData.projectTitle}</span>
+                </div>
+                <div className="flex justify-between items-center text-xs border-b border-neutral-200/50 pb-2">
+                  <span className="font-bold text-neutral-400 uppercase">Founder</span>
+                  <span className="font-semibold text-neutral-700">{formData.name}</span>
+                </div>
+                <div className="flex justify-between items-center text-xs border-b border-neutral-200/50 pb-2">
+                  <span className="font-bold text-neutral-400 uppercase">Scheduled Date</span>
+                  <span className="font-semibold text-neutral-700">{formData.slotDate}</span>
+                </div>
+                <div className="flex justify-between items-center text-xs">
+                  <span className="font-bold text-neutral-400 uppercase">Time Slot</span>
+                  <span className="font-semibold text-neutral-700">{formData.slotTime}</span>
+                </div>
+              </div>
+
+              <button
+                onClick={() => {
+                  setFormData({
+                    name: '',
+                    email: '',
+                    department: '',
+                    projectTitle: '',
+                    uniqueness: '',
+                    slotDate: '',
+                    slotTime: ''
+                  });
+                  setIsSubmitted(false);
+                }}
+                className="px-6 py-3 rounded-xl border border-neutral-200 hover:border-neutral-400 font-sans text-xs font-semibold text-neutral-600 hover:text-neutral-900 transition-colors"
+              >
+                Schedule Another Pitch
+              </button>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </section>
+  );
+};

src/pages/RaiseIncubator/components/PortfolioShowcase.tsx

@@ -0,0 +1,323 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Sparkles, Layers, Box, TrendingUp, HelpCircle } from 'lucide-react';
+
+interface Startup {
+  name: string;
+  stage: 'commercialization' | 'mvp' | 'prototype' | 'idea';
+  domain: string;
+  description: string;
+  remarks: string;
+  color: string;
+}
+
+export const PortfolioShowcase: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<string>('all');
+
+  const startups: Startup[] = [
+    // Commercialisation
+    {
+      name: "Thrust.AI",
+      stage: "commercialization",
+      domain: "AI-based Systems",
+      description: "Advanced artificial intelligence solutions for automated decision-making pipelines.",
+      remarks: "Early users / revenue stage",
+      color: "bg-emerald-500"
+    },
+    {
+      name: "RIT Billbot",
+      stage: "commercialization",
+      domain: "Campus Solutions",
+      description: "Smart billing and administration utilities designed to optimize institution expenses.",
+      remarks: "Early users / revenue stage",
+      color: "bg-emerald-500"
+    },
+    {
+      name: "Machty",
+      stage: "commercialization",
+      domain: "Software Platform",
+      description: "Developer-focused orchestration suite for managing high-performance service endpoints.",
+      remarks: "Early users / revenue stage",
+      color: "bg-emerald-500"
+    },
+    {
+      name: "Num Thozhan Pvt Ltd",
+      stage: "commercialization",
+      domain: "Social Impact / SaaS",
+      description: "A collaborative social platform linking local volunteers to regional community development goals.",
+      remarks: "Early users / revenue stage",
+      color: "bg-emerald-500"
+    },
+    
+    // MVP
+    {
+      name: "Atomik Minds",
+      stage: "mvp",
+      domain: "AI-based Systems",
+      description: "Cognitive educational platforms providing personalised student learning paths.",
+      remarks: "Testing with users",
+      color: "bg-blue-500"
+    },
+    {
+      name: "Innsole",
+      stage: "mvp",
+      domain: "Hardware & Health",
+      description: "Smart footwear soles embedded with sensor arrays to monitor athletic gait and posture.",
+      remarks: "Testing with users",
+      color: "bg-blue-500"
+    },
+
+    // Prototype
+    {
+      name: "HydrofarmIQ",
+      stage: "prototype",
+      domain: "Agri-Tech / IoT",
+      description: "Automated hydroponics watering and nutritional delivery platform built with smart controllers.",
+      remarks: "Hardware/software prototype development",
+      color: "bg-amber-500"
+    },
+    {
+      name: "Cropguard",
+      stage: "prototype",
+      domain: "Agri-Tech / AI",
+      description: "Computer vision app scanning crop leaves to diagnose diseases and recommend treatments.",
+      remarks: "Hardware/software prototype development",
+      color: "bg-amber-500"
+    },
+    {
+      name: "RIT Printbot",
+      stage: "prototype",
+      domain: "Hardware & Robotics",
+      description: "High-resolution, cost-effective 3D printing robot tailored for mechanical labs.",
+      remarks: "Hardware/software prototype development",
+      color: "bg-amber-500"
+    },
+    {
+      name: "Ecotrack",
+      stage: "prototype",
+      domain: "Social Impact / Ecology",
+      description: "A carbon emission tracker helping organizations monitor and offset corporate footprints.",
+      remarks: "Hardware/software prototype development",
+      color: "bg-amber-500"
+    },
+    {
+      name: "BeautifyNet",
+      stage: "prototype",
+      domain: "Software Platform",
+      description: "A virtual makeup trial and booking assistant running on real-time neural models.",
+      remarks: "Hardware/software prototype development",
+      color: "bg-amber-500"
+    },
+    {
+      name: "RIT Transport App",
+      stage: "prototype",
+      domain: "Campus Solutions",
+      description: "Live shuttle and transport fleet tracker providing precise arrival estimates for RIT riders.",
+      remarks: "Hardware/software prototype development",
+      color: "bg-amber-500"
+    },
+    {
+      name: "SafeHer Travels",
+      stage: "prototype",
+      domain: "Social Impact / Security",
+      description: "An emergency response and location verification application dedicated to women travelers.",
+      remarks: "Hardware/software prototype development",
+      color: "bg-amber-500"
+    },
+    {
+      name: "Elroi Automations Pvt Ltd",
+      stage: "prototype",
+      domain: "Hardware & Automation",
+      description: "Smart switchboard relays enabling legacy appliance management via internet platforms.",
+      remarks: "Hardware/software prototype development",
+      color: "bg-amber-500"
+    },
+    {
+      name: "Mishara",
+      stage: "prototype",
+      domain: "Software Platform",
+      description: "A secure digital credentials safe for students, using robust cryptographic proofs.",
+      remarks: "Hardware/software prototype development",
+      color: "bg-amber-500"
+    },
+    {
+      name: "AgriNed Technologies",
+      stage: "prototype",
+      domain: "Agri-Tech / Hardware",
+      description: "A deployable field weather station analyzing soil moisture, humidity, and atmospheric data.",
+      remarks: "Hardware/software prototype development",
+      color: "bg-amber-500"
+    },
+
+    // Idea
+    {
+      name: "HirEd",
+      stage: "idea",
+      domain: "Software Platform / HR-tech",
+      description: "A recruitment network matching student projects to corporate internships based on skill graphs.",
+      remarks: "Problem validation in progress",
+      color: "bg-purple-500"
+    },
+    {
+      name: "Authenticate",
+      stage: "idea",
+      domain: "Cybersecurity / Blockchain",
+      description: "Decentralized document validation system built to eliminate certificate counterfeiting.",
+      remarks: "Problem validation in progress",
+      color: "bg-purple-500"
+    },
+    {
+      name: "Ivanus",
+      stage: "idea",
+      domain: "AI-based Systems",
+      description: "Custom Large Language Model micro-agents trained to automate specialized backend tasks.",
+      remarks: "Problem validation in progress",
+      color: "bg-purple-500"
+    },
+    {
+      name: "Customizer Consent",
+      stage: "idea",
+      domain: "Software Platform / Privacy",
+      description: "A centralized user data privacy panel that handles cookie compliance and user consent.",
+      remarks: "Problem validation in progress",
+      color: "bg-purple-500"
+    },
+    {
+      name: "Soundscape",
+      stage: "idea",
+      domain: "Social Impact / Audio",
+      description: "Spatial audio generation software built to assist visually impaired individuals navigate campus.",
+      remarks: "Problem validation in progress",
+      color: "bg-purple-500"
+    },
+    {
+      name: "Yoovan AI",
+      stage: "idea",
+      domain: "AI-based Systems / HR",
+      description: "Personalized resume preparation and AI-assisted interview screening tool.",
+      remarks: "Problem validation in progress",
+      color: "bg-purple-500"
+    }
+  ];
+
+  const filteredStartups = activeTab === 'all' 
+    ? startups 
+    : startups.filter(s => s.stage === activeTab);
+
+  const getStageIcon = (stage: string) => {
+    switch(stage) {
+      case 'commercialization': return <TrendingUp className="w-4 h-4 text-emerald-600" />;
+      case 'mvp': return <Box className="w-4 h-4 text-blue-600" />;
+      case 'prototype': return <Layers className="w-4 h-4 text-amber-600" />;
+      case 'idea': return <Sparkles className="w-4 h-4 text-purple-600" />;
+      default: return <HelpCircle className="w-4 h-4" />;
+    }
+  };
+
+  const getStageTitle = (stage: string) => {
+    if (stage === 'mvp') return 'MVP Stage';
+    return stage.charAt(0).toUpperCase() + stage.slice(1) + ' Stage';
+  };
+
+  return (
+    <section 
+      id="portfolio" 
+      className="relative w-full py-24 md:py-32 px-6 md:px-12 bg-white flex flex-col items-center overflow-hidden"
+    >
+      <div className="absolute top-0 right-1/4 w-[500px] h-[500px] bg-gradient-to-tr from-brand-orange/5 to-brand-pink/5 rounded-full blur-[120px] pointer-events-none" />
+
+      {/* Header */}
+      <div className="max-w-4xl text-center mb-16 z-10">
+        <span className="font-sans text-xs font-bold uppercase tracking-widest text-neutral-500 border border-neutral-200 px-3.5 py-1.5 rounded-full bg-neutral-50">
+          Startup Showcase
+        </span>
+        <h2 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-900 mt-4 mb-6 tracking-tight">
+          Portfolio Directory
+        </h2>
+        <p className="font-sans text-sm md:text-base text-neutral-500 max-w-2xl mx-auto">
+          Explore the 22 student-led ventures currently incubated at RAISE. See their development maturity, from problem-validation ideas to active commercialization.
+        </p>
+      </div>
+
+      {/* Filter Tabs */}
+      <div className="w-full max-w-4xl flex flex-wrap justify-center gap-2 md:gap-3 mb-16 z-10">
+        {['all', 'commercialization', 'mvp', 'prototype', 'idea'].map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`px-5 py-2.5 rounded-xl font-sans text-xs md:text-sm font-semibold tracking-wide capitalize transition-all duration-300 ${
+              activeTab === tab
+                ? 'bg-neutral-950 text-white shadow-lg shadow-neutral-950/10 scale-[1.02]'
+                : 'bg-neutral-100 hover:bg-neutral-200/60 text-neutral-600 hover:text-neutral-900'
+            }`}
+          >
+            {tab === 'all' ? 'All Projects' : tab === 'mvp' ? 'MVP' : tab}
+          </button>
+        ))}
+      </div>
+
+      {/* Projects Grid */}
+      <motion.div 
+        layout
+        className="w-full max-w-6xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 z-10"
+      >
+        <AnimatePresence mode="popLayout">
+          {filteredStartups.map((startup) => (
+            <motion.div
+              layout
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.9 }}
+              transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+              key={startup.name}
+              className="bg-neutral-50/40 rounded-2xl p-6 md:p-8 border border-neutral-200/60 shadow-premium shadow-premium-hover flex flex-col justify-between"
+            >
+              <div>
+                {/* Stage Indicator Pill */}
+                <div className="flex justify-between items-center mb-6">
+                  <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wider ${
+                    startup.stage === 'commercialization' ? 'bg-emerald-100 text-emerald-800' :
+                    startup.stage === 'mvp' ? 'bg-blue-100 text-blue-800' :
+                    startup.stage === 'prototype' ? 'bg-amber-100 text-amber-800' :
+                    'bg-purple-100 text-purple-800'
+                  }`}>
+                    {getStageIcon(startup.stage)}
+                    {getStageTitle(startup.stage)}
+                  </span>
+                  
+                  {/* Status Indicator */}
+                  <span className="w-2.5 h-2.5 rounded-full bg-neutral-200 relative">
+                    <span className={`absolute inset-0 rounded-full ${startup.color} animate-ping opacity-75`} />
+                    <span className={`absolute inset-0 rounded-full ${startup.color}`} />
+                  </span>
+                </div>
+
+                <h3 className="font-heading text-xl font-bold text-neutral-900 mb-1">
+                  {startup.name}
+                </h3>
+                
+                <span className="font-sans text-[11px] md:text-xs font-semibold text-neutral-400 uppercase tracking-widest block mb-4">
+                  {startup.domain}
+                </span>
+
+                <p className="font-sans text-xs md:text-sm text-neutral-500 leading-relaxed mb-6">
+                  {startup.description}
+                </p>
+              </div>
+
+              {/* Remarks Box */}
+              <div className="border-t border-neutral-200/50 pt-4 mt-auto">
+                <span className="font-sans text-[10px] font-bold text-neutral-400 uppercase tracking-wider block mb-1">
+                  Status Remarks
+                </span>
+                <span className="font-sans text-xs font-semibold text-neutral-800">
+                  {startup.remarks}
+                </span>
+              </div>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </motion.div>
+    </section>
+  );
+};

src/pages/RaiseIncubator/components/ProcessSection.tsx

@@ -0,0 +1,152 @@
+import React, { useRef } from 'react';
+import { motion, useScroll, useTransform, useSpring } from 'framer-motion';
+import { UserCheck, Award, FileSpreadsheet, Compass } from 'lucide-react';
+
+export const ProcessSection: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  
+  // Track scroll progress of the container
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start end", "end start"]
+  });
+
+  // Smooth out the scroll progress using a spring
+  const scaleY = useSpring(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001
+  });
+
+  // Map progress to height percent
+  const lineHeight = useTransform(scaleY, [0, 0.7], ["0%", "100%"]);
+
+  const steps = [
+    {
+      number: "01",
+      icon: <Compass className="w-6 h-6 text-neutral-800" />,
+      title: "Ideate & Approach Incubation Manager",
+      description: "Students pitch their raw project ideas or initial prototypes directly to the Incubation Manager at the RAISE incubation cell. No complex business plan needed initially—just pure innovation.",
+      highlight: "Open to all RIT students & departments"
+    },
+    {
+      number: "02",
+      icon: <UserCheck className="w-6 h-6 text-neutral-800" />,
+      title: "Incubation Manager Approval",
+      description: "The Incubation Manager reviews the project for originality, feasibility, and societal or commercial impact. If the concept is unique, it gets the formal approval for institution submission.",
+      highlight: "Uniqueness evaluation & technical verification"
+    },
+    {
+      number: "03",
+      icon: <FileSpreadsheet className="w-6 h-6 text-neutral-800" />,
+      title: "College Submission",
+      description: "Approved projects are forwarded directly to the college governance system, backed by the incubation center's official recommendation for launch support.",
+      highlight: "Formal institution backing"
+    },
+    {
+      number: "04",
+      icon: <Award className="w-6 h-6 text-yellow-600" />,
+      title: "Funding & Execution",
+      description: "Rajalakshmi Institute of Technology awards seed funding to the project, helping you build real prototypes and transition your student project into a fully fledged startup.",
+      highlight: "Seed Funding up to ₹20,000",
+      special: true
+    }
+  ];
+
+  return (
+    <section 
+      id="process" 
+      ref={containerRef}
+      className="relative w-full py-24 md:py-32 px-6 md:px-12 bg-white flex flex-col items-center overflow-hidden"
+    >
+      {/* Decorative Grid Line */}
+      <div className="absolute right-0 top-1/3 w-96 h-96 bg-brand-orange/5 rounded-full blur-[100px] pointer-events-none" />
+
+      {/* Title */}
+      <div className="max-w-4xl text-center mb-20 z-10">
+        <span className="font-sans text-xs font-bold uppercase tracking-widest text-[#e91e63] bg-[#e91e63]/10 px-3.5 py-1.5 rounded-full">
+          The Incubation Pipeline
+        </span>
+        <h2 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-900 mt-4 mb-6 tracking-tight">
+          How Your Idea Becomes Funded
+        </h2>
+        <p className="font-sans text-sm md:text-base text-neutral-500 max-w-2xl mx-auto leading-relaxed">
+          From an initial thought to institutional backing—here is the exact journey RIT students take to lock down support, guidance, and financial grants for their project.
+        </p>
+      </div>
+
+      {/* Scroll-telling Process Flow */}
+      <div className="relative w-full max-w-4xl">
+        {/* Central Vertical Connector Line (Desktop) */}
+        <div className="absolute left-1/2 -translate-x-1/2 top-4 bottom-4 w-1 bg-neutral-100 hidden md:block">
+          <motion.div 
+            style={{ height: lineHeight }}
+            className="w-full bg-gradient-to-b from-[#ff4e50] via-[#e91e63] to-[#9c27b0] origin-top rounded-full"
+          />
+        </div>
+
+        {/* Timeline Items */}
+        <div className="space-y-16 md:space-y-28 relative">
+          {steps.map((step, idx) => {
+            const isEven = idx % 2 === 0;
+            return (
+              <div 
+                key={idx}
+                className={`flex flex-col md:flex-row items-center md:justify-between w-full relative ${
+                  isEven ? 'md:flex-row-reverse' : ''
+                }`}
+              >
+                {/* Visual Dot on Timeline (Desktop) */}
+                <div className="absolute left-1/2 -translate-x-1/2 w-10 h-10 rounded-full bg-white border-4 border-neutral-100 shadow-md flex items-center justify-center z-20 hidden md:flex">
+                  <span className={`w-3.5 h-3.5 rounded-full ${step.special ? 'bg-yellow-500 animate-pulse' : 'bg-neutral-800'}`} />
+                </div>
+
+                {/* Left/Right Card */}
+                <motion.div 
+                  initial={{ opacity: 0, y: 50 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true, margin: "-100px" }}
+                  transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+                  className={`w-full md:w-[45%] rounded-2xl p-6 md:p-8 border transition-all duration-300 ${
+                    step.special 
+                      ? 'bg-neutral-900 border-neutral-800 text-white shadow-2xl shadow-neutral-900/10' 
+                      : 'bg-neutral-50/50 border-neutral-200/60 hover:bg-neutral-50 hover:border-neutral-300/80 shadow-premium'
+                  }`}
+                >
+                  <div className="flex justify-between items-start mb-6">
+                    <div className={`p-3.5 rounded-xl ${step.special ? 'bg-yellow-500/15' : 'bg-neutral-100'}`}>
+                      {step.icon}
+                    </div>
+                    <span className={`font-heading font-extrabold text-3xl ${step.special ? 'text-yellow-400' : 'text-neutral-300'}`}>
+                      {step.number}
+                    </span>
+                  </div>
+
+                  <h3 className={`font-heading text-lg md:text-xl font-bold mb-3 ${step.special ? 'text-white' : 'text-neutral-900'}`}>
+                    {step.title}
+                  </h3>
+
+                  <p className={`font-sans text-xs md:text-sm leading-relaxed mb-6 ${step.special ? 'text-neutral-400' : 'text-neutral-500'}`}>
+                    {step.description}
+                  </p>
+
+                  <div className="flex items-center gap-2 mt-auto">
+                    <span className={`w-2 h-2 rounded-full ${step.special ? 'bg-yellow-400' : 'bg-[#e91e63]'}`} />
+                    <span className={`font-sans text-[11px] md:text-xs font-bold uppercase tracking-wider ${
+                      step.special ? 'text-yellow-400' : 'text-neutral-700'
+                    }`}>
+                      {step.highlight}
+                    </span>
+                  </div>
+                </motion.div>
+
+                {/* Empty Spacer Column for Desktop Grid Alignment */}
+                <div className="w-full md:w-[45%] hidden md:block" />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};

src/pages/RaiseIncubator/components/StatsSection.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { motion, useInView } from 'framer-motion';
+import { Rocket, GraduationCap, Users, Layers } from 'lucide-react';
+
+interface CounterProps {
+  value: number;
+  duration?: number;
+  suffix?: string;
+}
+
+const AnimatedCounter: React.FC<CounterProps> = ({ value, duration = 1.2, suffix = "" }) => {
+  const [count, setCount] = useState(0);
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true, margin: "-100px" });
+
+  useEffect(() => {
+    if (inView) {
+      let start = 0;
+      const end = value;
+      if (start === end) {
+        setCount(end);
+        return;
+      }
+
+      const totalMiliseconds = duration * 1000;
+      const steps = Math.min(end, 50); // limit steps to keep it smooth
+      const increment = Math.ceil(end / steps);
+      const stepTime = totalMiliseconds / steps;
+
+      const timer = setInterval(() => {
+        start += increment;
+        if (start >= end) {
+          clearInterval(timer);
+          setCount(end);
+        } else {
+          setCount(start);
+        }
+      }, stepTime);
+
+      return () => clearInterval(timer);
+    }
+  }, [inView, value, duration]);
+
+  return <span ref={ref}>{count}{suffix}</span>;
+};
+
+export const StatsSection: React.FC = () => {
+  const stats = [
+    {
+      icon: <Rocket className="w-6 h-6 text-neutral-800" />,
+      value: 22,
+      suffix: "",
+      label: "Active Incubated Startups",
+      description: "Ambitious companies in various stages from idea validation to commercial revenue."
+    },
+    {
+      icon: <GraduationCap className="w-6 h-6 text-neutral-800" />,
+      value: 100,
+      suffix: "%",
+      label: "Student Founders",
+      description: "Driven completely by the entrepreneurial spirit of RIT's student community."
+    },
+    {
+      icon: <Users className="w-6 h-6 text-neutral-800" />,
+      value: 20,
+      suffix: "+",
+      label: "Mentors Enabled",
+      description: "Expert guidance from industry leaders and academics across engineering domains."
+    },
+    {
+      icon: <Layers className="w-6 h-6 text-neutral-800" />,
+      value: 8,
+      suffix: "",
+      label: "Sectors Represented",
+      description: "Diverse projects across software, AI, hardware, campus tools, and social impact."
+    }
+  ];
+
+  return (
+    <section 
+      id="stats" 
+      className="relative w-full py-20 md:py-28 px-6 md:px-12 bg-neutral-50 border-y border-neutral-100 overflow-hidden"
+    >
+      <div className="absolute top-0 left-1/3 w-96 h-96 bg-brand-purple/5 rounded-full blur-[120px] pointer-events-none" />
+
+      <div className="max-w-7xl mx-auto">
+        {/* Section Title */}
+        <div className="text-center mb-16 md:mb-20">
+          <span className="font-sans text-xs font-bold uppercase tracking-widest text-neutral-500 border border-neutral-200 px-3.5 py-1.5 rounded-full bg-white">
+            Incubator Performance
+          </span>
+          <h2 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-900 mt-4 mb-4 tracking-tight">
+            Our Metrics In Action
+          </h2>
+          <p className="font-sans text-sm md:text-base text-neutral-500 max-w-xl mx-auto">
+            A snapshot of the growth and ecosystem metrics recorded for the year 2026.
+          </p>
+        </div>
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
+          {stats.map((stat, idx) => (
+            <motion.div
+              key={idx}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: "-50px" }}
+              transition={{ duration: 0.6, delay: idx * 0.1, ease: [0.16, 1, 0.3, 1] }}
+              className="bg-white rounded-2xl p-6 md:p-8 border border-neutral-200/50 shadow-premium shadow-premium-hover flex flex-col justify-between"
+            >
+              <div>
+                <div className="p-3 bg-neutral-50 rounded-xl w-fit mb-6">
+                  {stat.icon}
+                </div>
+                
+                <h3 className="font-heading font-extrabold text-5xl md:text-6xl text-neutral-900 tracking-tight mb-2">
+                  <AnimatedCounter value={stat.value} suffix={stat.suffix} />
+                </h3>
+                
+                <h4 className="font-heading font-bold text-sm text-neutral-800 uppercase tracking-wide mb-3">
+                  {stat.label}
+                </h4>
+              </div>
+
+              <p className="font-sans text-xs text-neutral-400 leading-relaxed mt-2">
+                {stat.description}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};