4588eef714
Some checks failed
Deploy RIT Freshers Hub to VPS / Deploy to Live VPS (push) Has been cancelled
324 lines
12 KiB
TypeScript
324 lines
12 KiB
TypeScript
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>
|
|
);
|
|
};
|