Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -8,7 +8,7 @@ import FeatureBento from '@/components/sections/feature/FeatureBento';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { Award, Briefcase, CheckCircle, Code, GitBranch, Layout, Mail, Server, Sparkles, TrendingUp, Users, BookOpen } from 'lucide-react';
+import { Award, Briefcase, CheckCircle, Code, GitBranch, Layout, Mail, Server, Sparkles, TrendingUp, Users, BookOpen, Zap, Shield } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -87,13 +87,31 @@ export default function LandingPage() {
           useInvertedBackground={true}
           features={[
             {
-              title: "Frontend Development",              description: "Master HTML5, CSS3, and JavaScript to build beautiful, interactive web interfaces. Learn responsive design, modern frameworks, and user experience best practices.",              bentoComponent: "reveal-icon",              icon: Layout
+              title: "Frontend Development",              description: "Master HTML5, CSS3, and JavaScript to build beautiful, interactive web interfaces. Learn responsive design, modern frameworks, and user experience best practices.",              bentoComponent: "3d-card-grid",              items: [
+                { name: "HTML5", icon: Code },
+                { name: "CSS3", icon: Layout },
+                { name: "JavaScript", icon: Zap },
+                { name: "React", icon: Shield }
+              ],
+              centerIcon: Layout
             },
             {
-              title: "Backend Development",              description: "Build robust server-side applications with Python and Node.js. Learn database design, API development, and scalable architecture patterns.",              bentoComponent: "reveal-icon",              icon: Server
+              title: "Backend Development",              description: "Build robust server-side applications with Python and Node.js. Learn database design, API development, and scalable architecture patterns.",              bentoComponent: "3d-card-grid",              items: [
+                { name: "Node.js", icon: Server },
+                { name: "Python", icon: Code },
+                { name: "Databases", icon: Shield },
+                { name: "APIs", icon: Zap }
+              ],
+              centerIcon: Server
             },
             {
-              title: "Full Stack Development",              description: "Combine frontend and backend skills to build complete web applications. Learn the entire development lifecycle from design to deployment.",              bentoComponent: "reveal-icon",              icon: GitBranch
+              title: "Full Stack Development",              description: "Combine frontend and backend skills to build complete web applications. Learn the entire development lifecycle from design to deployment.",              bentoComponent: "3d-card-grid",              items: [
+                { name: "Frontend", icon: Layout },
+                { name: "Backend", icon: Server },
+                { name: "DevOps", icon: GitBranch },
+                { name: "Deployment", icon: Zap }
+              ],
+              centerIcon: GitBranch
             }
           ]}
         />