diff --git a/apps/web/src/features/genai-projects/GenAIProjects.module.css b/apps/web/src/features/genai-projects/GenAIProjects.module.css deleted file mode 100644 index 0eba539a..00000000 --- a/apps/web/src/features/genai-projects/GenAIProjects.module.css +++ /dev/null @@ -1,336 +0,0 @@ -/* features/genai-projects/GenAIProjects.module.css */ -.section { - min-height: 100vh; - padding: 8rem 0 4rem; - position: relative; -} - -.darkMode { - background-color: rgba(13, 14, 30, 0.98); - color: rgba(255, 255, 255, 0.9); -} - -.lightMode { - background-color: rgba(250, 250, 255, 0.98); - color: rgba(20, 18, 40, 0.9); -} - -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; -} - -.content { - display: flex; - flex-direction: column; - gap: 4rem; -} - -/* Header */ -.header { - text-align: center; -} - -.headerIcon { - color: #9333ea; - margin-bottom: 1.5rem; -} - -.title { - font-size: 3.5rem; - font-weight: 800; - margin-bottom: 1.5rem; - background-image: linear-gradient(90deg, #9333ea 0%, #7c3aed 100%); - background-clip: text; - -webkit-background-clip: text; - color: transparent; - letter-spacing: -0.02em; -} - -.divider { - width: 100px; - height: 4px; - background: linear-gradient(90deg, #9333ea 0%, #7c3aed 100%); - margin: 0 auto 1.5rem; - border-radius: 2px; - position: relative; -} - -.divider::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(90deg, #9333ea 0%, #7c3aed 100%); - filter: blur(8px); - opacity: 0.5; -} - -.subtitle { - font-size: 1.25rem; - max-width: 700px; - margin: 0 auto; - line-height: 1.7; - opacity: 0.9; -} - -/* Projects Grid */ -.projectsGrid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - gap: 2rem; -} - -.projectCard { - background: rgba(20, 18, 40, 0.5); - border: 1px solid rgba(147, 51, 234, 0.2); - border-radius: 1.25rem; - padding: 2rem; - display: flex; - flex-direction: column; - transition: all 0.3s ease; -} - -.lightMode .projectCard { - background: rgba(255, 255, 255, 0.7); - border: 1px solid rgba(147, 51, 234, 0.15); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); -} - -.projectCard:hover { - border-color: rgba(147, 51, 234, 0.4); - box-shadow: 0 15px 40px -10px rgba(147, 51, 234, 0.25); -} - -.cardHeader { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 1.5rem; -} - -.projectIcon { - width: 64px; - height: 64px; - border-radius: 1rem; - background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(163, 27, 255, 0.2)); - display: flex; - align-items: center; - justify-content: center; - color: #9333ea; -} - -.statusBadge { - padding: 0.35rem 0.85rem; - border-radius: 2rem; - font-size: 0.8rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.03em; -} - -.projectName { - font-size: 1.75rem; - font-weight: 700; - margin-bottom: 0.75rem; - background-image: linear-gradient(90deg, #9333ea 0%, #ff6b00 100%); - background-clip: text; - -webkit-background-clip: text; - color: transparent; -} - -.projectDescription { - font-size: 1.1rem; - font-weight: 500; - margin-bottom: 1rem; - color: #9333ea; -} - -.lightMode .projectDescription { - color: #7c3aed; -} - -.projectLongDescription { - font-size: 0.95rem; - line-height: 1.7; - margin-bottom: 1.5rem; - flex-grow: 1; - opacity: 0.85; -} - -.tags { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 1.5rem; -} - -.tag { - padding: 0.35rem 0.75rem; - background: rgba(147, 51, 234, 0.1); - border: 1px solid rgba(147, 51, 234, 0.2); - border-radius: 1rem; - font-size: 0.8rem; - color: #9333ea; -} - -.lightMode .tag { - background: rgba(147, 51, 234, 0.08); - color: #7c3aed; -} - -.cardActions { - display: flex; - gap: 1rem; - flex-wrap: wrap; -} - -.actionButton { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.75rem 1.25rem; - background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%); - color: white; - font-weight: 600; - font-size: 0.9rem; - border-radius: 0.6rem; - text-decoration: none; - transition: all 0.3s ease; - box-shadow: 0 4px 12px rgba(147, 51, 234, 0.25); -} - -.actionButton:hover { - box-shadow: 0 6px 18px rgba(147, 51, 234, 0.35); - transform: translateY(-2px); -} - -.githubButton { - background: linear-gradient(135deg, #333 0%, #555 100%); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); -} - -.githubButton:hover { - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); -} - -.docsButton { - background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%); - box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25); -} - -.docsButton:hover { - box-shadow: 0 6px 18px rgba(14, 165, 233, 0.35); -} - -/* CTA Section */ -.ctaSection { - text-align: center; - padding: 3rem; - background: rgba(147, 51, 234, 0.08); - border-radius: 1.5rem; - border: 1px solid rgba(147, 51, 234, 0.2); -} - -.lightMode .ctaSection { - background: rgba(147, 51, 234, 0.05); -} - -.ctaTitle { - font-size: 1.75rem; - font-weight: 700; - margin-bottom: 1rem; - background-image: linear-gradient(90deg, #9333ea 0%, #7c3aed 100%); - background-clip: text; - -webkit-background-clip: text; - color: transparent; -} - -.ctaText { - font-size: 1.1rem; - margin-bottom: 1.5rem; - max-width: 600px; - margin-left: auto; - margin-right: auto; - opacity: 0.9; -} - -.ctaButton { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 1rem 2rem; - background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%); - color: white; - font-weight: 600; - font-size: 1rem; - border-radius: 0.75rem; - text-decoration: none; - transition: all 0.3s ease; - box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3); -} - -.ctaButton:hover { - box-shadow: 0 6px 20px rgba(147, 51, 234, 0.4); -} - -/* Responsive */ -@media (max-width: 768px) { - .section { - padding: 6rem 0 3rem; - } - - .title { - font-size: 2.5rem; - } - - .subtitle { - font-size: 1.1rem; - } - - .projectsGrid { - grid-template-columns: 1fr; - } - - .projectCard { - padding: 1.5rem; - } - - .projectName { - font-size: 1.5rem; - } - - .cardActions { - flex-direction: column; - } - - .actionButton { - justify-content: center; - } - - .content { - gap: 2.5rem; - } - - .ctaSection { - padding: 2rem 1.5rem; - } -} - -@media (max-width: 480px) { - .title { - font-size: 2rem; - } - - .container { - padding: 0 1rem; - } - - .projectIcon { - width: 52px; - height: 52px; - } -} diff --git a/apps/web/src/features/genai-projects/index.tsx b/apps/web/src/features/genai-projects/index.tsx deleted file mode 100644 index c709c6bd..00000000 --- a/apps/web/src/features/genai-projects/index.tsx +++ /dev/null @@ -1,248 +0,0 @@ -// features/genai-projects/index.tsx -import { FC, memo } from "react"; -import { motion } from "framer-motion"; -import { useTheme } from "@/theme"; -import { - ExternalLink, - Github, - Cpu, - Network, - BookOpen, - Shield, - FileText, -} from "lucide-react"; -import styles from "./GenAIProjects.module.css"; - -const animations = { - container: { - hidden: { opacity: 0 }, - visible: { - opacity: 1, - transition: { - staggerChildren: 0.15, - delayChildren: 0.1, - }, - }, - }, - item: { - hidden: { opacity: 0, y: 20 }, - visible: { - opacity: 1, - y: 0, - transition: { - duration: 0.6, - ease: "easeOut", - }, - }, - }, - card: { - hidden: { opacity: 0, scale: 0.95 }, - visible: { - opacity: 1, - scale: 1, - transition: { - duration: 0.5, - ease: "easeOut", - }, - }, - }, -}; - -interface Project { - name: string; - description: string; - longDescription: string; - icon: React.ReactNode; - website?: string; - github?: string; - docs?: string; - status: "live" | "development" | "beta"; - tags: string[]; -} - -const projects: Project[] = [ - { - name: "Mystira", - description: - "Interactive storytelling adventures for children and families", - longDescription: - "Mystira brings the wonder of storytelling to life for children, parents, and group leaders alike. It transforms shared playtime into immersive, interactive adventures filled with imagination, cooperation, and creativity. Each Mystira story is grounded in child development research, fostering emotional growth, problem-solving skills, and meaningful connections.", - icon: , - website: "https://mystira.app", - status: "live", - tags: ["Storytelling", "Children", "Interactive", "Education"], - }, - { - name: "Phoenix Rooivalk", - description: "AI-powered counter-drone defense platform", - longDescription: - "Phoenix Rooivalk is a sophisticated counter-drone platform that leverages advanced AI and machine learning for real-time drone detection, classification, and neutralization. Named after the South African Rooivalk attack helicopter, it provides comprehensive airspace protection with automated threat assessment and response capabilities.", - icon: , - website: "https://phoenixrooivalk.com/", - docs: "https://docs.phoenixrooivalk.com/", - github: "https://github.com/JustAGhosT/PhoenixRooivalk", - status: "development", - tags: ["Counter-Drone", "AI", "Defense", "Security"], - }, - { - name: "Cognitive Mesh", - description: "Enterprise-grade AI transformation framework", - longDescription: - "Cognitive Mesh is an enterprise-grade AI transformation framework designed to orchestrate multi-agent cognitive systems with institutional-grade security and compliance controls. It features a five-layer hexagonal architecture enabling organizations to build, deploy, and manage advanced AI capabilities with comprehensive governance, NIST AI Risk Management Framework compliance, and Zero-Trust security architecture.", - icon: , - github: "https://github.com/justaghost/cognitive-mesh", - status: "development", - tags: [ - "Multi-Agent", - "Enterprise", - "Security", - "Governance", - "Azure", - ".NET", - ], - }, -]; - -const statusColors = { - live: { bg: "rgba(76, 175, 80, 0.2)", text: "#4caf50", label: "Live" }, - beta: { bg: "rgba(255, 152, 0, 0.2)", text: "#ff9800", label: "Beta" }, - development: { - bg: "rgba(33, 150, 243, 0.2)", - text: "#2196f3", - label: "In Development", - }, -}; - -const GenAIProjects: FC = memo(() => { - const { themeMode } = useTheme(); - const isDarkMode = themeMode === "dark"; - - return ( -
-
- - {/* Header */} - -
- -
-

GenAI Projects

-
-

- Pioneering the future of artificial intelligence through - innovative projects and cutting-edge research initiatives. -

- - - {/* Projects Grid */} - - {projects.map((project, index) => ( - -
-
{project.icon}
-
- {statusColors[project.status].label} -
-
- -

{project.name}

-

- {project.description} -

-

- {project.longDescription} -

- -
- {project.tags.map((tag, tagIndex) => ( - - {tag} - - ))} -
- -
- {project.website && ( - - - Website - - )} - {project.docs && ( - - - Docs - - )} - {project.github && ( - - - GitHub - - )} -
-
- ))} -
- - {/* CTA Section */} - -

Interested in Collaboration?

-

- We're always looking for innovative partners and contributors to - help shape the future of AI technology. -

- - Get in Touch - -
- -
-
- ); -}); - -GenAIProjects.displayName = "GenAIProjects"; -export { GenAIProjects }; -export default GenAIProjects;