Merge version_3 into main

Merge version_3 into main

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"
@@ -80,7 +117,7 @@ export default function LandingPage() {
             {
               id: 1,
               title: "Programming & Databases",              description: "Python, SQL, JavaScript, SAS with expertise in Apache Spark for distributed computing and data processing at scale",              phoneOne: {
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/python-programming-language-icon-clean-m-1773295364599-d245e9b1.png",                imageAlt: "Python programming language icon"
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/python-programming-language-icon-clean-m-1773295364599-d245e9b1.png?_wi=1",                imageAlt: "Python programming language icon"
               },
               phoneTwo: {
                 imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/sql-database-icon-with-table-and-query-s-1773295364850-ac9b0256.png",                imageAlt: "SQL database icon"
@@ -101,16 +138,16 @@ export default function LandingPage() {
                 imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/tensorflow-machine-learning-framework-ic-1773295364546-ae941490.png",                imageAlt: "TensorFlow machine learning framework icon"
               },
               phoneTwo: {
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/react-javascript-library-icon-with-compo-1773295364212-1479cd27.png",                imageAlt: "React JavaScript library icon"
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/react-javascript-library-icon-with-compo-1773295364212-1479cd27.png?_wi=1",                imageAlt: "React JavaScript library icon"
               }
             },
             {
               id: 4,
               title: "Web & Full Stack",              description: "React, Next.js, Express.js, Pandas, NumPy for building modern web applications and data science workflows",              phoneOne: {
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/react-javascript-library-icon-with-compo-1773295364212-1479cd27.png",                imageAlt: "React JavaScript library icon"
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/react-javascript-library-icon-with-compo-1773295364212-1479cd27.png?_wi=2",                imageAlt: "React JavaScript library icon"
               },
               phoneTwo: {
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/python-programming-language-icon-clean-m-1773295364599-d245e9b1.png",                imageAlt: "Python programming language icon"
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/python-programming-language-icon-clean-m-1773295364599-d245e9b1.png?_wi=2",                imageAlt: "Python programming language icon"
               }
             }
           ]}
@@ -133,10 +170,10 @@ export default function LandingPage() {
           animationType="slide-up"
           blogs={[
             {
-              id: "1",              category: "Data Engineering",              title: "Data Engineering Intern",              excerpt: "Built and optimized ETL pipelines using Microsoft Fabric and Azure Data Factory. Integrated datasets into OneLake and created Power BI semantic models. Improved pipeline performance by 35% through optimization techniques.",              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 optimization dashboard",              authorName: "ElitCeler Technologies Pvt Ltd",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/modern-data-pipeline-dashboard-with-colo-1773295366417-e08aedfa.png",              date: "Jan 2025 – Jun 2025"
+              id: "1",              category: "Data Engineering",              title: "Data Engineering Intern",              excerpt: "Built and optimized ETL pipelines using Microsoft Fabric and Azure Data Factory. Integrated datasets into OneLake and created Power BI semantic models. Improved pipeline performance by 35% through optimization techniques.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/modern-data-pipeline-dashboard-with-colo-1773295366417-e08aedfa.png?_wi=1",              imageAlt: "Data pipeline optimization dashboard",              authorName: "ElitCeler Technologies Pvt Ltd",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/modern-data-pipeline-dashboard-with-colo-1773295366417-e08aedfa.png",              date: "Jan 2025 – Jun 2025"
             },
             {
-              id: "2",              category: "Machine Learning",              title: "Machine Learning Projects",              excerpt: "Developed and deployed machine learning models for real-world applications. Experience with neural networks, deep learning, and AI-powered solutions for data-driven decision making.",              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",              authorName: "Personal Research",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/molecular-structure-visualization-with-g-1773295366007-01f1dd8e.png",              date: "Ongoing"
+              id: "2",              category: "Machine Learning",              title: "Machine Learning Projects",              excerpt: "Developed and deployed machine learning models for real-world applications. Experience with neural networks, deep learning, and AI-powered solutions for data-driven decision making.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/molecular-structure-visualization-with-g-1773295366007-01f1dd8e.png?_wi=1",              imageAlt: "Molecular graph neural network",              authorName: "Personal Research",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/molecular-structure-visualization-with-g-1773295366007-01f1dd8e.png",              date: "Ongoing"
             }
           ]}
           carouselMode="buttons"
@@ -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?_wi=2",              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?_wi=2",              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?_wi=3",              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">
@@ -196,7 +288,7 @@ export default function LandingPage() {
           title="Let's Build Something Amazing Together"
           description="Whether you're looking for data pipeline optimization, machine learning solutions, or technical collaboration, I'd love to hear from you. Reach out today to discuss your project or opportunity."
           buttons={[
-            { text: "Send Email", href: "mailto:yuvrajreddyalimineti@gmail.com" },
+            { text: "Start a Project", href: "mailto:yuvrajreddyalimineti@gmail.com" },
             { text: "Call +1 (469) 636-6136", href: "tel:+14696366136" }
           ]}
           buttonAnimation="slide-up"
@@ -237,4 +329,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}