Merge version_2 into main #4
100
src/app/page.tsx
100
src/app/page.tsx
@@ -10,9 +10,46 @@ import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { Award, Briefcase, Code2, Mail, Zap } from 'lucide-react';
|
||||
import { Award, Briefcase, Code2, Mail, Zap, Github, ExternalLink } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface ProjectDetails {
|
||||
id: string;
|
||||
name: string;
|
||||
github?: string;
|
||||
techStack: string[];
|
||||
outcomes: string[];
|
||||
}
|
||||
|
||||
const projectDetailsMap: Record<string, ProjectDetails> = {
|
||||
"1": {
|
||||
id: "1", name: "Real-Time Data Pipeline Optimization", github: "https://github.com", techStack: ["Apache Spark", "Microsoft Fabric", "Azure Data Factory", "Python"],
|
||||
outcomes: ["35% pipeline performance improvement", "Enterprise-scale data processing", "Automated ETL orchestration"]
|
||||
},
|
||||
"2": {
|
||||
id: "2", name: "SMI-GNN Drug Interaction Prediction", github: "https://github.com", techStack: ["TensorFlow", "Graph Neural Networks", "Python", "PyTorch"],
|
||||
outcomes: ["High-accuracy molecular interaction predictions", "Research publication ready", "Novel GNN architecture implementation"]
|
||||
},
|
||||
"3": {
|
||||
id: "3", name: "Advanced Analytics Dashboard", github: "https://github.com", techStack: ["Power BI", "React", "TypeScript", "Azure SQL"],
|
||||
outcomes: ["Production-ready analytics platform", "Real-time data visualization", "100+ concurrent users support"]
|
||||
}
|
||||
};
|
||||
|
||||
export default function LandingPage() {
|
||||
const [selectedProject, setSelectedProject] = useState<ProjectDetails | null>(null);
|
||||
|
||||
const handleProjectClick = (projectId: string) => {
|
||||
const project = projectDetailsMap[projectId];
|
||||
if (project) {
|
||||
setSelectedProject(project);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setSelectedProject(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
@@ -156,17 +193,72 @@ export default function LandingPage() {
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Real-Time Data Pipeline Optimization", price: "Enterprise Scale", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/modern-data-pipeline-dashboard-with-colo-1773295366417-e08aedfa.png", imageAlt: "Data pipeline dashboard"
|
||||
id: "1", name: "Real-Time Data Pipeline Optimization", price: "Enterprise Scale", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/modern-data-pipeline-dashboard-with-colo-1773295366417-e08aedfa.png", imageAlt: "Data pipeline dashboard", onProductClick: () => handleProjectClick("1")
|
||||
},
|
||||
{
|
||||
id: "2", name: "SMI-GNN Drug Interaction Prediction", price: "Research Focus", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/molecular-structure-visualization-with-g-1773295366007-01f1dd8e.png", imageAlt: "Molecular graph neural network"
|
||||
id: "2", name: "SMI-GNN Drug Interaction Prediction", price: "Research Focus", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/molecular-structure-visualization-with-g-1773295366007-01f1dd8e.png", imageAlt: "Molecular graph neural network", onProductClick: () => handleProjectClick("2")
|
||||
},
|
||||
{
|
||||
id: "3", name: "Advanced Analytics Dashboard", price: "Production Ready", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/modern-data-pipeline-dashboard-with-colo-1773295366417-e08aedfa.png", imageAlt: "Analytics dashboard interface"
|
||||
id: "3", name: "Advanced Analytics Dashboard", price: "Production Ready", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/modern-data-pipeline-dashboard-with-colo-1773295366417-e08aedfa.png", imageAlt: "Analytics dashboard interface", onProductClick: () => handleProjectClick("3")
|
||||
}
|
||||
]}
|
||||
ariaLabel="Projects section"
|
||||
/>
|
||||
|
||||
{selectedProject && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={handleCloseModal}>
|
||||
<div className="bg-white dark:bg-slate-900 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="p-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-3xl font-bold">{selectedProject.name}</h2>
|
||||
<button onClick={handleCloseModal} className="text-2xl font-bold text-gray-500 hover:text-gray-700">×</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl font-semibold mb-4 flex items-center gap-2">
|
||||
<Github size={20} />
|
||||
GitHub Repository
|
||||
</h3>
|
||||
{selectedProject.github ? (
|
||||
<a href={selectedProject.github} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-800 flex items-center gap-2">
|
||||
{selectedProject.github}
|
||||
<ExternalLink size={16} />
|
||||
</a>
|
||||
) : (
|
||||
<p className="text-gray-500">GitHub link coming soon</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl font-semibold mb-4">Tech Stack</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedProject.techStack.map((tech, index) => (
|
||||
<span key={index} className="bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100 px-4 py-2 rounded-lg text-sm font-medium">
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl font-semibold mb-4">Key Outcomes</h3>
|
||||
<ul className="space-y-3">
|
||||
{selectedProject.outcomes.map((outcome, index) => (
|
||||
<li key={index} className="flex items-start gap-3">
|
||||
<span className="text-green-500 font-bold mt-1">✓</span>
|
||||
<span className="text-gray-700 dark:text-gray-300">{outcome}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button onClick={handleCloseModal} className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div id="certifications" data-section="certifications">
|
||||
|
||||
Reference in New Issue
Block a user