feat: Integrate RAISE Incubator website as a module under /raise
Some checks failed
Deploy RIT Freshers Hub to VPS / Deploy to Live VPS (push) Has been cancelled

This commit is contained in:
RIT Services
2026-08-13 06:41:46 +00:00
parent 241cb5c714
commit 4588eef714
17 changed files with 1671 additions and 1 deletions

Binary file not shown.

BIN
public/RAISE.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

BIN
public/Raiselogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

@@ -16,6 +16,7 @@ import Faculty from '@/pages/Faculty/Faculty';
import DevCollab from '@/pages/DevCollab/DevCollab';
import LeetcodeLeaderboard from '@/pages/LeetcodeLeaderboard/LeetcodeLeaderboard';
import AdminDashboard from '@/pages/Admin/AdminDashboard';
import Raise from '@/pages/Raise/Raise';
const queryClient = new QueryClient({
defaultOptions: {
@@ -47,6 +48,9 @@ function App() {
<Route path="/admin" element={<AdminDashboard />} />
<Route path="/admin/*" element={<AdminDashboard />} />
{/* Standalone RAISE Route */}
<Route path="/raise" element={<Raise />} />
<Route element={<MainLayout />}>
<Route path="/" element={<Home />} />
<Route path="/notes" element={<Notes />} />

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

BIN
src/assets/raise/hero.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Archivo+Black&display=swap');
@import "tailwindcss";
@@ -34,6 +34,11 @@
--shadow-medium: 0 4px 25px -5px rgba(0,0,0,0.1), 0 10px 30px -5px rgba(0,0,0,0.07);
--shadow-strong: 0 8px 40px -8px rgba(0,0,0,0.15), 0 20px 45px -8px rgba(0,0,0,0.1);
--shadow-orange: 0 8px 30px -4px rgba(249,115,22,0.3);
--color-brand-orange: #ff5722;
--color-brand-pink: #e91e63;
--color-brand-purple: #9c27b0;
--animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Tailwind Preflight handles resets natively. Custom modifications go here: */
@@ -306,3 +311,69 @@ h1, h2, h3, h4, h5, h6 {
border-color: #F97316 !important;
box-shadow: none !important;
}
/* RAISE Incubator Website Styles */
.raise-website {
--font-sans: 'Inter', sans-serif;
--font-heading: 'Plus Jakarta Sans', sans-serif;
--color-primary: #101010;
}
.raise-website body {
font-family: var(--font-sans);
background-color: #fafafa;
color: #171717;
}
.raise-website h1,
.raise-website h2,
.raise-website h3,
.raise-website h4,
.raise-website h5,
.raise-website h6 {
font-family: var(--font-heading) !important;
}
.text-gradient {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #06b6d4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.logo-blue {
filter: invert(29%) sepia(92%) saturate(2377%) hue-rotate(215deg) brightness(93%) contrast(97%);
}
.logo-black {
filter: brightness(0);
}
.glassmorphism {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.6);
}
.shadow-premium {
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02),
0 1px 3px rgba(0, 0, 0, 0.05),
0 20px 40px rgba(0, 0, 0, 0.03);
}
.shadow-premium-hover {
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.shadow-premium-hover:hover {
transform: translateY(-4px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04),
0 2px 8px rgba(0, 0, 0, 0.06),
0 30px 60px rgba(0, 0, 0, 0.05);
}
.grid-bg {
background-size: 40px 40px;
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
}

40
src/pages/Raise/Raise.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { Hero } from './components/Hero';
import { AboutSection } from './components/AboutSection';
import { ProcessSection } from './components/ProcessSection';
import { StatsSection } from './components/StatsSection';
import { PortfolioShowcase } from './components/PortfolioShowcase';
import { PitchBooking } from './components/PitchBooking';
import { FooterContact } from './components/FooterContact';
export default function Raise() {
const handleScrollToSection = (sectionId: string) => {
if (sectionId === 'hero') {
window.scrollTo({ top: 0, behavior: 'smooth' });
return;
}
const element = document.getElementById(sectionId);
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
};
return (
<div className="raise-website relative min-h-screen bg-[#fafafa] text-neutral-900 selection:bg-neutral-950 selection:text-white">
<div id="hero">
<Hero onScrollToSection={handleScrollToSection} />
</div>
<AboutSection />
<ProcessSection />
<StatsSection />
<PortfolioShowcase />
<PitchBooking />
<FooterContact onScrollToSection={handleScrollToSection} />
</div>
);
}

View File

@@ -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>
);
};

View File

@@ -0,0 +1,174 @@
import React from 'react';
import { MapPin, Phone, Mail, Landmark, ExternalLink, User } from 'lucide-react';
import raiseLogo from '@/assets/raise/Raiselogo.webp';
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>
);
};

View File

@@ -0,0 +1,253 @@
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { ArrowDown, Award } from 'lucide-react';
import raiseLogo from '@/assets/raise/Raiselogo.webp';
import collegeLogo from '@/assets/raise/college-logo.webp';
interface HeroProps {
onScrollToSection: (sectionId: string) => void;
}
export const Hero: React.FC<HeroProps> = ({ onScrollToSection }) => {
const letters = ['R', 'A', 'I', 'S', 'E'];
// Track drag/hover status for each letter
const [hoveredStates, setHoveredStates] = useState<boolean[]>([false, false, false, false, false]);
const [isIntro, setIsIntro] = useState(true);
const [entryCompleted, setEntryCompleted] = useState(false);
const [hoverActive, setHoverActive] = useState(false);
useEffect(() => {
// Start entrance animation almost immediately after mount
const entryTimer = setTimeout(() => {
setEntryCompleted(true);
}, 10);
// Clear entrance delays for responsive hover events
const hoverTimer = setTimeout(() => {
setHoverActive(true);
}, 300);
// End intro state and introduce surrounding content
const introTimer = setTimeout(() => {
setIsIntro(false);
}, 400);
return () => {
clearTimeout(entryTimer);
clearTimeout(hoverTimer);
clearTimeout(introTimer);
};
}, []);
const handleMouseEnter = (index: number) => {
if (!hoverActive) return; // disable hover actions during entry
setHoveredStates(prev => {
const next = [...prev];
next[index] = true;
return next;
});
};
const handleMouseLeave = (index: number) => {
setHoveredStates(prev => {
const next = [...prev];
next[index] = false;
return next;
});
};
return (
<header className="relative min-h-screen w-full flex flex-col justify-between items-center px-6 md:px-12 py-6 overflow-hidden bg-white grid-bg">
{/* Background Gradients for Premium Touch */}
<div className="absolute top-0 left-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" />
<div className="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-gradient-to-br from-brand-purple/5 to-brand-pink/5 rounded-full blur-[150px] pointer-events-none" />
{/* Glassmorphism Header */}
<motion.nav
animate={{ opacity: isIntro ? 0 : 1, y: isIntro ? -20 : 0 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
className="w-full max-w-7xl mx-auto flex items-center justify-between px-3.5 sm:px-6 py-3 sm:py-4 rounded-2xl glassmorphism shadow-premium z-50"
style={{ pointerEvents: isIntro ? 'none' : 'auto' }}
>
<div className="flex items-center gap-3 cursor-pointer" onClick={() => onScrollToSection('hero')}>
<div className="relative">
<img src={raiseLogo} alt="RAISE Incubator Logo" className="h-9 sm:h-11 w-auto object-contain rounded-lg" />
<div className="absolute -top-1 -right-1 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white animate-pulse" />
</div>
</div>
{/* Nav links */}
<div className="hidden md:flex items-center gap-8">
<button
onClick={() => onScrollToSection('about')}
className="font-sans text-sm font-semibold text-neutral-600 hover:text-neutral-900 transition-colors"
>
About
</button>
<button
onClick={() => onScrollToSection('process')}
className="font-sans text-sm font-semibold text-neutral-600 hover:text-neutral-900 transition-colors"
>
Incubation Pathway
</button>
<button
onClick={() => onScrollToSection('stats')}
className="font-sans text-sm font-semibold text-neutral-600 hover:text-neutral-900 transition-colors"
>
Our Impact
</button>
<button
onClick={() => onScrollToSection('portfolio')}
className="font-sans text-sm font-semibold text-neutral-600 hover:text-neutral-900 transition-colors"
>
Startups
</button>
</div>
{/* Call to Action Button & RIT Logo */}
<div className="flex items-center gap-2 sm:gap-4">
<button
onClick={() => onScrollToSection('pitch')}
className="relative px-3.5 sm:px-5 py-2 sm:py-2.5 rounded-xl bg-neutral-950 hover:bg-neutral-850 text-white font-sans text-xs sm:text-sm font-bold shadow-lg shadow-neutral-950/10 transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] whitespace-nowrap"
>
Pitch Your Idea
</button>
<div className="hidden sm:block h-8 w-px bg-neutral-200/80" />
<a
href="https://ritchennai.org"
target="_blank"
rel="noopener noreferrer"
className="transition-opacity hover:opacity-80 cursor-pointer flex items-center"
>
<img
src={collegeLogo}
alt="RIT College Logo"
className="h-8 sm:h-10 w-auto object-contain rounded-lg"
onError={(e) => {
// Hide broken image frame if RIT logo is missing or placeholder is empty
(e.target as HTMLElement).style.display = 'none';
}}
/>
</a>
</div>
</motion.nav>
{/* Hero Central Content */}
<motion.div
layout
className="flex-1 w-full max-w-5xl flex flex-col justify-center items-center text-center mt-12 md:mt-16 z-10"
>
{/* RIT Institution Badge */}
{!isIntro && (
<motion.div
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: "easeOut" }}
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-neutral-100/80 border border-neutral-200/50 mb-8"
>
<span className="w-2 h-2 rounded-full bg-[#e91e63] animate-ping" />
<span className="font-sans text-xs font-bold uppercase tracking-widest text-neutral-600">
Rajalakshmi Institute of Technology
</span>
</motion.div>
)}
{/* Giant RAISE Text with stroke outline, slanted format, and staggered load */}
<motion.div
layout
className="flex select-none justify-center items-center gap-4 md:gap-8 mb-6 cursor-ew-resize"
>
{letters.map((letter, idx) => (
<span
key={letter + idx}
onMouseEnter={() => handleMouseEnter(idx)}
onMouseLeave={() => handleMouseLeave(idx)}
onTouchStart={() => handleMouseEnter(idx)}
onTouchEnd={() => handleMouseLeave(idx)}
className="text-[18vw] md:text-[14vw] leading-none select-none inline-block"
style={{
fontFamily: '"Archivo Black", sans-serif',
WebkitTextStroke: '4.5px #000000',
WebkitTextFillColor: hoveredStates[idx] ? '#000000' : 'transparent',
color: hoveredStates[idx] ? '#000000' : 'transparent',
display: 'inline-block',
opacity: entryCompleted ? 1 : 0,
transform: !entryCompleted
? 'scale(0.3) skewX(0deg)'
: hoveredStates[idx]
? 'scale(1.08) translateY(-4px) skewX(-12deg)'
: 'scale(1) skewX(-12deg)',
transition: 'all 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
transitionDelay: hoverActive ? '0ms' : `${idx * 40}ms`,
textShadow: hoveredStates[idx] ? '0 10px 30px rgba(0,0,0,0.05)' : 'none'
}}
>
{letter}
</span>
))}
</motion.div>
{/* Subtitle, Description, and Action Pills */}
{!isIntro && (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.15, ease: "easeOut" }}
className="flex flex-col items-center"
>
<h2 className="font-heading text-lg md:text-xl lg:text-2xl font-bold text-neutral-800 max-w-4xl tracking-normal md:tracking-wide mb-6 uppercase">
Rajalakshmi Accelerator & Incubator for Startup Enterprises Association
</h2>
<p className="font-sans text-sm md:text-base text-neutral-500 max-w-2xl leading-relaxed mb-12">
A section 8 (not-for-profit) company inside the RIT campus. We empower student founders by providing continuous mentorship, infrastructure, and structured startup paths from ideation to seed funding.
</p>
<motion.div
whileHover={{ scale: 1.03 }}
className="inline-flex items-center gap-3 px-6 py-3.5 rounded-2xl bg-gradient-to-r from-neutral-900 to-neutral-800 text-white font-sans font-bold shadow-xl shadow-neutral-950/20 mb-8 border border-neutral-700/50"
>
<Award className="w-5 h-5 text-yellow-400" />
<span className="text-sm tracking-wide">
APPROVED UNIQUE IDEAS SECURE FUNDS UP TO <span className="text-yellow-400 underline decoration-2 underline-offset-4">₹20,000</span>
</span>
</motion.div>
</motion.div>
)}
</motion.div>
{/* Footer / Scroll Indicator */}
<motion.div
animate={{ opacity: isIntro ? 0 : 1, y: isIntro ? 20 : 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
className="w-full flex justify-between items-center max-w-7xl mx-auto z-10 py-4 border-t border-neutral-100"
style={{ pointerEvents: isIntro ? 'none' : 'auto' }}
>
<div className="flex gap-4">
<div className="flex items-center gap-2 text-xs font-semibold text-neutral-400">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
Active Batch 2026
</div>
</div>
<motion.button
onClick={() => onScrollToSection('about')}
animate={{ y: [0, 8, 0] }}
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
className="flex flex-col items-center gap-1 font-sans font-semibold text-xs text-neutral-400 hover:text-neutral-900 transition-colors uppercase tracking-wider cursor-pointer"
>
Scroll to explore
<ArrowDown className="w-4 h-4" />
</motion.button>
<div className="text-xs font-semibold text-neutral-400">
RIT Innovation Cell
</div>
</motion.div>
</header>
);
};

View File

@@ -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>
);
};

View File

@@ -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>
);
};

View File

@@ -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>
);
};

View File

@@ -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>
);
};