diff --git a/content/docs/for-loop.mdx b/content/docs/for-loop.mdx
index 80e0fa47..42538283 100644
--- a/content/docs/for-loop.mdx
+++ b/content/docs/for-loop.mdx
@@ -38,7 +38,7 @@ To learn more about the conditions, visit [Java relational](operators#3-java-rel
 
 ![Working of Java if statement](/img/docs/working-of-for-loop.svg)
 
-<p align="center" className="text-base font-medium text-gray-600">
+<p align="center" className="text-base font-medium text-neutral-600">
   Flowchart of Java for loop
 </p>
 
diff --git a/content/docs/if-else-statement.mdx b/content/docs/if-else-statement.mdx
index e7db83be..222f09d0 100644
--- a/content/docs/if-else-statement.mdx
+++ b/content/docs/if-else-statement.mdx
@@ -32,7 +32,7 @@ Here, `condition` is a boolean expression such as `age >= 18`.
 
 ![Working of Java if statement](/img/docs/wroking-of-java-if-statement.svg)
 
-<p align="center" className="text-base font-medium text-gray-600">
+<p align="center" className="text-base font-medium text-neutral-600">
   Working of Java if statement
 </p>
 
@@ -120,7 +120,7 @@ Here, the program will do one task (codes inside if block) if the condition is t
 <div>
 ![Working of Java if statement](/img/docs/wroking-of-if-else-statement.svg)
 
-<p align="center" className="text-base font-medium text-gray-600">
+<p align="center" className="text-base font-medium text-neutral-600">
   Working of Java if-else statements
 </p>
 
diff --git a/content/docs/introduction.mdx b/content/docs/introduction.mdx
index a6cfd72a..f99f47b8 100644
--- a/content/docs/introduction.mdx
+++ b/content/docs/introduction.mdx
@@ -1,5 +1,5 @@
 ---
-title: Introduction
+title: Introduction to Java
 description: A quick introduction to Java programming language - features, applications, and getting started guide for beginners
 icon: Album
 ---
@@ -79,10 +79,7 @@ Besides these applications, Java is also used for game development, scientific a
 
 #### 1. Learn Java from Javaistic
 
-<span className="bg-gradient-to-br from-sky-400 to-indigo-500 bg-clip-text font-extrabold text-transparent">
-  Javaistic
-</span>
-offers a complete series of easy to follow Java tutorials along with suitable
+Javaistic offers a complete series of easy to follow Java tutorials along with suitable
 examples. These tutorials are targeted for absolute beginners with no prior
 knowledge of Java programming language.
 
diff --git a/content/docs/switch-statement.mdx b/content/docs/switch-statement.mdx
index 99fe64e0..e861c635 100644
--- a/content/docs/switch-statement.mdx
+++ b/content/docs/switch-statement.mdx
@@ -106,7 +106,7 @@ Here, the `size` variable is assigned with the value `Large`.
 
 ![Working of Java if statement](/img/docs/switch-case-flowchart.svg)
 
-<p align="center" className="text-base font-medium text-gray-600">
+<p align="center" className="text-base font-medium text-neutral-600">
   Flow chart of the Java switch statement
 </p>
 
diff --git a/public/bg.webp b/public/bg.webp
new file mode 100644
index 00000000..2cb57e20
Binary files /dev/null and b/public/bg.webp differ
diff --git a/public/img/docs-dark.png b/public/img/docs-dark.png
new file mode 100644
index 00000000..ef9d9035
Binary files /dev/null and b/public/img/docs-dark.png differ
diff --git a/public/img/docs-light.png b/public/img/docs-light.png
new file mode 100644
index 00000000..68c25893
Binary files /dev/null and b/public/img/docs-light.png differ
diff --git a/public/img/os-dark.png b/public/img/os-dark.png
new file mode 100644
index 00000000..9eb97a12
Binary files /dev/null and b/public/img/os-dark.png differ
diff --git a/public/img/os-light.png b/public/img/os-light.png
new file mode 100644
index 00000000..b78933df
Binary files /dev/null and b/public/img/os-light.png differ
diff --git a/public/img/playground-dark.png b/public/img/playground-dark.png
new file mode 100644
index 00000000..9b6d6780
Binary files /dev/null and b/public/img/playground-dark.png differ
diff --git a/public/img/playground-light.png b/public/img/playground-light.png
new file mode 100644
index 00000000..0c06befc
Binary files /dev/null and b/public/img/playground-light.png differ
diff --git a/public/img/programs-dark.png b/public/img/programs-dark.png
new file mode 100644
index 00000000..7bd71974
Binary files /dev/null and b/public/img/programs-dark.png differ
diff --git a/public/img/programs-light.png b/public/img/programs-light.png
new file mode 100644
index 00000000..0fbcc523
Binary files /dev/null and b/public/img/programs-light.png differ
diff --git a/public/img/ui-dark.png b/public/img/ui-dark.png
new file mode 100644
index 00000000..13cd52e9
Binary files /dev/null and b/public/img/ui-dark.png differ
diff --git a/public/img/ui-light.png b/public/img/ui-light.png
new file mode 100644
index 00000000..4cfd3745
Binary files /dev/null and b/public/img/ui-light.png differ
diff --git a/src/app/(site)/contact/page.tsx b/src/app/(site)/contact/page.tsx
index c1bad4df..ae435326 100644
--- a/src/app/(site)/contact/page.tsx
+++ b/src/app/(site)/contact/page.tsx
@@ -1,19 +1,19 @@
 "use client";
 import { motion, easeOut } from "framer-motion";
-import { 
-  Mail, 
-  MessageSquare, 
-  Github, 
-  Users, 
-  MapPin, 
-  Clock, 
-  Send,  
+import {
+  Mail,
+  MessageSquare,
+  Github,
+  Users,
+  MapPin,
+  Clock,
+  Send,
   Globe,
   BookOpen,
   Bug,
   Lightbulb,
   Heart,
-  ExternalLink
+  ExternalLink,
 } from "lucide-react";
 import { useState, useEffect } from "react";
 import Particles from "@/components/Particles";
@@ -33,10 +33,12 @@ const ContactUsPage = () => {
     email: "",
     subject: "",
     category: "",
-    message: ""
+    message: "",
   });
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const [submitStatus, setSubmitStatus] = useState<
+    "idle" | "success" | "error"
+  >("idle");
 
   useEffect(() => {
     const checkDarkMode = () => {
@@ -152,72 +154,76 @@ const ContactUsPage = () => {
   };
 
   const contactMethods = [
-    { 
-      title: "General Inquiries", 
-      url: "#general", 
-      icon: <Mail className="w-4 h-4" />,
-      description: "Questions about Javaistic platform"
+    {
+      title: "General Inquiries",
+      url: "#general",
+      icon: <Mail className="h-4 w-4" />,
+      description: "Questions about Javaistic platform",
     },
-    { 
-      title: "Technical Support", 
-      url: "#support", 
-      icon: <Bug className="w-4 h-4" />,
-      description: "Issues with learning platform"
+    {
+      title: "Technical Support",
+      url: "#support",
+      icon: <Bug className="h-4 w-4" />,
+      description: "Issues with learning platform",
     },
-    { 
-      title: "Community", 
-      url: "#community", 
-      icon: <Users className="w-4 h-4" />,
-      description: "Join our programming community"
+    {
+      title: "Community",
+      url: "#community",
+      icon: <Users className="h-4 w-4" />,
+      description: "Join our programming community",
     },
-    { 
-      title: "Contributions", 
-      url: "#contribute", 
-      icon: <Github className="w-4 h-4" />,
-      description: "Contribute to open source"
+    {
+      title: "Contributions",
+      url: "#contribute",
+      icon: <Github className="h-4 w-4" />,
+      description: "Contribute to open source",
     },
-    { 
-      title: "Partnerships", 
-      url: "#partnerships", 
-      icon: <Heart className="w-4 h-4" />,
-      description: "Collaborate with us"
+    {
+      title: "Partnerships",
+      url: "#partnerships",
+      icon: <Heart className="h-4 w-4" />,
+      description: "Collaborate with us",
+    },
+    {
+      title: "Feedback",
+      url: "#feedback",
+      icon: <Lightbulb className="h-4 w-4" />,
+      description: "Share your suggestions",
     },
-    { 
-      title: "Feedback", 
-      url: "#feedback", 
-      icon: <Lightbulb className="w-4 h-4" />,
-      description: "Share your suggestions"
-    }
   ];
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+  const handleInputChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) => {
     const { name, value } = e.target;
-    setFormData(prev => ({
+    setFormData((prev) => ({
       ...prev,
-      [name]: value
+      [name]: value,
     }));
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsSubmitting(true);
-    
+
     // Simulate form submission
     try {
-      await new Promise(resolve => setTimeout(resolve, 2000));
-      setSubmitStatus('success');
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      setSubmitStatus("success");
       setFormData({
         name: "",
         email: "",
         subject: "",
         category: "",
-        message: ""
+        message: "",
       });
-    } catch (error) {
-      setSubmitStatus('error');
+    } catch {
+      setSubmitStatus("error");
     } finally {
       setIsSubmitting(false);
-      setTimeout(() => setSubmitStatus('idle'), 5000);
+      setTimeout(() => setSubmitStatus("idle"), 5000);
     }
   };
 
@@ -249,7 +255,7 @@ const ContactUsPage = () => {
         />
       </div>
 
-      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <motion.div
           className="pt-20 pb-16 text-center"
@@ -266,27 +272,35 @@ const ContactUsPage = () => {
               Us
             </span>
           </motion.h1>
-          
+
           <motion.p
             className="text-muted-foreground mt-6 max-w-6xl text-lg sm:text-xl"
             variants={itemVariants}
           >
-            We&apos;d love to hear from you! Whether you have questions, feedback, or want to contribute to our open-source Java learning platform.
+            We&apos;d love to hear from you! Whether you have questions,
+            feedback, or want to contribute to our open-source Java learning
+            platform.
           </motion.p>
-          
+
           <motion.div
             className={`mt-8 text-sm ${
-              isDarkMode ? 'text-gray-400' : 'text-gray-500'
+              isDarkMode ? "text-gray-400" : "text-gray-500"
             } space-y-1 transition-colors duration-300`}
             variants={itemVariants}
           >
-            <p><span className="font-semibold">Response Time:</span> Usually within 24 hours</p>
-            <p><span className="font-semibold">Support Hours:</span> Monday - Friday, 9 AM - 6 PM UTC</p>
+            <p>
+              <span className="font-semibold">Response Time:</span> Usually
+              within 24 hours
+            </p>
+            <p>
+              <span className="font-semibold">Support Hours:</span> Monday -
+              Friday, 9 AM - 6 PM UTC
+            </p>
           </motion.div>
         </motion.div>
 
         {/* Main Content */}
-        <div className="flex flex-col lg:flex-row gap-12">
+        <div className="flex flex-col gap-12 lg:flex-row">
           {/* Contact Methods Sidebar */}
           <motion.div
             className="lg:w-1/3"
@@ -295,10 +309,8 @@ const ContactUsPage = () => {
             animate="visible"
           >
             <div className="sticky top-8 space-y-6">
-              <motion.div 
-                className="bg-white/80 backdrop-blur-sm border border-gray-200 shadow-lg dark:bg-gray-900/70 dark:border-gray-700/50 rounded-2xl p-6 shadow-2xl transition-colors duration-300"
-              >
-                <h3 className="font-bold text-lg text-gray-900 dark:text-white mb-6 transition-colors duration-300">
+              <motion.div className="rounded-2xl border border-gray-200 bg-white/80 p-6 shadow-2xl shadow-lg backdrop-blur-sm transition-colors duration-300 dark:border-gray-700/50 dark:bg-gray-900/70">
+                <h3 className="mb-6 text-lg font-bold text-gray-900 transition-colors duration-300 dark:text-white">
                   How can we help?
                 </h3>
                 <nav className="space-y-3">
@@ -306,16 +318,20 @@ const ContactUsPage = () => {
                     <motion.a
                       key={index}
                       href={method.url}
-                      className="block p-4 rounded-xl text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50 dark:text-gray-300 dark:hover:text-blue-400 dark:hover:bg-blue-500/10 transition-all duration-200 group"
+                      className="group block rounded-xl p-4 text-sm text-gray-600 transition-all duration-200 hover:bg-blue-50 hover:text-blue-600 dark:text-gray-300 dark:hover:bg-blue-500/10 dark:hover:text-blue-400"
                       whileHover={{ x: 5 }}
                     >
                       <div className="flex items-start">
-                        <span className="mr-3 text-blue-500 group-hover:text-blue-600 dark:text-blue-400 dark:group-hover:text-blue-300 transition-colors mt-1">
+                        <span className="mt-1 mr-3 text-blue-500 transition-colors group-hover:text-blue-600 dark:text-blue-400 dark:group-hover:text-blue-300">
                           {method.icon}
                         </span>
                         <div>
-                          <div className="font-semibold mb-1">{method.title}</div>
-                          <div className="text-xs opacity-70">{method.description}</div>
+                          <div className="mb-1 font-semibold">
+                            {method.title}
+                          </div>
+                          <div className="text-xs opacity-70">
+                            {method.description}
+                          </div>
                         </div>
                       </div>
                     </motion.a>
@@ -324,44 +340,56 @@ const ContactUsPage = () => {
               </motion.div>
 
               {/* Quick Contact Info */}
-              <motion.div 
-                className="bg-white/80 backdrop-blur-sm border border-gray-200 shadow-lg dark:bg-gray-900/70 dark:border-gray-700/50 rounded-2xl p-6 shadow-2xl transition-colors duration-300"
+              <motion.div
+                className="rounded-2xl border border-gray-200 bg-white/80 p-6 shadow-2xl shadow-lg backdrop-blur-sm transition-colors duration-300 dark:border-gray-700/50 dark:bg-gray-900/70"
                 variants={itemVariants}
               >
-                <h3 className="font-bold text-lg text-gray-900 dark:text-white mb-4 transition-colors duration-300">
+                <h3 className="mb-4 text-lg font-bold text-gray-900 transition-colors duration-300 dark:text-white">
                   Quick Contact
                 </h3>
                 <div className="space-y-4">
-                  <motion.div 
-                    className="flex items-center p-3 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-500/20 dark:to-indigo-500/20 rounded-lg transition-colors duration-300"
+                  <motion.div
+                    className="flex items-center rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 p-3 transition-colors duration-300 dark:from-blue-500/20 dark:to-indigo-500/20"
                     whileHover={{ scale: 1.02 }}
                   >
-                    <Mail className="w-5 h-5 text-blue-500 dark:text-blue-400 mr-3" />
+                    <Mail className="mr-3 h-5 w-5 text-blue-500 dark:text-blue-400" />
                     <div>
-                      <p className="font-semibold text-gray-900 dark:text-white text-sm">Email</p>
-                      <p className="text-gray-600 dark:text-gray-300 text-xs">uiuxarghya@gmail.com</p>
+                      <p className="text-sm font-semibold text-gray-900 dark:text-white">
+                        Email
+                      </p>
+                      <p className="text-xs text-gray-600 dark:text-gray-300">
+                        uiuxarghya@gmail.com
+                      </p>
                     </div>
                   </motion.div>
-                  
-                  <motion.div 
-                    className="flex items-center p-3 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-500/20 dark:to-pink-500/20 rounded-lg transition-colors duration-300"
+
+                  <motion.div
+                    className="flex items-center rounded-lg bg-gradient-to-r from-purple-50 to-pink-50 p-3 transition-colors duration-300 dark:from-purple-500/20 dark:to-pink-500/20"
                     whileHover={{ scale: 1.02 }}
                   >
-                    <Github className="w-5 h-5 text-purple-500 dark:text-purple-400 mr-3" />
+                    <Github className="mr-3 h-5 w-5 text-purple-500 dark:text-purple-400" />
                     <div>
-                      <p className="font-semibold text-gray-900 dark:text-white text-sm">GitHub</p>
-                      <p className="text-gray-600 dark:text-gray-300 text-xs">github.com/javaistic</p>
+                      <p className="text-sm font-semibold text-gray-900 dark:text-white">
+                        GitHub
+                      </p>
+                      <p className="text-xs text-gray-600 dark:text-gray-300">
+                        github.com/javaistic
+                      </p>
                     </div>
                   </motion.div>
-                  
-                  <motion.div 
-                    className="flex items-center p-3 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-500/20 dark:to-emerald-500/20 rounded-lg transition-colors duration-300"
+
+                  <motion.div
+                    className="flex items-center rounded-lg bg-gradient-to-r from-green-50 to-emerald-50 p-3 transition-colors duration-300 dark:from-green-500/20 dark:to-emerald-500/20"
                     whileHover={{ scale: 1.02 }}
                   >
-                    <Users className="w-5 h-5 text-green-500 dark:text-green-400 mr-3" />
+                    <Users className="mr-3 h-5 w-5 text-green-500 dark:text-green-400" />
                     <div>
-                      <p className="font-semibold text-gray-900 dark:text-white text-sm">Community</p>
-                      <p className="text-gray-600 dark:text-gray-300 text-xs">Join our Discord</p>
+                      <p className="text-sm font-semibold text-gray-900 dark:text-white">
+                        Community
+                      </p>
+                      <p className="text-xs text-gray-600 dark:text-gray-300">
+                        Join our Discord
+                      </p>
                     </div>
                   </motion.div>
                 </div>
@@ -377,28 +405,38 @@ const ContactUsPage = () => {
             animate="visible"
             viewport={{ once: true }}
           >
-            <div className="bg-white/80 backdrop-blur-sm border border-gray-200 shadow-lg dark:bg-gray-900/70 dark:border-gray-700/50 rounded-2xl p-8 shadow-2xl transition-colors duration-300">
-              
+            <div className="rounded-2xl border border-gray-200 bg-white/80 p-8 shadow-2xl shadow-lg backdrop-blur-sm transition-colors duration-300 dark:border-gray-700/50 dark:bg-gray-900/70">
               {/* Form Header */}
               <motion.div className="mb-8" variants={itemVariants}>
-                <div className="flex items-center mb-4">
-                  <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center mr-4">
-                    <Send className="w-6 h-6 text-white" />
+                <div className="mb-4 flex items-center">
+                  <div className="mr-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-purple-600">
+                    <Send className="h-6 w-6 text-white" />
                   </div>
-                  <h2 className="text-3xl font-bold text-gray-900 dark:text-white transition-colors duration-300">
+                  <h2 className="text-3xl font-bold text-gray-900 transition-colors duration-300 dark:text-white">
                     Send us a Message
                   </h2>
                 </div>
-                <p className="text-gray-600 dark:text-gray-300 transition-colors duration-300">
-                  Fill out the form below and we&apos;ll get back to you as soon as possible. We value your feedback and are here to help!
+                <p className="text-gray-600 transition-colors duration-300 dark:text-gray-300">
+                  Fill out the form below and we&apos;ll get back to you as soon
+                  as possible. We value your feedback and are here to help!
                 </p>
               </motion.div>
 
               {/* Contact Form */}
-              <motion.form onSubmit={handleSubmit} className="space-y-6" variants={itemVariants}>
-                <div className="grid md:grid-cols-2 gap-6">
-                  <motion.div whileHover={{ y: -2 }} className="transition-transform">
-                    <label htmlFor="name" className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+              <motion.form
+                onSubmit={handleSubmit}
+                className="space-y-6"
+                variants={itemVariants}
+              >
+                <div className="grid gap-6 md:grid-cols-2">
+                  <motion.div
+                    whileHover={{ y: -2 }}
+                    className="transition-transform"
+                  >
+                    <label
+                      htmlFor="name"
+                      className="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
+                    >
                       Full Name *
                     </label>
                     <input
@@ -408,13 +446,19 @@ const ContactUsPage = () => {
                       value={formData.name}
                       onChange={handleInputChange}
                       required
-                      className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+                      className="w-full rounded-xl border border-gray-300 bg-white px-4 py-3 text-gray-900 placeholder-gray-500 transition-all duration-200 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
                       placeholder="Enter your full name"
                     />
                   </motion.div>
 
-                  <motion.div whileHover={{ y: -2 }} className="transition-transform">
-                    <label htmlFor="email" className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                  <motion.div
+                    whileHover={{ y: -2 }}
+                    className="transition-transform"
+                  >
+                    <label
+                      htmlFor="email"
+                      className="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
+                    >
                       Email Address *
                     </label>
                     <input
@@ -424,15 +468,21 @@ const ContactUsPage = () => {
                       value={formData.email}
                       onChange={handleInputChange}
                       required
-                      className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+                      className="w-full rounded-xl border border-gray-300 bg-white px-4 py-3 text-gray-900 placeholder-gray-500 transition-all duration-200 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
                       placeholder="your.email@example.com"
                     />
                   </motion.div>
                 </div>
 
-                <div className="grid md:grid-cols-2 gap-6">
-                  <motion.div whileHover={{ y: -2 }} className="transition-transform">
-                    <label htmlFor="category" className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                <div className="grid gap-6 md:grid-cols-2">
+                  <motion.div
+                    whileHover={{ y: -2 }}
+                    className="transition-transform"
+                  >
+                    <label
+                      htmlFor="category"
+                      className="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
+                    >
                       Category *
                     </label>
                     <select
@@ -441,7 +491,7 @@ const ContactUsPage = () => {
                       value={formData.category}
                       onChange={handleInputChange}
                       required
-                      className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+                      className="w-full rounded-xl border border-gray-300 bg-white px-4 py-3 text-gray-900 transition-all duration-200 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
                     >
                       <option value="">Select a category</option>
                       <option value="general">General Inquiry</option>
@@ -454,8 +504,14 @@ const ContactUsPage = () => {
                     </select>
                   </motion.div>
 
-                  <motion.div whileHover={{ y: -2 }} className="transition-transform">
-                    <label htmlFor="subject" className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                  <motion.div
+                    whileHover={{ y: -2 }}
+                    className="transition-transform"
+                  >
+                    <label
+                      htmlFor="subject"
+                      className="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
+                    >
                       Subject *
                     </label>
                     <input
@@ -465,14 +521,20 @@ const ContactUsPage = () => {
                       value={formData.subject}
                       onChange={handleInputChange}
                       required
-                      className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+                      className="w-full rounded-xl border border-gray-300 bg-white px-4 py-3 text-gray-900 placeholder-gray-500 transition-all duration-200 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
                       placeholder="Brief description of your inquiry"
                     />
                   </motion.div>
                 </div>
 
-                <motion.div whileHover={{ y: -2 }} className="transition-transform">
-                  <label htmlFor="message" className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                <motion.div
+                  whileHover={{ y: -2 }}
+                  className="transition-transform"
+                >
+                  <label
+                    htmlFor="message"
+                    className="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
+                  >
                     Message *
                   </label>
                   <textarea
@@ -482,32 +544,34 @@ const ContactUsPage = () => {
                     onChange={handleInputChange}
                     required
                     rows={6}
-                    className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 resize-none"
+                    className="w-full resize-none rounded-xl border border-gray-300 bg-white px-4 py-3 text-gray-900 placeholder-gray-500 transition-all duration-200 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
                     placeholder="Please provide as much detail as possible about your inquiry..."
                   />
                 </motion.div>
 
                 {/* Submit Status */}
-                {submitStatus === 'success' && (
+                {submitStatus === "success" && (
                   <motion.div
                     initial={{ opacity: 0, y: 10 }}
                     animate={{ opacity: 1, y: 0 }}
-                    className="p-4 bg-green-50 dark:bg-green-500/20 border border-green-200 dark:border-green-500/30 rounded-xl"
+                    className="rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-500/30 dark:bg-green-500/20"
                   >
-                    <p className="text-green-700 dark:text-green-300 font-medium">
-                      Thank you! Your message has been sent successfully. We&apos;ll get back to you soon.
+                    <p className="font-medium text-green-700 dark:text-green-300">
+                      Thank you! Your message has been sent successfully.
+                      We&apos;ll get back to you soon.
                     </p>
                   </motion.div>
                 )}
 
-                {submitStatus === 'error' && (
+                {submitStatus === "error" && (
                   <motion.div
                     initial={{ opacity: 0, y: 10 }}
                     animate={{ opacity: 1, y: 0 }}
-                    className="p-4 bg-red-50 dark:bg-red-500/20 border border-red-200 dark:border-red-500/30 rounded-xl"
+                    className="rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-500/30 dark:bg-red-500/20"
                   >
-                    <p className="text-red-700 dark:text-red-300 font-medium">
-                      Sorry, there was an error sending your message. Please try again or contact us directly.
+                    <p className="font-medium text-red-700 dark:text-red-300">
+                      Sorry, there was an error sending your message. Please try
+                      again or contact us directly.
                     </p>
                   </motion.div>
                 )}
@@ -515,18 +579,18 @@ const ContactUsPage = () => {
                 <motion.button
                   type="submit"
                   disabled={isSubmitting}
-                  className="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 flex items-center justify-center"
+                  className="flex w-full items-center justify-center rounded-xl bg-gradient-to-r from-blue-500 to-purple-600 px-6 py-4 font-semibold text-white transition-all duration-200 hover:from-blue-600 hover:to-purple-700 disabled:cursor-not-allowed disabled:opacity-50"
                   whileHover={{ scale: isSubmitting ? 1 : 1.02 }}
                   whileTap={{ scale: isSubmitting ? 1 : 0.98 }}
                 >
                   {isSubmitting ? (
                     <>
-                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
+                      <div className="mr-2 h-5 w-5 animate-spin rounded-full border-b-2 border-white"></div>
                       Sending Message...
                     </>
                   ) : (
                     <>
-                      <Send className="w-5 h-5 mr-2" />
+                      <Send className="mr-2 h-5 w-5" />
                       Send Message
                     </>
                   )}
@@ -546,24 +610,26 @@ const ContactUsPage = () => {
         >
           {/* General Inquiries */}
           <motion.section id="general" variants={itemVariants}>
-            <div className="flex items-center mb-6">
-              <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl flex items-center justify-center mr-4">
-                <Mail className="w-6 h-6 text-white" />
+            <div className="mb-6 flex items-center">
+              <div className="mr-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600">
+                <Mail className="h-6 w-6 text-white" />
               </div>
-              <h2 className="text-3xl font-bold text-gray-900 dark:text-white transition-colors duration-300">
+              <h2 className="text-3xl font-bold text-gray-900 transition-colors duration-300 dark:text-white">
                 General Inquiries
               </h2>
             </div>
-            
-            <div className="grid md:grid-cols-2 gap-6">
-              <div className="bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-500/20 dark:to-cyan-500/20 border border-blue-200 dark:border-blue-500/30 rounded-xl p-6 transition-colors duration-300">
-                <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+
+            <div className="grid gap-6 md:grid-cols-2">
+              <div className="rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-cyan-50 p-6 transition-colors duration-300 dark:border-blue-500/30 dark:from-blue-500/20 dark:to-cyan-500/20">
+                <h3 className="mb-4 text-xl font-semibold text-gray-900 dark:text-white">
                   Platform Information
                 </h3>
-                <p className="text-gray-600 dark:text-gray-300 mb-4">
-                  Have questions about Javaistic&apos;s features, learning paths, or how to get started? We&apos;re here to help you navigate your Java learning journey.
+                <p className="mb-4 text-gray-600 dark:text-gray-300">
+                  Have questions about Javaistic&apos;s features, learning
+                  paths, or how to get started? We&apos;re here to help you
+                  navigate your Java learning journey.
                 </p>
-                <ul className="space-y-2 text-gray-600 dark:text-gray-300 text-sm">
+                <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                   <li>• Course structure and learning paths</li>
                   <li>• Platform features and tools</li>
                   <li>• Account setup and management</li>
@@ -571,14 +637,16 @@ const ContactUsPage = () => {
                 </ul>
               </div>
 
-              <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-500/20 dark:to-pink-500/20 border border-purple-200 dark:border-purple-500/30 rounded-xl p-6 transition-colors duration-300">
-                <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+              <div className="rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 p-6 transition-colors duration-300 dark:border-purple-500/30 dark:from-purple-500/20 dark:to-pink-500/20">
+                <h3 className="mb-4 text-xl font-semibold text-gray-900 dark:text-white">
                   Educational Support
                 </h3>
-                <p className="text-gray-600 dark:text-gray-300 mb-4">
-                  Need guidance on your Java learning path or have questions about programming concepts? Our education team is ready to assist.
+                <p className="mb-4 text-gray-600 dark:text-gray-300">
+                  Need guidance on your Java learning path or have questions
+                  about programming concepts? Our education team is ready to
+                  assist.
                 </p>
-                <ul className="space-y-2 text-gray-600 dark:text-gray-300 text-sm">
+                <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                   <li>• Learning path recommendations</li>
                   <li>• Study tips and strategies</li>
                   <li>• Career guidance in Java development</li>
@@ -590,25 +658,26 @@ const ContactUsPage = () => {
 
           {/* Technical Support */}
           <motion.section id="support" variants={itemVariants}>
-            <div className="flex items-center mb-6">
-              <div className="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-600 rounded-xl flex items-center justify-center mr-4">
-                <Bug className="w-6 h-6 text-white" />
+            <div className="mb-6 flex items-center">
+              <div className="mr-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500 to-red-600">
+                <Bug className="h-6 w-6 text-white" />
               </div>
-              <h2 className="text-3xl font-bold text-gray-900 dark:text-white transition-colors duration-300">
+              <h2 className="text-3xl font-bold text-gray-900 transition-colors duration-300 dark:text-white">
                 Technical Support
               </h2>
             </div>
 
-            <div className="bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-500/20 dark:to-red-500/20 border border-orange-200 dark:border-orange-500/30 rounded-xl p-8 transition-colors duration-300">
-              <div className="grid md:grid-cols-3 gap-6">
+            <div className="rounded-xl border border-orange-200 bg-gradient-to-r from-orange-50 to-red-50 p-8 transition-colors duration-300 dark:border-orange-500/30 dark:from-orange-500/20 dark:to-red-500/20">
+              <div className="grid gap-6 md:grid-cols-3">
                 <div>
-                  <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
+                  <h3 className="mb-3 text-xl font-semibold text-gray-900 dark:text-white">
                     Bug Reports
                   </h3>
-                  <p className="text-gray-600 dark:text-gray-300 text-sm mb-3">
-                    Found a bug? Help us improve by reporting issues you encounter.
+                  <p className="mb-3 text-sm text-gray-600 dark:text-gray-300">
+                    Found a bug? Help us improve by reporting issues you
+                    encounter.
                   </p>
-                  <ul className="space-y-1 text-gray-600 dark:text-gray-300 text-xs">
+                  <ul className="space-y-1 text-xs text-gray-600 dark:text-gray-300">
                     <li>• Detailed error descriptions</li>
                     <li>• Browser and device info</li>
                     <li>• Steps to reproduce</li>
@@ -616,13 +685,14 @@ const ContactUsPage = () => {
                 </div>
 
                 <div>
-                  <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
+                  <h3 className="mb-3 text-xl font-semibold text-gray-900 dark:text-white">
                     Platform Issues
                   </h3>
-                  <p className="text-gray-600 dark:text-gray-300 text-sm mb-3">
-                    Experiencing technical difficulties with the learning platform?
+                  <p className="mb-3 text-sm text-gray-600 dark:text-gray-300">
+                    Experiencing technical difficulties with the learning
+                    platform?
                   </p>
-                  <ul className="space-y-1 text-gray-600 dark:text-gray-300 text-xs">
+                  <ul className="space-y-1 text-xs text-gray-600 dark:text-gray-300">
                     <li>• Login and access issues</li>
                     <li>• Code editor problems</li>
                     <li>• Progress tracking errors</li>
@@ -630,13 +700,13 @@ const ContactUsPage = () => {
                 </div>
 
                 <div>
-                  <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
+                  <h3 className="mb-3 text-xl font-semibold text-gray-900 dark:text-white">
                     Performance
                   </h3>
-                  <p className="text-gray-600 dark:text-gray-300 text-sm mb-3">
+                  <p className="mb-3 text-sm text-gray-600 dark:text-gray-300">
                     Platform running slow or not performing as expected?
                   </p>
-                  <ul className="space-y-1 text-gray-600 dark:text-gray-300 text-xs">
+                  <ul className="space-y-1 text-xs text-gray-600 dark:text-gray-300">
                     <li>• Slow loading times</li>
                     <li>• Compilation issues</li>
                     <li>• Browser compatibility</li>
@@ -648,96 +718,114 @@ const ContactUsPage = () => {
 
           {/* Community & Contributions */}
           <motion.section id="community" variants={itemVariants}>
-            <div className="flex items-center mb-6">
-              <div className="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center mr-4">
-                <Users className="w-6 h-6 text-white" />
+            <div className="mb-6 flex items-center">
+              <div className="mr-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-green-500 to-emerald-600">
+                <Users className="h-6 w-6 text-white" />
               </div>
-              <h2 className="text-3xl font-bold text-gray-900 dark:text-white transition-colors duration-300">
+              <h2 className="text-3xl font-bold text-gray-900 transition-colors duration-300 dark:text-white">
                 Community & Open Source
               </h2>
             </div>
 
-            <div className="grid md:grid-cols-2 gap-8">
-              <motion.div 
-                className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-500/20 dark:to-emerald-500/20 border border-green-200 dark:border-green-500/30 rounded-xl p-6 transition-colors duration-300"
+            <div className="grid gap-8 md:grid-cols-2">
+              <motion.div
+                className="rounded-xl border border-green-200 bg-gradient-to-br from-green-50 to-emerald-50 p-6 transition-colors duration-300 dark:border-green-500/30 dark:from-green-500/20 dark:to-emerald-500/20"
                 whileHover={{ y: -5 }}
               >
-                <div className="flex items-center mb-4">
-                  <Users className="w-8 h-8 text-green-500 dark:text-green-400 mr-3" />
+                <div className="mb-4 flex items-center">
+                  <Users className="mr-3 h-8 w-8 text-green-500 dark:text-green-400" />
                   <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                     Join Our Community
                   </h3>
                 </div>
-                <p className="text-gray-600 dark:text-gray-300 mb-4">
-                  Connect with fellow Java learners, share knowledge, and get help from our vibrant community.
+                <p className="mb-4 text-gray-600 dark:text-gray-300">
+                  Connect with fellow Java learners, share knowledge, and get
+                  help from our vibrant community.
                 </p>
                 <div className="space-y-3">
-                  <motion.a 
+                  <motion.a
                     href="#"
-                    className="flex items-center p-3 bg-white dark:bg-gray-800/50 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors group"
+                    className="group flex items-center rounded-lg bg-white p-3 transition-colors hover:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-gray-700/50"
                     whileHover={{ x: 5 }}
                   >
-                    <MessageSquare className="w-5 h-5 text-blue-500 mr-3" />
+                    <MessageSquare className="mr-3 h-5 w-5 text-blue-500" />
                     <div>
-                      <p className="font-medium text-gray-900 dark:text-white">Discord Server</p>
-                      <p className="text-sm text-gray-500 dark:text-gray-400">Real-time chat and discussions</p>
+                      <p className="font-medium text-gray-900 dark:text-white">
+                        Discord Server
+                      </p>
+                      <p className="text-sm text-gray-500 dark:text-gray-400">
+                        Real-time chat and discussions
+                      </p>
                     </div>
-                    <ExternalLink className="w-4 h-4 ml-auto text-gray-400 group-hover:text-blue-500" />
+                    <ExternalLink className="ml-auto h-4 w-4 text-gray-400 group-hover:text-blue-500" />
                   </motion.a>
-                  
-                  <motion.a 
+
+                  <motion.a
                     href="https://github.com/orgs/javaistic/discussions"
-                    className="flex items-center p-3 bg-white dark:bg-gray-800/50 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors group"
+                    className="group flex items-center rounded-lg bg-white p-3 transition-colors hover:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-gray-700/50"
                     whileHover={{ x: 5 }}
                   >
-                    <BookOpen className="w-5 h-5 text-purple-500 mr-3" />
+                    <BookOpen className="mr-3 h-5 w-5 text-purple-500" />
                     <div>
-                      <p className="font-medium text-gray-900 dark:text-white">GitHub Discussions</p>
-                      <p className="text-sm text-gray-500 dark:text-gray-400">Q&A and knowledge sharing</p>
+                      <p className="font-medium text-gray-900 dark:text-white">
+                        GitHub Discussions
+                      </p>
+                      <p className="text-sm text-gray-500 dark:text-gray-400">
+                        Q&A and knowledge sharing
+                      </p>
                     </div>
-                    <ExternalLink className="w-4 h-4 ml-auto text-gray-400 group-hover:text-purple-500" />
+                    <ExternalLink className="ml-auto h-4 w-4 text-gray-400 group-hover:text-purple-500" />
                   </motion.a>
                 </div>
               </motion.div>
 
-              <motion.div 
-                className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-500/20 dark:to-pink-500/20 border border-purple-200 dark:border-purple-500/30 rounded-xl p-6 transition-colors duration-300"
+              <motion.div
+                className="rounded-xl border border-purple-200 bg-gradient-to-br from-purple-50 to-pink-50 p-6 transition-colors duration-300 dark:border-purple-500/30 dark:from-purple-500/20 dark:to-pink-500/20"
                 whileHover={{ y: -5 }}
               >
-                <div className="flex items-center mb-4">
-                  <Github className="w-8 h-8 text-purple-500 dark:text-purple-400 mr-3" />
+                <div className="mb-4 flex items-center">
+                  <Github className="mr-3 h-8 w-8 text-purple-500 dark:text-purple-400" />
                   <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                     Contribute to Open Source
                   </h3>
                 </div>
-                <p className="text-gray-600 dark:text-gray-300 mb-4">
-                  Help improve Javaistic by contributing code, documentation, or educational content.
+                <p className="mb-4 text-gray-600 dark:text-gray-300">
+                  Help improve Javaistic by contributing code, documentation, or
+                  educational content.
                 </p>
                 <div className="space-y-3">
-                  <motion.a 
+                  <motion.a
                     href="https://github.com/javaistic/javaistic"
-                    className="flex items-center p-3 bg-white dark:bg-gray-800/50 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors group"
+                    className="group flex items-center rounded-lg bg-white p-3 transition-colors hover:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-gray-700/50"
                     whileHover={{ x: 5 }}
                   >
-                    <Github className="w-5 h-5 text-gray-700 dark:text-gray-300 mr-3" />
+                    <Github className="mr-3 h-5 w-5 text-gray-700 dark:text-gray-300" />
                     <div>
-                      <p className="font-medium text-gray-900 dark:text-white">GitHub Repository</p>
-                      <p className="text-sm text-gray-500 dark:text-gray-400">View source code and contribute</p>
+                      <p className="font-medium text-gray-900 dark:text-white">
+                        GitHub Repository
+                      </p>
+                      <p className="text-sm text-gray-500 dark:text-gray-400">
+                        View source code and contribute
+                      </p>
                     </div>
-                    <ExternalLink className="w-4 h-4 ml-auto text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300" />
+                    <ExternalLink className="ml-auto h-4 w-4 text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300" />
                   </motion.a>
-                  
-                  <motion.a 
+
+                  <motion.a
                     href="https://github.com/javaistic/javaistic/blob/main/CONTRIBUTING.md"
-                    className="flex items-center p-3 bg-white dark:bg-gray-800/50 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors group"
+                    className="group flex items-center rounded-lg bg-white p-3 transition-colors hover:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-gray-700/50"
                     whileHover={{ x: 5 }}
                   >
-                    <BookOpen className="w-5 h-5 text-orange-500 mr-3" />
+                    <BookOpen className="mr-3 h-5 w-5 text-orange-500" />
                     <div>
-                      <p className="font-medium text-gray-900 dark:text-white">Contributor Guidelines</p>
-                      <p className="text-sm text-gray-500 dark:text-gray-400">Learn how to contribute</p>
+                      <p className="font-medium text-gray-900 dark:text-white">
+                        Contributor Guidelines
+                      </p>
+                      <p className="text-sm text-gray-500 dark:text-gray-400">
+                        Learn how to contribute
+                      </p>
                     </div>
-                    <ExternalLink className="w-4 h-4 ml-auto text-gray-400 group-hover:text-orange-500" />
+                    <ExternalLink className="ml-auto h-4 w-4 text-gray-400 group-hover:text-orange-500" />
                   </motion.a>
                 </div>
               </motion.div>
@@ -746,72 +834,91 @@ const ContactUsPage = () => {
 
           {/* Office Information */}
           <motion.section variants={itemVariants}>
-            <div className="flex items-center mb-6">
-              <div className="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center mr-4">
-                <MapPin className="w-6 h-6 text-white" />
+            <div className="mb-6 flex items-center">
+              <div className="mr-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600">
+                <MapPin className="h-6 w-6 text-white" />
               </div>
-              <h2 className="text-3xl font-bold text-gray-900 dark:text-white transition-colors duration-300">
+              <h2 className="text-3xl font-bold text-gray-900 transition-colors duration-300 dark:text-white">
                 Our Information
               </h2>
             </div>
 
-            <div className="grid md:grid-cols-3 gap-6">
-              <motion.div 
-                className="bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-indigo-500/20 dark:to-blue-500/20 border border-indigo-200 dark:border-indigo-500/30 rounded-xl p-6 transition-colors duration-300"
+            <div className="grid gap-6 md:grid-cols-3">
+              <motion.div
+                className="rounded-xl border border-indigo-200 bg-gradient-to-r from-indigo-50 to-blue-50 p-6 transition-colors duration-300 dark:border-indigo-500/30 dark:from-indigo-500/20 dark:to-blue-500/20"
                 whileHover={{ scale: 1.02 }}
               >
-                <div className="flex items-center mb-4">
-                  <Clock className="w-8 h-8 text-indigo-500 dark:text-indigo-400 mr-3" />
+                <div className="mb-4 flex items-center">
+                  <Clock className="mr-3 h-8 w-8 text-indigo-500 dark:text-indigo-400" />
                   <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                     Support Hours
                   </h3>
                 </div>
                 <div className="space-y-2 text-gray-600 dark:text-gray-300">
-                  <p><span className="font-semibold">Monday - Friday:</span> 9:00 AM - 6:00 PM UTC</p>
-                  <p><span className="font-semibold">Saturday:</span> 10:00 AM - 4:00 PM UTC</p>
-                  <p><span className="font-semibold">Sunday:</span> Closed</p>
-                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-3">
+                  <p>
+                    <span className="font-semibold">Monday - Friday:</span> 9:00
+                    AM - 6:00 PM UTC
+                  </p>
+                  <p>
+                    <span className="font-semibold">Saturday:</span> 10:00 AM -
+                    4:00 PM UTC
+                  </p>
+                  <p>
+                    <span className="font-semibold">Sunday:</span> Closed
+                  </p>
+                  <p className="mt-3 text-sm text-gray-500 dark:text-gray-400">
                     Community support available 24/7 through our Discord server
                   </p>
                 </div>
               </motion.div>
 
-              <motion.div 
-                className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-500/20 dark:to-emerald-500/20 border border-green-200 dark:border-green-500/30 rounded-xl p-6 transition-colors duration-300"
+              <motion.div
+                className="rounded-xl border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 p-6 transition-colors duration-300 dark:border-green-500/30 dark:from-green-500/20 dark:to-emerald-500/20"
                 whileHover={{ scale: 1.02 }}
               >
-                <div className="flex items-center mb-4">
-                  <Globe className="w-8 h-8 text-green-500 dark:text-green-400 mr-3" />
+                <div className="mb-4 flex items-center">
+                  <Globe className="mr-3 h-8 w-8 text-green-500 dark:text-green-400" />
                   <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                     Global Reach
                   </h3>
                 </div>
                 <div className="space-y-2 text-gray-600 dark:text-gray-300">
-                  <p><span className="font-semibold">Headquarters:</span> Remote-First</p>
-                  <p><span className="font-semibold">Team Location:</span> India</p>
-                  <p><span className="font-semibold">Languages:</span> English (Primary)</p>
-                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-3">
+                  <p>
+                    <span className="font-semibold">Headquarters:</span>{" "}
+                    Remote-First
+                  </p>
+                  <p>
+                    <span className="font-semibold">Team Location:</span> India
+                  </p>
+                  <p>
+                    <span className="font-semibold">Languages:</span> English
+                    (Primary)
+                  </p>
+                  <p className="mt-3 text-sm text-gray-500 dark:text-gray-400">
                     Our distributed team serves learners globally
                   </p>
                 </div>
               </motion.div>
 
-              <motion.div 
-                className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-500/20 dark:to-pink-500/20 border border-purple-200 dark:border-purple-500/30 rounded-xl p-6 transition-colors duration-300"
+              <motion.div
+                className="rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 p-6 transition-colors duration-300 dark:border-purple-500/30 dark:from-purple-500/20 dark:to-pink-500/20"
                 whileHover={{ scale: 1.02 }}
               >
-                <div className="flex items-center mb-4">
-                  <Heart className="w-8 h-8 text-purple-500 dark:text-purple-400 mr-3" />
+                <div className="mb-4 flex items-center">
+                  <Heart className="mr-3 h-8 w-8 text-purple-500 dark:text-purple-400" />
                   <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                     Our Mission
                   </h3>
                 </div>
                 <div className="space-y-2 text-gray-600 dark:text-gray-300">
                   <p className="text-sm">
-                    Making quality Java programming education accessible to everyone, regardless of background or economic circumstances.
+                    Making quality Java programming education accessible to
+                    everyone, regardless of background or economic
+                    circumstances.
                   </p>
                   <p className="text-sm">
-                    Building a supportive community where learners can grow and succeed together.
+                    Building a supportive community where learners can grow and
+                    succeed together.
                   </p>
                 </div>
               </motion.div>
@@ -820,47 +927,51 @@ const ContactUsPage = () => {
 
           {/* FAQ Section */}
           <motion.section variants={itemVariants}>
-            <div className="flex items-center mb-6">
-              <div className="w-12 h-12 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-xl flex items-center justify-center mr-4">
-                <MessageSquare className="w-6 h-6 text-white" />
+            <div className="mb-6 flex items-center">
+              <div className="mr-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600">
+                <MessageSquare className="h-6 w-6 text-white" />
               </div>
-              <h2 className="text-3xl font-bold text-gray-900 dark:text-white transition-colors duration-300">
+              <h2 className="text-3xl font-bold text-gray-900 transition-colors duration-300 dark:text-white">
                 Frequently Asked Questions
               </h2>
             </div>
 
-            <div className="grid md:grid-cols-2 gap-6">
+            <div className="grid gap-6 md:grid-cols-2">
               {[
                 {
                   question: "How quickly do you respond to inquiries?",
-                  answer: "We typically respond to all inquiries within 24 hours during business days. For urgent technical issues, we aim to respond within a few hours.",
-                  color: "blue"
+                  answer:
+                    "We typically respond to all inquiries within 24 hours during business days. For urgent technical issues, we aim to respond within a few hours.",
+                  color: "blue",
                 },
                 {
                   question: "Is Javaistic really completely free?",
-                  answer: "Yes! Our core educational content and platform features are completely free. We believe in making quality programming education accessible to everyone.",
-                  color: "green"
+                  answer:
+                    "Yes! Our core educational content and platform features are completely free. We believe in making quality programming education accessible to everyone.",
+                  color: "green",
                 },
                 {
                   question: "How can I contribute to the project?",
-                  answer: "You can contribute code, documentation, educational content, or translations. Check our GitHub repository for open issues and contribution guidelines.",
-                  color: "purple"
+                  answer:
+                    "You can contribute code, documentation, educational content, or translations. Check our GitHub repository for open issues and contribution guidelines.",
+                  color: "purple",
                 },
                 {
                   question: "Do you offer personalized learning support?",
-                  answer: "While we don't offer one-on-one tutoring, our community forum and Discord server provide excellent peer support and guidance from experienced developers.",
-                  color: "orange"
-                }
+                  answer:
+                    "While we don't offer one-on-one tutoring, our community forum and Discord server provide excellent peer support and guidance from experienced developers.",
+                  color: "orange",
+                },
               ].map((faq, index) => (
                 <motion.div
                   key={index}
-                  className={`bg-gradient-to-r from-${faq.color}-50 to-${faq.color === 'blue' ? 'cyan' : faq.color === 'green' ? 'emerald' : faq.color === 'purple' ? 'pink' : 'red'}-50 dark:from-${faq.color}-500/20 dark:to-${faq.color === 'blue' ? 'cyan' : faq.color === 'green' ? 'emerald' : faq.color === 'purple' ? 'pink' : 'red'}-500/20 border border-${faq.color}-200 dark:border-${faq.color}-500/30 rounded-xl p-6 transition-colors duration-300`}
+                  className={`bg-gradient-to-r from-${faq.color}-50 to-${faq.color === "blue" ? "cyan" : faq.color === "green" ? "emerald" : faq.color === "purple" ? "pink" : "red"}-50 dark:from-${faq.color}-500/20 dark:to-${faq.color === "blue" ? "cyan" : faq.color === "green" ? "emerald" : faq.color === "purple" ? "pink" : "red"}-500/20 border border-${faq.color}-200 dark:border-${faq.color}-500/30 rounded-xl p-6 transition-colors duration-300`}
                   whileHover={{ y: -5 }}
                 >
-                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
+                  <h3 className="mb-3 text-lg font-semibold text-gray-900 dark:text-white">
                     {faq.question}
                   </h3>
-                  <p className="text-gray-600 dark:text-gray-300 text-sm">
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
                     {faq.answer}
                   </p>
                 </motion.div>
@@ -879,9 +990,9 @@ const ContactUsPage = () => {
         >
           <motion.div
             className={`mx-auto max-w-4xl rounded-3xl ${
-              isDarkMode 
-                ? 'bg-gradient-to-br from-indigo-900 to-sky-700 border border-indigo-400/30' 
-                : 'bg-gradient-to-br from-indigo-600 to-sky-600 border border-indigo-300'
+              isDarkMode
+                ? "border border-indigo-400/30 bg-gradient-to-br from-indigo-900 to-sky-700"
+                : "border border-indigo-300 bg-gradient-to-br from-indigo-600 to-sky-600"
             } px-8 py-16 text-center text-white shadow-2xl transition-colors duration-300`}
             variants={itemVariants}
             whileHover={{ scale: 1.02, y: -5 }}
@@ -893,40 +1004,40 @@ const ContactUsPage = () => {
               animate={{ scale: 1 }}
               transition={{ delay: 0.2, duration: 0.5, type: "spring" }}
             >
-              <Mail className="w-16 h-16 mx-auto text-white/90" />
+              <Mail className="mx-auto h-16 w-16 text-white/90" />
             </motion.div>
-            
-            <h2 className="text-4xl font-bold mb-4">
-              Still Have Questions?
-            </h2>
-            <p className="text-xl mb-8 text-white/90 max-w-2xl mx-auto">
-              We&apos;re here to help! Don&apos;t hesitate to reach out through any of our contact methods. Our team and community are always ready to assist you on your Java learning journey.
+
+            <h2 className="mb-4 text-4xl font-bold">Still Have Questions?</h2>
+            <p className="mx-auto mb-8 max-w-2xl text-xl text-white/90">
+              We&apos;re here to help! Don&apos;t hesitate to reach out through
+              any of our contact methods. Our team and community are always
+              ready to assist you on your Java learning journey.
             </p>
-            
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+
+            <div className="flex flex-col justify-center gap-4 sm:flex-row">
               <motion.a
                 href="#"
-                className="inline-flex items-center justify-center px-8 py-4 bg-white text-indigo-600 rounded-xl font-semibold text-lg shadow-lg hover:bg-gray-100 transition-colors duration-200"
+                className="inline-flex items-center justify-center rounded-xl bg-white px-8 py-4 text-lg font-semibold text-indigo-600 shadow-lg transition-colors duration-200 hover:bg-gray-100"
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
               >
-                <MessageSquare className="w-5 h-5 mr-2" />
+                <MessageSquare className="mr-2 h-5 w-5" />
                 Join Discord Community
               </motion.a>
-              
+
               <motion.a
                 href="/docs"
-                className="inline-flex items-center justify-center px-8 py-4 border-2 border-white text-white rounded-xl font-semibold text-lg hover:bg-white hover:text-indigo-600 transition-all duration-200"
+                className="inline-flex items-center justify-center rounded-xl border-2 border-white px-8 py-4 text-lg font-semibold text-white transition-all duration-200 hover:bg-white hover:text-indigo-600"
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
               >
-                <BookOpen className="w-5 h-5 mr-2" />
+                <BookOpen className="mr-2 h-5 w-5" />
                 Browse Documentation
               </motion.a>
             </div>
 
-            <motion.div 
-              className="mt-8 text-white/70 text-sm"
+            <motion.div
+              className="mt-8 text-sm text-white/70"
               variants={itemVariants}
             >
               <p>Quick response • Friendly support • Active community</p>
@@ -938,4 +1049,4 @@ const ContactUsPage = () => {
   );
 };
 
-export default ContactUsPage;
\ No newline at end of file
+export default ContactUsPage;
diff --git a/src/app/(site)/layout.tsx b/src/app/(site)/layout.tsx
index 79cca6cb..e869b2d0 100644
--- a/src/app/(site)/layout.tsx
+++ b/src/app/(site)/layout.tsx
@@ -1,22 +1,261 @@
+"use client";
+
 import { baseOptions } from "@/app/layout.config";
 import { Footer } from "@/components/footer";
+import { GitHubIcon } from "@/components/icons";
+import { useDarkMode } from "@/hooks/useDarkMode";
+import Link from "fumadocs-core/link";
 import { HomeLayout } from "fumadocs-ui/layouts/home";
+import {
+  NavbarMenu,
+  NavbarMenuContent,
+  NavbarMenuLink,
+  NavbarMenuTrigger,
+} from "fumadocs-ui/layouts/home/navbar";
+import {
+  Book,
+  ComponentIcon,
+  Heart,
+  MessageCircle,
+  PlusIcon,
+  Server,
+  Users,
+} from "lucide-react";
+import Image from "next/image";
 import type { ReactNode } from "react";
+import React from "react";
 
-export default function Layout({ children }: { children: ReactNode }) {
+export default function SiteLayout({ children }: { children: ReactNode }) {
+  const { isDarkMode, mounted } = useDarkMode();
   return (
     <>
       <HomeLayout
         {...baseOptions}
         style={
           {
-            "--spacing-fd-container": "1280px",
-          } as object
+            "--spacing-fd-container": "1100px",
+            paddingTop: "0px",
+          } as React.CSSProperties
         }
+        links={[
+          {
+            type: "menu",
+            on: "menu",
+            text: "Learn",
+            items: [
+              {
+                text: "Documentation",
+                url: "/docs/installation",
+                icon: <Book />,
+              },
+              {
+                text: "Programs",
+                url: "/programs/contents",
+                icon: <ComponentIcon />,
+              },
+            ],
+          },
+          {
+            type: "custom",
+            on: "nav",
+            children: (
+              <NavbarMenu>
+                <NavbarMenuTrigger>
+                  <Link href="/docs">Learn</Link>
+                </NavbarMenuTrigger>
+                <NavbarMenuContent className="grid grid-cols-1 gap-x-2 p-2 text-[15px] sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-10">
+                  <NavbarMenuLink
+                    href="/docs/introduction"
+                    className="col-span-3 md:row-span-2"
+                  >
+                    <div className="-mx-3 -mt-3">
+                      <Image
+                        src={
+                          isDarkMode && mounted
+                            ? "/img/docs-dark.png"
+                            : "/img/docs-light.png"
+                        }
+                        alt="Java Documentation Guide"
+                        className="rounded-t-lg object-cover"
+                        style={{
+                          height: "300px",
+                          maskImage:
+                            "linear-gradient(to bottom,white 70%,transparent)",
+                        }}
+                        width={600}
+                        height={400}
+                      />
+                    </div>
+                    <p className="font-medium">Getting Started</p>
+                    <p className="text-fd-muted-foreground text-sm">
+                      Learn how to set up Java on your machine and start coding.
+                    </p>
+                  </NavbarMenuLink>
+                  <NavbarMenuLink
+                    href="/programs/contents"
+                    className="col-span-3 md:row-span-2"
+                  >
+                    <div className="-mx-3 -mt-3">
+                      <Image
+                        src={
+                          isDarkMode && mounted
+                            ? "/img/programs-dark.png"
+                            : "/img/programs-light.png"
+                        }
+                        alt="Java Programs Collection"
+                        className="rounded-t-lg object-cover"
+                        style={{
+                          height: "300px",
+                          maskImage:
+                            "linear-gradient(to bottom,white 70%,transparent)",
+                        }}
+                        width={600}
+                        height={300}
+                      />
+                    </div>
+                    <p className="font-medium">Programs Collection</p>
+                    <p className="text-fd-muted-foreground text-sm">
+                      Practice with Java programs from beginner to advanced
+                      level.
+                    </p>
+                  </NavbarMenuLink>
+                  <NavbarMenuLink
+                    href="/docs/introduction"
+                    className="col-span-2 lg:col-start-7 lg:row-start-1"
+                  >
+                    <Book className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
+                    <p className="font-medium">Java Fundamentals</p>
+                    <p className="text-fd-muted-foreground text-sm">
+                      Master the core concepts of Java programming language.
+                    </p>
+                  </NavbarMenuLink>
+
+                  <NavbarMenuLink
+                    href="/docs/variables-primitive-data-types"
+                    className="col-span-2 lg:col-start-7 lg:row-start-2"
+                  >
+                    <ComponentIcon className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
+                    <p className="font-medium">Data Types & Variables</p>
+                    <p className="text-fd-muted-foreground text-sm">
+                      Understand Java&apos;s primitive data types and variable
+                      declarations.
+                    </p>
+                  </NavbarMenuLink>
+
+                  <NavbarMenuLink
+                    href="/docs/class-objects"
+                    className="col-span-2 lg:col-start-9 lg:row-start-1"
+                  >
+                    <Server className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
+                    <p className="font-medium">Classes & Objects</p>
+                    <p className="text-fd-muted-foreground text-sm">
+                      Learn object-oriented programming with Java classes and
+                      objects.
+                    </p>
+                  </NavbarMenuLink>
+
+                  <NavbarMenuLink
+                    href="/docs/inheritance"
+                    className="col-span-2 lg:col-start-9 lg:row-start-2"
+                  >
+                    <PlusIcon className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
+                    <p className="font-medium">Advanced Concepts</p>
+                    <p className="text-fd-muted-foreground text-sm">
+                      Explore inheritance, polymorphism, and advanced Java
+                      features.
+                    </p>
+                  </NavbarMenuLink>
+                </NavbarMenuContent>
+              </NavbarMenu>
+            ),
+          },
+          {
+            type: "custom",
+            on: "nav",
+            children: (
+              <NavbarMenu>
+                <NavbarMenuTrigger>
+                  <Link href="/about">Community</Link>
+                </NavbarMenuTrigger>
+                <NavbarMenuContent className="p-2 text-[15px]">
+                  <NavbarMenuLink href="/about" className="md:row-span-2">
+                    <div className="-mx-3 -mt-3">
+                      <Image
+                        src="/mission.svg"
+                        alt="Javaistic Community"
+                        className="mx-auto rounded-t-lg object-cover"
+                        style={{
+                          maskImage:
+                            "linear-gradient(to bottom,white 60%,transparent)",
+                          height: "200px",
+                          width: "320px",
+                        }}
+                        width={400}
+                        height={100}
+                      />
+                    </div>
+                    <p className="font-medium">About Javaistic</p>
+                    <p className="text-fd-muted-foreground text-sm">
+                      Learn about our mission to make Java education accessible
+                      to everyone.
+                    </p>
+                  </NavbarMenuLink>
+
+                  <NavbarMenuLink
+                    href="https://github.com/javaistic/javaistic"
+                    className="lg:col-start-2"
+                  >
+                    <GitHubIcon className="bg-fd-primary text-fd-primary-foreground mb-2 size-6 rounded-md p-1" />
+                    <p className="font-medium">Open Source</p>
+                    <p className="text-fd-muted-foreground text-sm">
+                      Contribute to Javaistic on GitHub and help improve Java
+                      education.
+                    </p>
+                  </NavbarMenuLink>
+
+                  <NavbarMenuLink
+                    href="https://github.com/javaistic/javaistic/graphs/contributors"
+                    className="lg:col-start-2"
+                  >
+                    <Users className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
+                    <p className="font-medium">Contributors</p>
+                    <p className="text-fd-muted-foreground text-sm">
+                      Meet the amazing developers building Javaistic together.
+                    </p>
+                  </NavbarMenuLink>
+
+                  <NavbarMenuLink
+                    href="https://github.com/javaistic/javaistic/discussions"
+                    className="lg:col-start-3 lg:row-start-1"
+                  >
+                    <MessageCircle className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
+                    <p className="font-medium">Discussions</p>
+                    <p className="text-fd-muted-foreground text-sm">
+                      Join conversations, ask questions, and share your Java
+                      journey.
+                    </p>
+                  </NavbarMenuLink>
+
+                  <NavbarMenuLink
+                    href="https://github.com/javaistic/javaistic/blob/main/CONTRIBUTING.md"
+                    className="lg:col-start-3 lg:row-start-2"
+                  >
+                    <Heart className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
+                    <p className="font-medium">Contributing</p>
+                    <p className="text-fd-muted-foreground text-sm">
+                      Learn how to contribute content, code, and help grow our
+                      community.
+                    </p>
+                  </NavbarMenuLink>
+                </NavbarMenuContent>
+              </NavbarMenu>
+            ),
+          },
+        ]}
       >
         {children}
       </HomeLayout>
-     <Footer/>
+      <Footer />
     </>
   );
 }
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index ce9acc61..03807b68 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -1,460 +1,35 @@
 "use client";
-import { GitHubIcon } from "@/components/icons";
-import { Button } from "@/components/ui/button";
-import { easeOut, motion } from "framer-motion";
-import { ArrowRightIcon, CodeIcon, ExternalLinkIcon } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import Particles from "@/components/Particles";
 
-export default function HomePage() {
-  const [isDarkMode, setIsDarkMode] = useState(false);
-
-  useEffect(() => {
-    const checkDarkMode = () => {
-      if (typeof window !== "undefined") {
-        const systemPrefersDark = window.matchMedia(
-          "(prefers-color-scheme: dark)",
-        ).matches;
-
-        const hasDarkClass =
-          document.documentElement.classList.contains("dark");
-
-        const dataTheme = document.documentElement.getAttribute("data-theme");
-
-        setIsDarkMode(
-          systemPrefersDark || hasDarkClass || dataTheme === "dark",
-        );
-      }
-    };
-
-    checkDarkMode();
-
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    mediaQuery.addEventListener("change", checkDarkMode);
-
-    const observer = new MutationObserver(checkDarkMode);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class", "data-theme"],
-    });
-
-    return () => {
-      mediaQuery.removeEventListener("change", checkDarkMode);
-      observer.disconnect();
-    };
-  }, []);
-
-  // Define particle properties based on theme
-  const particleConfig = isDarkMode
-    ? {
-        // Dark mode properties - enhanced for better visibility
-        particleColors: ["#00FFFF", " #FF00FF", "#00BFFF"],
-        particleCount: 500,
-        particleSpread: 10,
-        speed: 0.4,
-        particleBaseSize: 100,
-        moveParticlesOnHover: false,
-        alphaParticles: false,
-        disableRotation: true,
-        particleHoverFactor: 2,
-        sizeRandomness: 1.0,
-        cameraDistance: 18,
-      }
-    : {
-        // Light mode properties
-        particleColors: ["#1E3A8A", "#4B0082", "#4a4a4a"],
-        particleCount: 500,
-        particleSpread: 10,
-        speed: 0.4,
-        particleBaseSize: 100,
-        moveParticlesOnHover: false,
-        alphaParticles: false,
-        disableRotation: true,
-        particleHoverFactor: 1.5,
-        sizeRandomness: 1.0,
-        cameraDistance: 15,
-      };
-
-  // Animation variants
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        duration: 0.4,
-        staggerChildren: 0.1,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.4,
-        ease: easeOut,
-      },
-    },
-  };
-
-  const titleVariants = {
-    hidden: { opacity: 0, y: 30 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.5,
-        ease: easeOut,
-      },
-    },
-  };
-
-  const buttonVariants = {
-    hidden: { opacity: 0, scale: 0.9 },
-    visible: {
-      opacity: 1,
-      scale: 1,
-      transition: {
-        duration: 0.3,
-        ease: easeOut,
-      },
-    },
-    hover: {
-      scale: 1.05,
-      transition: {
-        duration: 0.2,
-      },
-    },
-  };
-
-  const imageVariants = {
-    hidden: { opacity: 0, x: -30 },
-    visible: {
-      opacity: 1,
-      x: 0,
-      transition: {
-        duration: 0.5,
-        ease: easeOut,
-      },
-    },
-  };
-
-  const textVariants = {
-    hidden: { opacity: 0, x: 30 },
-    visible: {
-      opacity: 1,
-      x: 0,
-      transition: {
-        duration: 0.5,
-        ease: easeOut,
-      },
-    },
-  };
+import {
+  BackgroundSection,
+  BentoGridSection,
+  CTASection,
+  FeaturesSection,
+  HeroSection,
+  VisionSection,
+} from "@/components/home";
+import HomeTabs from "@/components/home/home-tabs";
 
+export default function HomePage() {
   return (
-    <div className="relative min-h-screen">
-      {/* Particles Background */}
-      <div
-        style={{
-          width: "100%",
-          height: "100vh",
-          position: "fixed",
-          top: 0,
-          left: 0,
-          zIndex: -1,
-        }}
-      >
-        <Particles
-          particleColors={particleConfig.particleColors}
-          particleCount={particleConfig.particleCount}
-          particleSpread={particleConfig.particleSpread}
-          speed={particleConfig.speed}
-          particleBaseSize={particleConfig.particleBaseSize}
-          moveParticlesOnHover={particleConfig.moveParticlesOnHover}
-          alphaParticles={particleConfig.alphaParticles}
-          disableRotation={particleConfig.disableRotation}
-          particleHoverFactor={particleConfig.particleHoverFactor}
-          sizeRandomness={particleConfig.sizeRandomness}
-          cameraDistance={particleConfig.cameraDistance}
-        />
-      </div>
-
-      <main className="relative z-10 mx-auto flex max-w-7xl flex-col px-4 text-center sm:px-6 lg:px-8">
-        {/* Hero Section */}
-        <motion.section
-          className="flex flex-col items-center justify-center py-24 sm:min-h-screen"
-          variants={containerVariants}
-          initial="hidden"
-          animate="visible"
-        >
-          <motion.h1
-            className="font-funnel-display max-w-5xl text-5xl font-extrabold tracking-tight text-neutral-900 sm:text-6xl lg:text-[80px] dark:text-white"
-            variants={titleVariants}
-          >
-            Master{" "}
-            <span className="bg-gradient-to-br from-green-400 to-cyan-500 bg-clip-text text-transparent">
-              Java{" "}
-            </span>
-            Programming efficiently with{" "}
-            <span className="bg-gradient-to-br from-sky-400 to-indigo-500 bg-clip-text text-transparent">
-              Javaistic{" "}
-            </span>
-          </motion.h1>
-          <motion.p
-            className="text-muted-foreground mt-6 max-w-4xl text-lg sm:text-xl"
-            variants={itemVariants}
-          >
-            Interactive, fast-paced learning for absolute beginners to advanced
-            learners. A free and open-source platform to learn Java programming.
-          </motion.p>
-          <motion.div
-            className="mt-8 flex flex-col gap-4 sm:flex-row"
-            variants={containerVariants}
-          >
-            <motion.div variants={buttonVariants} whileHover="hover">
-              <Link href="/docs">
-                <Button
-                  size="lg"
-                  className="dark:text-foreground rounded-lg bg-blue-600 py-6 text-lg font-semibold hover:bg-blue-700"
-                >
-                  Start Learning Now
-                </Button>
-              </Link>
-            </motion.div>
-            <motion.div variants={buttonVariants} whileHover="hover">
-              <Link
-                href="https://github.com/javaistic/javaistic"
-                target="_blank"
-              >
-                <Button
-                  size="lg"
-                  variant="outline"
-                  className="dark:text-foreground border-blue rounded-lg py-6 text-lg font-semibold"
-                >
-                  <GitHubIcon className="!size-5" />
-                  Star on GitHub
-                </Button>
-              </Link>
-            </motion.div>
-          </motion.div>
-        </motion.section>
+    <BackgroundSection>
+      {/* Hero Section */}
+      <HeroSection />
 
-        {/* Features Section */}
-        <motion.section
-          className="mx-auto max-w-6xl px-4 sm:px-10 md:px-12"
-          variants={containerVariants}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, amount: 0.1 }}
-        >
-          <motion.div className="mt-5 mb-4 text-center" variants={itemVariants}>
-            <h1 className="font-funnel-display text-4xl font-bold sm:text-5xl">
-              Why learn Java with Javaistic?
-            </h1>
-            <p className="mx-auto mt-4 text-lg font-medium dark:text-neutral-400">
-              Designed to make learning Java fun, practical, and truly
-              beginner-friendly.
-            </p>
-          </motion.div>
+      {/* Documentation Preview */}
+      <HomeTabs />
 
-          {/* Section: Docs */}
-          <motion.article
-            className="mx-auto mb-10 flex flex-col items-center py-10 sm:flex-row sm:space-x-10"
-            variants={containerVariants}
-            initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true, amount: 0.1 }}
-          >
-            <motion.div
-              className="w-full transition-transform duration-300 hover:-translate-y-2 hover:scale-105 sm:w-1/2"
-              variants={imageVariants}
-            >
-              <Image
-                src="/img/home/docs.svg"
-                alt="Javaistic Docs"
-                width={1213}
-                height={1023}
-                className="object-cover object-center"
-                placeholder="blur"
-                blurDataURL="/img/home/docs.svg"
-                loading="lazy"
-              />
-            </motion.div>
-            <motion.div
-              className="w-full text-left sm:w-1/2"
-              variants={textVariants}
-            >
-              <h2 className="font-funnel-display mb-6 text-3xl font-extrabold text-neutral-900 sm:text-4xl dark:text-white">
-                Quality over Quantity
-              </h2>
-              <p className="text-muted-foreground mb-8 text-xl leading-relaxed font-medium">
-                We focus on quality — not noise. Every piece of content is
-                crafted to be clear, engaging, and easy to understand. Learn
-                Java with beautifully designed, beginner-friendly docs — all
-                completely free.
-              </p>
-              <motion.div
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-              >
-                <Link href="/docs">
-                  <Button size="lg" className="text-lg font-semibold">
-                    <span className="flex items-center">
-                      Explore the Docs
-                      <ArrowRightIcon className="ml-2 !size-5" />
-                    </span>
-                  </Button>
-                </Link>
-              </motion.div>
-            </motion.div>
-          </motion.article>
+      {/* Features Section */}
+      <FeaturesSection />
 
-          {/* Section: Coding */}
-          <motion.article
-            className="flex flex-col-reverse items-center space-y-10 py-14 sm:flex-row sm:space-y-0 sm:space-x-10"
-            variants={containerVariants}
-            initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true, amount: 0.1 }}
-          >
-            <motion.div
-              className="w-full text-left sm:w-1/2"
-              variants={textVariants}
-            >
-              <h2 className="font-funnel-display text-foreground mb-6 text-3xl font-extrabold sm:text-4xl">
-                Coding Made Fun
-              </h2>
-              <p className="text-muted-foreground mb-8 text-xl leading-relaxed font-medium">
-                Jump into hands-on coding right away or explore our step-by-step
-                breakdowns of real Java programs. Whether you&apos;re a beginner
-                or brushing up, it&apos;s coding made enjoyable.
-              </p>
-              <motion.div
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-              >
-                <Link href="/programs">
-                  <Button size="lg" className="text-lg font-semibold">
-                    <span className="flex items-center">
-                      <CodeIcon className="mr-2 !size-5" />
-                      Try a Program Now
-                    </span>
-                  </Button>
-                </Link>
-              </motion.div>
-            </motion.div>
-            <motion.div
-              className="w-full transition-transform duration-300 hover:-translate-y-2 hover:scale-105 sm:w-1/2"
-              variants={imageVariants}
-            >
-              <Image
-                src="/img/home/programs.svg"
-                alt="Javaistic Programs"
-                width={1213}
-                height={1023}
-                className="object-cover object-center"
-                placeholder="blur"
-                blurDataURL="/img/home/programs.svg"
-                loading="lazy"
-              />
-            </motion.div>
-          </motion.article>
+      {/* Vision Section */}
+      <VisionSection />
 
-          {/* Section: GitHub */}
-          <motion.article
-            className="flex flex-col items-center space-y-10 py-14 sm:flex-row sm:space-y-0 sm:space-x-10"
-            variants={containerVariants}
-            initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true, amount: 0.1 }}
-          >
-            <motion.div
-              className="w-full transition-transform duration-300 hover:-translate-y-2 hover:scale-105 sm:w-1/2"
-              variants={imageVariants}
-            >
-              <Image
-                src="/img/home/open-source.svg"
-                alt="Javaistic GitHub"
-                width={613}
-                height={521}
-                className="object-cover object-center"
-                placeholder="blur"
-                blurDataURL="/img/home/open-source.svg"
-                loading="lazy"
-              />
-            </motion.div>
-            <motion.div
-              className="w-full text-left sm:w-1/2"
-              variants={textVariants}
-            >
-              <h2 className="font-funnel-display text-foreground mb-6 text-3xl font-extrabold sm:text-4xl">
-                Built Together.
-                <br className="hidden lg:inline-block" />
-                Fork it. Improve it.
-              </h2>
-              <p className="text-muted-foreground mb-8 text-xl leading-relaxed font-medium">
-                Javaistic is fully open source — built by and for learners like
-                you. Fork it, contribute, and shape the future of Java education
-                with us.
-              </p>
-              <motion.div
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-              >
-                <Link
-                  href="https://github.com/javaistic/javaistic"
-                  target="_blank"
-                >
-                  <Button size="lg" className="text-lg font-semibold">
-                    <span className="flex items-center">
-                      Contribute on GitHub
-                      <ExternalLinkIcon className="ml-2 !size-5" />
-                    </span>
-                  </Button>
-                </Link>
-              </motion.div>
-            </motion.div>
-          </motion.article>
-        </motion.section>
+      {/* Bento Grid Section */}
+      <BentoGridSection />
 
-        {/* CTA */}
-        <motion.section
-          className="max-w-6xl py-20"
-          variants={containerVariants}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, amount: 0.1 }}
-        >
-          <motion.div
-            className="mx-auto rounded-3xl bg-gradient-to-br from-indigo-900 to-sky-700 px-6 py-16 text-center text-white shadow-xl"
-            variants={itemVariants}
-            whileHover={{ scale: 1.02 }}
-            transition={{ duration: 0.3 }}
-          >
-            <h2 className="font-funnel-display mb-4 text-4xl font-bold">
-              Ready to become a Java Pro?
-            </h2>
-            <p className="dark:text-secondary-foreground mb-8 text-lg font-medium">
-              Begin your Java journey now — no credit card, no sign-up, just
-              pure learning.
-            </p>
-            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-              <Link href="/docs">
-                <Button
-                  size="lg"
-                  className="inline-flex items-center bg-white text-lg font-semibold text-black hover:bg-white"
-                >
-                  Start Learning
-                </Button>
-              </Link>
-            </motion.div>
-          </motion.div>
-        </motion.section>
-      </main>
-    </div>
+      {/* CTA Section */}
+      <CTASection />
+    </BackgroundSection>
   );
 }
diff --git a/src/app/docs/[[...slug]]/page.tsx b/src/app/docs/[[...slug]]/page.tsx
index 569600b5..43f99a06 100644
--- a/src/app/docs/[[...slug]]/page.tsx
+++ b/src/app/docs/[[...slug]]/page.tsx
@@ -55,10 +55,10 @@ export async function generateMetadata(props: {
   if (!page) notFound();
 
   return {
-    title: page.data.title,
+    title: `${page.data.title} - Javaistic`,
     description: page.data.description,
     openGraph: {
-      title: page.data.title,
+      title: `${page.data.title} - Javaistic`,
       description: page.data.description,
       sitename: "Javaistic",
       images: `https://og-javaistic.vercel.app/og?title=${page.data.title}`,
diff --git a/src/app/global.css b/src/app/global.css
index a073f9da..c20c00e9 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -44,6 +44,17 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --animate-ripple: ripple var(--duration, 2s) ease calc(var(--i, 0) * 0.2s)
+    infinite;
+  @keyframes ripple {
+    0%,
+    100% {
+      transform: translate(-50%, -50%) scale(1);
+    }
+    50% {
+      transform: translate(-50%, -50%) scale(0.9);
+    }
+  }
 }
 
 :root {
@@ -127,3 +138,7 @@
 kbd {
   @apply font-mono;
 }
+
+#nd-nav {
+  @apply hover:bg-background border-none bg-black/10 backdrop-blur-md transition-all duration-300 ease-in-out sm:top-2 sm:mx-auto sm:max-w-5xl sm:rounded-2xl;
+}
\ No newline at end of file
diff --git a/src/app/playground/layout.tsx b/src/app/playground/layout.tsx
index 61926a25..5f87f79a 100644
--- a/src/app/playground/layout.tsx
+++ b/src/app/playground/layout.tsx
@@ -1,5 +1,4 @@
 import { baseOptions } from "@/app/layout.config";
-import Particles from "@/components/Particles";
 import { HomeLayout } from "fumadocs-ui/layouts/home";
 import type { ReactNode } from "react";
 
@@ -7,9 +6,11 @@ export default function Layout({ children }: { children: ReactNode }) {
   return (
     <HomeLayout
       {...baseOptions}
-      style={{
-        "--spacing-fd-container": "1280px",
-      } as React.CSSProperties}
+      style={
+        {
+          "--spacing-fd-container": "1280px",
+        } as React.CSSProperties
+      }
     >
       {children}
     </HomeLayout>
diff --git a/src/app/playground/page.tsx b/src/app/playground/page.tsx
index 2bc7a97c..6b2b3263 100644
--- a/src/app/playground/page.tsx
+++ b/src/app/playground/page.tsx
@@ -1,54 +1,51 @@
-'use client';
-
-import React, { useEffect, useRef, useState } from 'react';
-import { baseOptions } from '@/app/layout.config';
-import { Footer } from '@/components/footer';
-import { HomeLayout } from 'fumadocs-ui/layouts/home';
-import { JSX } from 'react/jsx-runtime';
-import Image from 'next/image';
+"use client";
 
+import React, { useEffect, useRef, useState } from "react";
+import { baseOptions } from "@/app/layout.config";
+import { Footer } from "@/components/footer";
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { JSX } from "react/jsx-runtime";
 
 export default function PlayGround(): JSX.Element {
   const DEFAULT_CODE = `public class Main {\n    public static void main(String[] args) {\n        // Write your code here\n    }\n}`;
 
   const [code, setCode] = useState<string>(() => {
     try {
-      if (typeof window === 'undefined') return DEFAULT_CODE;
-      return localStorage.getItem('javaistic_code') || DEFAULT_CODE;
+      if (typeof window === "undefined") return DEFAULT_CODE;
+      return localStorage.getItem("javaistic_code") || DEFAULT_CODE;
     } catch {
       return DEFAULT_CODE;
     }
   });
 
-  const [output, setOutput] = useState<string>('');
+  const [output, setOutput] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(false);
-  const [toast, setToast] = useState<string>('');
+  const [toast, setToast] = useState<string>("");
   const [examplesOpen, setExamplesOpen] = useState<boolean>(false);
 
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
- const lineRef = useRef<HTMLPreElement>(null);
+  const lineRef = useRef<HTMLPreElement>(null);
 
   useEffect(() => {
     try {
-      if (typeof window !== 'undefined') {
-        localStorage.setItem('javaistic_code', code);
+      if (typeof window !== "undefined") {
+        localStorage.setItem("javaistic_code", code);
       }
     } catch {}
   }, [code]);
 
   const showToast = (msg: string, ms = 1800): void => {
-  setToast(msg);
-  window.setTimeout(() => setToast(''), ms);
+    setToast(msg);
+    window.setTimeout(() => setToast(""), ms);
   };
 
-
   const runCode = async (): Promise<void> => {
     setLoading(true);
-    setOutput('');
+    setOutput("");
     try {
-      const res = await fetch('/api/playground', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+      const res = await fetch("/api/playground", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ code }),
       });
 
@@ -57,10 +54,12 @@ export default function PlayGround(): JSX.Element {
         setOutput(`Error: ${res.status} ${text}`);
       } else {
         const data = await res.json();
-        setOutput((data && data.run && (data.run.output as string)) || 'No output');
+        setOutput(
+          (data && data.run && (data.run.output as string)) || "No output",
+        );
       }
     } catch {
-      setOutput('Error executing code');
+      setOutput("Error executing code");
     } finally {
       setLoading(false);
     }
@@ -68,52 +67,52 @@ export default function PlayGround(): JSX.Element {
 
   const clearCode = (): void => {
     setCode(DEFAULT_CODE);
-    showToast('Reset to default template');
+    showToast("Reset to default template");
   };
 
   const copyCode = async (): Promise<void> => {
     try {
       await navigator.clipboard.writeText(code);
-      showToast('Code copied to clipboard');
+      showToast("Code copied to clipboard");
     } catch {
-      showToast('Unable to copy');
+      showToast("Unable to copy");
     }
   };
 
   const downloadCode = (): void => {
-    const blob = new Blob([code], { type: 'text/plain' });
+    const blob = new Blob([code], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
+    const a = document.createElement("a");
     a.href = url;
-    a.download = 'Main.java';
+    a.download = "Main.java";
     document.body.appendChild(a);
     a.click();
     a.remove();
     URL.revokeObjectURL(url);
-    showToast('Downloaded Main.java');
+    showToast("Downloaded Main.java");
   };
 
   const EXAMPLES: Record<string, string> = {
-    'Hello World': `public class Main {
+    "Hello World": `public class Main {
     public static void main(String[] args) {
         System.out.println("Hello,Welcome to Javaistic PlayGround");
     }
 }`,
-    'For Loop': `public class Main {
+    "For Loop": `public class Main {
     public static void main(String[] args) {
         for (int i = 1; i <= 5; i++) {
             System.out.println("Count: " + i);
         }
     }
 }`,
-    'Sum of Two nums': `public class Main {
+    "Sum of Two nums": `public class Main {
     public static void main(String[] args) {
         int a = 10;
         int b = 5;
         System.out.println("Sum = " + (a + b));
     }
 }`,
-    'Prime Number Check': `public class Main {
+    "Prime Number Check": `public class Main {
     public static void main(String[] args) {
         int num = 17;
         boolean isPrime = num > 1;
@@ -126,13 +125,13 @@ export default function PlayGround(): JSX.Element {
         System.out.println(num + (isPrime ? " is Prime" : " is Not Prime"));
     }
 }`,
-    'Odd Even Check': `public class Main {
+    "Odd Even Check": `public class Main {
     public static void main(String[] args) {
         int num = 24;
         System.out.println(num + (num % 2 == 0 ? " is Even" : " is Odd"));
     }
 }`,
-};
+  };
 
   const loadExample = (key: string): void => {
     setCode(EXAMPLES[key]);
@@ -140,10 +139,13 @@ export default function PlayGround(): JSX.Element {
     showToast(`${key} loaded`);
   };
 
-  const clearOutput = (): void => setOutput('');
+  const clearOutput = (): void => setOutput("");
 
   const getLineNumbers = (text: string): string =>
-    Array.from({ length: Math.max(1, text.split('\n').length) }, (_, i) => i + 1).join('\n');
+    Array.from(
+      { length: Math.max(1, text.split("\n").length) },
+      (_, i) => i + 1,
+    ).join("\n");
 
   useEffect(() => {
     const t = textareaRef.current;
@@ -152,110 +154,125 @@ export default function PlayGround(): JSX.Element {
     const sync = () => {
       l.scrollTop = t.scrollTop;
     };
-    t.addEventListener('scroll', sync);
-    return () => t.removeEventListener('scroll', sync);
+    t.addEventListener("scroll", sync);
+    return () => t.removeEventListener("scroll", sync);
   }, []);
 
   return (
     <>
       <HomeLayout
         {...baseOptions}
-          style={{ '--spacing-fd-container': '1280px' } as React.CSSProperties}
+        style={{ "--spacing-fd-container": "1280px" } as React.CSSProperties}
       >
-        <div className="space-y-6 mb-5">
-<h1 className="font-funnel-display max-w-3xl text-4xl font-extrabold tracking-tight text-neutral-900 sm:text-6xl lg:text-[80px] dark:text-white text-center mx-auto mb- -mt-10">
-  Javaistic{" "}
-  <span className="bg-gradient-to-br from-sky-400 to-indigo-500 bg-clip-text text-transparent">
-    Playground
-  </span>
-</h1>
-
-          <div className="flex flex-col lg:flex-row gap-6 m-auto px-4">
-            <div className="bg-black dark:bg-gray-800 border rounded-xl shadow-lg p-3 flex-1 min-h-[70vh]">
-              <div className="flex items-center justify-between mb-4 flex-wrap gap-1">
-                <span className="text-sm text-white font-mono">Main.java</span>
-               <div className="flex flex-wrap gap-1">
-  <button
-    onClick={runCode}
-    className="px-3 py-1 rounded-md bg-green-400 hover:bg-green-500 text-white shadow cursor-pointer text-sm"
-  >
-    {loading ? '▶️.....' : '▶️ Run'}
-  </button>
-
-  <button
-    onClick={clearCode}
-    className="px-3 py-1 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-gray-500 dark:hover:bg-gray-400 text-black dark:text-white shadow cursor-pointer text-sm"
-  >
-    🔄 Clear
-  </button>
-
-  <button
-    onClick={copyCode}
-    className="px-3 py-1 rounded-md bg-blue-300 hover:bg-blue-400 text-white shadow cursor-pointer text-sm"
-  >
-    📋 Copy
-  </button>
-
-  <button
-    onClick={downloadCode}
-    className="px-3 py-1 rounded-md bg-yellow-300 hover:bg-yellow-400 text-black shadow cursor-pointer text-sm"
-  >
-    📥 Download
-  </button>
-
-  <div className="relative">
-    <button
-      onClick={() => setExamplesOpen((s) => !s)}
-      className="px-3 py-1 rounded-md bg-purple-400 hover:bg-purple-500 text-white shadow cursor-pointer text-sm"
-    >
-      Examples ▾
-    </button>
-    {examplesOpen && (
-      <ul className="absolute mt-2 w-56 rounded-md shadow bg-white dark:bg-gray-700 border p-2 z-10">
-        {Object.keys(EXAMPLES).map((key) => (
-          <li key={key}>
-            <button
-              onClick={() => loadExample(key)}
-              className="w-full text-left px-2 py-1 text-sm rounded hover:bg-gray-100 dark:hover:bg-gray-600"
-            >
-              {key}
-            </button>
-          </li>
-        ))}
-      </ul>
-    )}
-  </div>
-  </div>
-
-  <button
-    onClick={clearOutput}
-    className="px-3 py-1 rounded-md bg-red-400 hover:bg-red-500 text-white shadow cursor-pointer text-sm"
-  >
-    🔄 Clear Output
-  </button>
-</div>
-
-
-    
-              <div className="relative h-[60vh] rounded border overflow-hidden flex m-2">
-              <pre ref={lineRef as React.RefObject<HTMLPreElement>} className="select-none text-right px-3 py-3 text-sm overflow-hidden text-white" style={{ width: 50 }}>{getLineNumbers(code)}</pre>
+        <div className="mb-5 space-y-6">
+          <h1 className="font-funnel-display mb- mx-auto -mt-10 max-w-3xl text-center text-4xl font-extrabold tracking-tight text-neutral-900 sm:text-6xl lg:text-[80px] dark:text-white">
+            Javaistic{" "}
+            <span className="bg-gradient-to-br from-sky-400 to-indigo-500 bg-clip-text text-transparent">
+              Playground
+            </span>
+          </h1>
+
+          <div className="m-auto flex flex-col gap-6 px-4 lg:flex-row">
+            <div className="min-h-[70vh] flex-1 rounded-xl border bg-black p-3 shadow-lg dark:bg-gray-800">
+              <div className="mb-4 flex flex-wrap items-center justify-between gap-1">
+                <span className="font-mono text-sm text-white">Main.java</span>
+                <div className="flex flex-wrap gap-1">
+                  <button
+                    onClick={runCode}
+                    className="cursor-pointer rounded-md bg-green-400 px-3 py-1 text-sm text-white shadow hover:bg-green-500"
+                  >
+                    {loading ? "▶️....." : "▶️ Run"}
+                  </button>
+
+                  <button
+                    onClick={clearCode}
+                    className="cursor-pointer rounded-md bg-gray-200 px-3 py-1 text-sm text-black shadow hover:bg-gray-300 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-400"
+                  >
+                    🔄 Clear
+                  </button>
+
+                  <button
+                    onClick={copyCode}
+                    className="cursor-pointer rounded-md bg-blue-300 px-3 py-1 text-sm text-white shadow hover:bg-blue-400"
+                  >
+                    📋 Copy
+                  </button>
+
+                  <button
+                    onClick={downloadCode}
+                    className="cursor-pointer rounded-md bg-yellow-300 px-3 py-1 text-sm text-black shadow hover:bg-yellow-400"
+                  >
+                    📥 Download
+                  </button>
+
+                  <div className="relative">
+                    <button
+                      onClick={() => setExamplesOpen((s) => !s)}
+                      className="cursor-pointer rounded-md bg-purple-400 px-3 py-1 text-sm text-white shadow hover:bg-purple-500"
+                    >
+                      Examples ▾
+                    </button>
+                    {examplesOpen && (
+                      <ul className="absolute z-10 mt-2 w-56 rounded-md border bg-white p-2 shadow dark:bg-gray-700">
+                        {Object.keys(EXAMPLES).map((key) => (
+                          <li key={key}>
+                            <button
+                              onClick={() => loadExample(key)}
+                              className="w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-600"
+                            >
+                              {key}
+                            </button>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </div>
+                </div>
+
+                <button
+                  onClick={clearOutput}
+                  className="cursor-pointer rounded-md bg-red-400 px-3 py-1 text-sm text-white shadow hover:bg-red-500"
+                >
+                  🔄 Clear Output
+                </button>
+              </div>
 
-                <textarea ref={textareaRef} value={code} onChange={(e) => setCode(e.target.value)}spellCheck={false}className="flex-1 p-3 text-sm resize-none outline-none h-full font-mono overflow-auto bg-gray-800/90 dark:bg-[#0c1116] text-orange-400 dark:text-[#ffaa00]"/>
+              <div className="relative m-2 flex h-[60vh] overflow-hidden rounded border">
+                <pre
+                  ref={lineRef as React.RefObject<HTMLPreElement>}
+                  className="overflow-hidden px-3 py-3 text-right text-sm text-white select-none"
+                  style={{ width: 50 }}
+                >
+                  {getLineNumbers(code)}
+                </pre>
+
+                <textarea
+                  ref={textareaRef}
+                  value={code}
+                  onChange={(e) => setCode(e.target.value)}
+                  spellCheck={false}
+                  className="h-full flex-1 resize-none overflow-auto bg-gray-800/90 p-3 font-mono text-sm text-orange-400 outline-none dark:bg-[#0c1116] dark:text-[#ffaa00]"
+                />
               </div>
             </div>
 
-
-            <div className="bg-gray-900 dark:bg-gray-900 border rounded-xl shadow-lg p-3 flex-1 flex flex-col min-h-[70vh] m-2">
+            <div className="m-2 flex min-h-[70vh] flex-1 flex-col rounded-xl border bg-gray-900 p-3 shadow-lg dark:bg-gray-900">
               <div className="mb-2 flex items-center justify-between">
-                <span className="text-sm text-white dark:text-gray-500">Output</span>
+                <span className="text-sm text-white dark:text-gray-500">
+                  Output
+                </span>
               </div>
-              <pre className="h-[60vh] overflow-y-auto whitespace-pre-wrap text-lg rounded p-3 flex-1 bg-fuchsia-50 dark:bg-blue-300/10 text-red-500 dark:text-green-300">
-                {output || 'Program output will appear here...'}
+              <pre className="h-[60vh] flex-1 overflow-y-auto rounded bg-fuchsia-50 p-3 text-lg whitespace-pre-wrap text-red-500 dark:bg-blue-300/10 dark:text-green-300">
+                {output || "Program output will appear here..."}
               </pre>
             </div>
           </div>
 
-          {toast && (<div className="fixed right-6 bottom-6 bg-black/80 text-white px-4 py-2 rounded-md shadow">{toast}</div>)}
+          {toast && (
+            <div className="fixed right-6 bottom-6 rounded-md bg-black/80 px-4 py-2 text-white shadow">
+              {toast}
+            </div>
+          )}
         </div>
       </HomeLayout>
       <Footer />
@@ -280,4 +297,4 @@ export default function PlayGround(): JSX.Element {
       </style>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/programs/[[...slug]]/page.tsx b/src/app/programs/[[...slug]]/page.tsx
index 691f3565..8b5dbcb4 100644
--- a/src/app/programs/[[...slug]]/page.tsx
+++ b/src/app/programs/[[...slug]]/page.tsx
@@ -52,10 +52,10 @@ export async function generateMetadata(props: {
   if (!page) notFound();
 
   return {
-    title: page.data.title,
+    title: `${page.data.title} - Javaistic`,
     description: page.data.description,
     openGraph: {
-      title: page.data.title,
+      title: `${page.data.title} - Javaistic`,
       description: page.data.description,
       sitename: "Javaistic",
       images: `https://og-javaistic.vercel.app/og?title=${page.data.title}`,
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 91a16dac..68ddad2b 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,12 +1,13 @@
-import Logo from "@/components/logo";
-import Link from "next/link";
+"use client";
 import {
   DiscordIcon,
   GitHubIcon,
   OpenCollectiveIcon,
   TwitterIcon,
 } from "@/components/icons";
-import Image from 'next/image';
+import Logo from "@/components/logo";
+import Link from "next/link";
+import Image from "next/image";
 
 const footerNav = {
   "Getting Started": [
@@ -36,8 +37,8 @@ const footerNav = {
 
 export function Footer() {
   return (
-    <footer className="bg-neutral-100 pt-16 pb-10 sm:pt-20 md:pt-24 xl:pt-28 dark:bg-neutral-900">
-      <div className="mx-auto max-w-screen-xl px-4 sm:px-6 md:px-8">
+    <footer className="border-t bg-neutral-100 dark:bg-neutral-900">
+      <div className="mx-auto max-w-6xl border-x px-4 pt-16 pb-10 sm:px-6 sm:pt-20 md:px-8 md:pt-24 xl:pt-28">
         {/* Navigation Links */}
         <div className="grid grid-cols-2 gap-8 pb-14 text-sm font-medium sm:grid-cols-2 sm:pb-20 md:grid-cols-3 lg:grid-cols-6">
           <div className="col-span-2 flex flex-col items-start gap-y-6 sm:col-span-2">
@@ -112,10 +113,17 @@ export function Footer() {
 
         {/* Legal and Badge */}
         <div className="flex flex-col items-center justify-between gap-y-2 text-sm text-neutral-500 sm:flex-row">
-          <h4>
+          <h5 className="flex items-center gap-x-2">
+            <span className="relative flex size-2.5">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
+              <span className="relative inline-flex size-2.5 rounded-full bg-green-500"></span>
+            </span>
+            All systems operational
+          </h5>
+          <h5>
             &copy; 2021 - {new Date().getFullYear()} Javaistic. All rights
             reserved.
-          </h4>
+          </h5>
 
           <div>
             <div className="flex items-center space-x-1 text-sm text-neutral-500">
@@ -125,9 +133,11 @@ export function Footer() {
               </span>
               <span className="flex items-center gap-x-1.5">
                 in
-                <img
+                <Image
                   src="https://flagapi.vercel.app/S/IND"
                   alt="India"
+                  width={12}
+                  height={12}
                   className="h-3 rounded-xs"
                 />
                 <span className="sr-only">India</span>
diff --git a/src/components/home/animation-variants.ts b/src/components/home/animation-variants.ts
new file mode 100644
index 00000000..148b4106
--- /dev/null
+++ b/src/components/home/animation-variants.ts
@@ -0,0 +1,82 @@
+import { easeOut } from "motion/react";
+
+// Reusable animation configurations with performance optimizations
+export const ANIMATION_VARIANTS = {
+  container: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        duration: 0.4,
+        staggerChildren: 0.1,
+        ease: easeOut,
+      },
+    },
+  },
+  item: {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: easeOut,
+      },
+    },
+  },
+  title: {
+    hidden: { opacity: 0, y: 30 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+        ease: easeOut,
+      },
+    },
+  },
+  imageFromLeft: {
+    hidden: { opacity: 0, x: -30 },
+    visible: {
+      opacity: 1,
+      x: 0,
+      transition: {
+        duration: 0.5,
+        ease: easeOut,
+      },
+    },
+  },
+  textFromRight: {
+    hidden: { opacity: 0, x: 30 },
+    visible: {
+      opacity: 1,
+      x: 0,
+      transition: {
+        duration: 0.5,
+        ease: easeOut,
+      },
+    },
+  },
+};
+
+// Optimized hover animations with reduced complexity
+export const HOVER_ANIMATIONS = {
+  card: {
+    scale: 1.02,
+    y: -4,
+    transition: { duration: 0.2, ease: easeOut },
+  },
+  cardSubtle: {
+    scale: 1.01,
+    y: -2,
+    transition: { duration: 0.2, ease: easeOut },
+  },
+  button: {
+    scale: 1.02,
+    transition: { duration: 0.15, ease: easeOut },
+  },
+  image: {
+    scale: 1.02,
+    transition: { duration: 0.2, ease: easeOut },
+  },
+};
diff --git a/src/components/home/background-section.tsx b/src/components/home/background-section.tsx
new file mode 100644
index 00000000..dabc35b5
--- /dev/null
+++ b/src/components/home/background-section.tsx
@@ -0,0 +1,38 @@
+"use client";
+import { useDarkMode } from "@/hooks/useDarkMode";
+
+interface BackgroundSectionProps {
+  children: React.ReactNode;
+}
+
+export function BackgroundSection({ children }: BackgroundSectionProps) {
+  const { isDarkMode, mounted } = useDarkMode();
+
+  return (
+    <div className="relative min-h-screen">
+      {/* Development theme indicator */}
+      {process.env.NODE_ENV === "development" && mounted && (
+        <div className="fixed top-4 right-4 z-50 rounded-lg bg-black/80 px-3 py-2 text-xs text-white">
+          Theme: {isDarkMode ? "Dark" : "Light"}
+        </div>
+      )}
+
+      {/* Background */}
+      <div
+        className="absolute z-10 w-full opacity-20 sm:h-[1000px] dark:opacity-100"
+        style={{
+          backgroundImage: "url('/bg.webp')",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat",
+          maskImage:
+            "linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)",
+        }}
+      />
+
+      <main className="relative z-20 mx-auto flex max-w-7xl flex-col px-4 text-center sm:px-6 lg:px-10">
+        {children}
+      </main>
+    </div>
+  );
+}
diff --git a/src/components/home/badge.tsx b/src/components/home/badge.tsx
new file mode 100644
index 00000000..9e2a10b2
--- /dev/null
+++ b/src/components/home/badge.tsx
@@ -0,0 +1,36 @@
+"use client";
+import { motion, type TargetAndTransition } from "motion/react";
+
+// Badge Component for consistency with accessibility improvements
+interface BadgeProps {
+  icon: React.ComponentType<{ className?: string }>;
+  text: string;
+  colorClass: string;
+  hoverAnimation?: TargetAndTransition;
+}
+
+export function Badge({
+  icon: Icon,
+  text,
+  colorClass,
+  hoverAnimation = {},
+}: BadgeProps) {
+  return (
+    <motion.span
+      className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-300 select-none ${colorClass}`}
+      whileHover={hoverAnimation}
+      whileTap={{ scale: 0.95 }}
+      role="status"
+      aria-label={text}
+    >
+      <motion.div
+        whileHover={{ rotate: 180 }}
+        transition={{ duration: 0.3 }}
+        className="mr-1"
+      >
+        <Icon className="h-4 w-4" aria-hidden="true" />
+      </motion.div>
+      {text}
+    </motion.span>
+  );
+}
diff --git a/src/components/home/bento-grid-section.tsx b/src/components/home/bento-grid-section.tsx
new file mode 100644
index 00000000..fb1cb730
--- /dev/null
+++ b/src/components/home/bento-grid-section.tsx
@@ -0,0 +1,321 @@
+"use client";
+
+import { motion } from "motion/react";
+import Image from "next/image";
+import {
+  TargetIcon,
+  RocketIcon,
+  HeartIcon,
+  ZapIcon,
+  SearchIcon,
+  SparklesIcon,
+  FlameIcon,
+} from "lucide-react";
+import { useDarkMode } from "@/hooks/useDarkMode";
+import { Badge } from "./badge";
+import { ANIMATION_VARIANTS, HOVER_ANIMATIONS } from "./animation-variants";
+
+export function BentoGridSection() {
+  const { isDarkMode, mounted } = useDarkMode();
+
+  return (
+    <motion.section
+      className="mx-auto my-16 grid w-full max-w-5xl grid-cols-1 gap-4 sm:h-[700px] sm:grid-cols-8"
+      variants={ANIMATION_VARIANTS.container}
+      initial="hidden"
+      animate="visible"
+    >
+      {/* Built with Passion - Large Card */}
+      <motion.div
+        className="bg-secondary dark:bg-card group relative col-span-1 flex cursor-pointer flex-col justify-between gap-2 overflow-hidden rounded-2xl p-6 sm:col-span-5"
+        variants={ANIMATION_VARIANTS.item}
+        whileHover={HOVER_ANIMATIONS.cardSubtle}
+        whileTap={{
+          scale: 0.98,
+          boxShadow: "0 15px 30px -12px rgba(0, 0, 0, 0.15)",
+        }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
+      >
+        <motion.div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-violet-500/5 to-purple-500/5 opacity-0 transition-opacity duration-500 group-hover:opacity-100 group-active:opacity-100" />
+
+        <motion.div className="relative z-10 flex flex-col gap-4 sm:flex-row sm:items-start">
+          <motion.div className="col-span-2 flex flex-col gap-4 text-left sm:flex-1">
+            <motion.h2
+              className="font-funnel-display text-foreground text-3xl leading-tight font-bold transition-colors duration-300 select-none group-hover:text-violet-600 group-active:text-violet-600"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 1.02 }}
+            >
+              Built with Passion.
+            </motion.h2>
+            <motion.p className="text-muted-foreground group-hover:text-foreground/80 group-active:text-foreground/80 text-base leading-relaxed transition-colors duration-300 select-none">
+              Javaistic is built with the love and dedication of our community.
+              We are committed to providing the best possible learning
+              experience for our users.
+            </motion.p>
+          </motion.div>
+
+          <motion.div
+            className="col-span-3 flex-shrink-0"
+            whileHover={{ scale: 1.02, rotate: 1 }}
+            whileTap={{ scale: 1.05, rotate: 2 }}
+            transition={{ duration: 0.4, ease: "easeOut" }}
+          >
+            {mounted ? (
+              <Image
+                src={isDarkMode ? "/img/ui-dark.png" : "/img/ui-light.png"}
+                alt="Community-Driven Learning Platform"
+                className="h-[200px] w-full rounded-lg border object-contain transition-all duration-300 group-hover:shadow-lg group-active:shadow-lg sm:h-[250px]"
+                loading="lazy"
+                width={400}
+                height={250}
+              />
+            ) : (
+              <div className="bg-muted/50 h-[180px] w-[220px] animate-pulse rounded-lg sm:h-[220px] sm:w-[260px]" />
+            )}
+          </motion.div>
+        </motion.div>
+
+        {/* Feature Badges */}
+        <motion.div className="relative z-10 flex w-full flex-row flex-wrap items-center gap-2">
+          {[
+            {
+              icon: TargetIcon,
+              text: "Quality Focused",
+              colorClass:
+                "border-rose-500/20 bg-rose-500/10 text-rose-600 hover:border-rose-500/40 hover:bg-rose-500/20 hover:shadow-lg dark:border-rose-400/30 dark:bg-rose-400/10 dark:text-rose-400",
+              hoverAnimation: {
+                scale: 1.08,
+                y: -2,
+                boxShadow: "0 10px 20px rgba(225, 29, 72, 0.2)",
+              },
+            },
+            {
+              icon: RocketIcon,
+              text: "Always Improving",
+              colorClass:
+                "border-cyan-500/20 bg-cyan-500/10 text-cyan-600 hover:border-cyan-500/40 hover:bg-cyan-500/20 hover:shadow-lg dark:border-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-400",
+              hoverAnimation: {
+                scale: 1.08,
+                y: -2,
+                boxShadow: "0 10px 20px rgba(6, 182, 212, 0.2)",
+              },
+            },
+            {
+              icon: HeartIcon,
+              text: "Community Driven",
+              colorClass:
+                "border-violet-500/20 bg-purple-500/10 text-purple-600 hover:border-purple-500/40 hover:bg-purple-500/20 hover:shadow-lg dark:border-purple-400/30 dark:bg-purple-400/10 dark:text-purple-400",
+              hoverAnimation: {
+                scale: 1.08,
+                y: -2,
+                boxShadow: "0 10px 20px rgba(147, 51, 234, 0.2)",
+              },
+            },
+          ].map((badge, index) => (
+            <Badge
+              key={index}
+              icon={badge.icon}
+              text={badge.text}
+              colorClass={badge.colorClass}
+              hoverAnimation={badge.hoverAnimation}
+            />
+          ))}
+        </motion.div>
+      </motion.div>
+
+      {/* Responsive Design Card */}
+      <motion.div
+        className="bg-secondary dark:bg-card group relative col-span-1 flex h-[370px] cursor-pointer flex-col justify-between overflow-hidden rounded-2xl px-6 pt-6 sm:col-span-3 sm:h-full"
+        variants={ANIMATION_VARIANTS.item}
+        whileHover={HOVER_ANIMATIONS.cardSubtle}
+        whileTap={{
+          scale: 0.98,
+          boxShadow: "0 15px 30px -12px rgba(0, 0, 0, 0.15)",
+        }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
+      >
+        <motion.div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 via-transparent to-indigo-500/10 opacity-0 transition-opacity duration-500 group-hover:opacity-100 group-active:opacity-100" />
+        <div className="relative z-10">
+          <motion.h2
+            className="font-funnel-display text-foreground text-3xl font-bold transition-colors duration-300 select-none group-hover:text-blue-600 group-active:text-blue-600"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 1.02 }}
+          >
+            Responsive Design.
+          </motion.h2>
+          <motion.p className="text-muted-foreground group-hover:text-foreground/80 group-active:text-foreground/80 mt-4 transition-colors duration-300 select-none">
+            Our platform is fully responsive, ensuring a seamless experience on
+            any device.
+          </motion.p>
+        </div>
+        <motion.div
+          className="border-muted-foreground relative z-10 flex h-[65%] flex-col items-center justify-center overflow-clip rounded-t-3xl border border-b-0 p-1 pb-0 transition-colors duration-300 group-hover:border-blue-600 group-active:border-blue-600"
+          whileHover={{ scale: 1.02, y: -2 }}
+          whileTap={{ scale: 1.05, y: -3 }}
+          transition={{ duration: 0.3 }}
+        >
+          <motion.div
+            className="border-muted-foreground flex h-full w-full rounded-t-[20px] border border-b-0 transition-colors duration-300 group-hover:border-blue-500 group-active:border-blue-500"
+            style={{
+              backgroundImage:
+                mounted && isDarkMode
+                  ? "url('/img/responsive-dark.png')"
+                  : "url('/img/responsive-light.png')",
+              backgroundSize: "cover",
+            }}
+          >
+            <div className="border-muted-foreground m-1 flex h-full w-full items-start justify-center rounded-t-[16px] border border-b-0 transition-colors duration-300 group-hover:border-blue-300/50 group-active:border-blue-300/50">
+              <motion.div
+                className="text-muted-foreground border-muted-foreground mt-2 h-5 w-5 rounded-full border bg-black transition-colors duration-300"
+                whileHover={{
+                  scale: 1.2,
+                  boxShadow: "0 0 15px rgba(37, 99, 235, 0.5)",
+                }}
+                whileTap={{
+                  scale: 1.3,
+                  boxShadow: "0 0 20px rgba(37, 99, 235, 0.7)",
+                }}
+              >
+                <motion.div
+                  className="text-muted-foreground border-muted-foreground mt-[1.2px] ml-[1.2px] h-4 w-4 rounded-full border bg-black transition-colors duration-300"
+                  whileHover={{ rotate: 360 }}
+                  whileTap={{ rotate: 360, scale: 1.1 }}
+                  transition={{ duration: 0.8 }}
+                />
+              </motion.div>
+            </div>
+          </motion.div>
+        </motion.div>
+      </motion.div>
+
+      {/* Lightning Fast Card */}
+      <motion.div
+        className="bg-secondary dark:bg-card group relative col-span-1 h-[300px] cursor-pointer overflow-visible rounded-2xl p-6 sm:col-span-2 sm:h-full"
+        variants={ANIMATION_VARIANTS.item}
+        whileHover={{
+          scale: 1.02,
+          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        }}
+        whileTap={{
+          scale: 0.98,
+          boxShadow: "0 15px 30px -12px rgba(0, 0, 0, 0.15)",
+        }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
+      >
+        <motion.div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-500/10 via-transparent to-yellow-500/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-active:opacity-100" />
+        <motion.div className="relative z-10 flex h-full flex-col justify-between">
+          <motion.div
+            className="flex flex-1 items-center justify-center"
+            whileHover={{
+              rotate: [0, -2, 2, -2, 0],
+              scale: 1.05,
+            }}
+            whileTap={{
+              rotate: [0, -3, 3, -3, 0],
+              scale: 1.08,
+            }}
+            transition={{ duration: 0.6, ease: "easeInOut" }}
+          >
+            <ZapIcon className="text-foreground h-28 w-28 stroke-amber-400 stroke-[0.5px] filter transition-all duration-300 ease-in-out group-hover:fill-amber-500 group-hover:stroke-amber-500 group-hover:drop-shadow-lg group-active:fill-amber-500 group-active:stroke-amber-500 group-active:drop-shadow-lg sm:h-40 sm:w-40" />
+          </motion.div>
+          <motion.div className="flex flex-col gap-3">
+            <motion.h2
+              className="font-funnel-display text-foreground text-center text-3xl font-bold transition-colors duration-300 select-none group-hover:text-amber-500 group-active:text-amber-500 sm:text-left sm:text-3xl"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 1.02 }}
+            >
+              Lightning <i>Fast.</i>
+            </motion.h2>
+            <motion.div className="translate-y-2 transform opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 group-active:translate-y-0 group-active:opacity-100">
+              <span className="inline-flex items-center rounded-full border border-amber-500/20 bg-amber-500/10 px-3 py-1.5 text-xs font-semibold text-amber-600 select-none dark:border-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400">
+                <ZapIcon className="mr-1 h-3 w-3" />
+                Optimized Performance
+              </span>
+            </motion.div>
+          </motion.div>
+        </motion.div>
+      </motion.div>
+
+      {/* Advanced Search Card */}
+      <motion.div
+        className="bg-secondary dark:bg-card group relative col-span-1 flex cursor-pointer flex-col justify-between gap-6 overflow-hidden rounded-2xl p-6 sm:col-span-6 sm:flex-row sm:items-center"
+        variants={ANIMATION_VARIANTS.item}
+        whileHover={HOVER_ANIMATIONS.cardSubtle}
+        whileTap={{
+          scale: 0.98,
+          boxShadow: "0 15px 30px -12px rgba(0, 0, 0, 0.15)",
+        }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
+      >
+        <motion.div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-green-500/10 via-transparent to-emerald-500/10 opacity-0 transition-opacity duration-500 group-hover:opacity-100 group-active:opacity-100" />
+        <motion.div className="relative z-10 flex flex-col gap-4 text-left sm:flex-1">
+          <motion.h2
+            className="font-funnel-display text-foreground text-3xl leading-tight font-bold transition-colors duration-300 select-none group-hover:text-green-600 group-active:text-green-600"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 1.02 }}
+          >
+            Advanced Search.
+          </motion.h2>
+          <motion.p className="text-muted-foreground group-hover:text-foreground/80 group-active:text-foreground/80 text-lg leading-relaxed transition-colors duration-300 select-none">
+            Find what you need quickly with our powerful search features and
+            intelligent filtering.
+          </motion.p>
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge
+              icon={SearchIcon}
+              text="Smart Search"
+              colorClass="border-blue-500/20 bg-blue-500/10 text-blue-600 hover:border-blue-500/40 hover:bg-blue-500/20 hover:shadow-lg dark:border-blue-400/30 dark:bg-blue-400/10 dark:text-blue-400"
+              hoverAnimation={{
+                scale: 1.08,
+                y: -2,
+                boxShadow: "0 10px 20px rgba(37, 99, 235, 0.2)",
+              }}
+            />
+            <Badge
+              icon={SparklesIcon}
+              text="Auto-Updated"
+              colorClass="border-green-500/20 bg-green-500/10 text-green-600 hover:border-green-500/40 hover:bg-green-500/20 hover:shadow-lg dark:border-green-400/30 dark:bg-green-400/10 dark:text-green-400"
+              hoverAnimation={{
+                scale: 1.08,
+                y: -2,
+                boxShadow: "0 10px 20px rgba(34, 197, 94, 0.2)",
+              }}
+            />
+            <Badge
+              icon={FlameIcon}
+              text="Most Popular"
+              colorClass="border-orange-500/20 bg-orange-500/10 text-orange-600 hover:border-orange-500/40 hover:bg-orange-500/20 hover:shadow-lg dark:border-orange-400/30 dark:bg-orange-400/10 dark:text-orange-400"
+              hoverAnimation={{
+                scale: 1.08,
+                y: -2,
+                boxShadow: "0 10px 20px rgba(249, 115, 22, 0.2)",
+              }}
+            />
+          </div>
+        </motion.div>
+        <motion.div
+          className="relative z-10 flex w-full flex-shrink-0 justify-center sm:ml-6 sm:w-auto"
+          whileHover={{ scale: 1.05, rotate: 1 }}
+          whileTap={{ scale: 1.08, rotate: 2 }}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
+          {mounted && (
+            <Image
+              src={
+                isDarkMode ? "/img/search-dark.png" : "/img/search-light.png"
+              }
+              alt="Advanced Search Interface"
+              className="h-[200px] w-full max-w-[280px] rounded-lg object-contain transition-all duration-300 group-hover:shadow-xl group-active:shadow-xl sm:h-[250px] sm:max-w-none"
+              loading="lazy"
+              width={280}
+              height={250}
+            />
+          )}
+          {!mounted && (
+            <div className="bg-muted/50 h-[200px] w-full max-w-[280px] animate-pulse rounded-lg sm:h-[250px] sm:max-w-[300px]" />
+          )}
+        </motion.div>
+      </motion.div>
+    </motion.section>
+  );
+}
diff --git a/src/components/home/cta-section.tsx b/src/components/home/cta-section.tsx
new file mode 100644
index 00000000..c3cd1c4c
--- /dev/null
+++ b/src/components/home/cta-section.tsx
@@ -0,0 +1,45 @@
+"use client";
+import { motion } from "motion/react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { ANIMATION_VARIANTS, HOVER_ANIMATIONS } from "./animation-variants";
+
+export function CTASection() {
+  return (
+    <motion.section
+      className="mx-auto w-full max-w-5xl py-20"
+      variants={ANIMATION_VARIANTS.container}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.1 }}
+    >
+      <motion.div
+        className="mx-auto rounded-3xl bg-gradient-to-br from-indigo-900 to-sky-700 px-6 py-16 text-center text-white shadow-xl"
+        variants={ANIMATION_VARIANTS.item}
+        whileHover={{ scale: 1.02 }}
+        transition={{ duration: 0.3 }}
+      >
+        <h2 className="font-funnel-display mb-4 text-4xl font-bold">
+          Ready to become a Java Pro?
+        </h2>
+        <p className="dark:text-secondary-foreground mb-8 text-lg font-medium">
+          Begin your Java journey now — no credit card, no sign-up, just pure
+          learning.
+        </p>
+        <motion.div
+          whileHover={HOVER_ANIMATIONS.button}
+          whileTap={{ scale: 0.95 }}
+        >
+          <Link href="/docs">
+            <Button
+              size="lg"
+              className="inline-flex items-center bg-white text-lg font-semibold text-black hover:bg-white"
+            >
+              Start Learning
+            </Button>
+          </Link>
+        </motion.div>
+      </motion.div>
+    </motion.section>
+  );
+}
diff --git a/src/components/home/feature-card.tsx b/src/components/home/feature-card.tsx
new file mode 100644
index 00000000..ee21dea6
--- /dev/null
+++ b/src/components/home/feature-card.tsx
@@ -0,0 +1,84 @@
+"use client";
+import Image from "next/image";
+import { motion } from "motion/react";
+import { HOVER_ANIMATIONS } from "./animation-variants";
+
+// Feature Card Component for better reusability
+interface FeatureCardProps {
+  title: string;
+  imageSrc: string;
+  buttonText: string;
+  buttonColor: string;
+  gradientColors: string;
+  onClick: () => void;
+  imageRotation?: number;
+  imageAlt: string;
+  imageWidth?: number;
+  imageHeight?: number;
+}
+
+export function FeatureCard({
+  title,
+  imageSrc,
+  buttonText,
+  buttonColor,
+  gradientColors,
+  onClick,
+  imageRotation = 0.5,
+  imageAlt,
+  imageWidth = 400,
+  imageHeight = 300,
+}: FeatureCardProps) {
+  return (
+    <motion.div
+      className="dark:bg-card group relative cursor-pointer overflow-clip rounded-2xl bg-neutral-100 px-3 transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
+      whileHover={HOVER_ANIMATIONS.card}
+      whileTap={{ scale: 0.98 }}
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+      aria-label={`Learn more about ${title}`}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      }}
+    >
+      <motion.div
+        className={`absolute inset-0 rounded-2xl ${gradientColors} opacity-0 transition-opacity duration-300 group-hover:opacity-100`}
+      />
+      <Image
+        src={imageSrc}
+        className={`relative z-10 object-cover px-4 pt-10 pb-4 transition-all duration-300 ease-in-out group-hover:scale-105 ${
+          imageRotation > 0
+            ? "group-hover:rotate-0.5"
+            : "group-hover:-rotate-0.5"
+        }`}
+        alt={imageAlt}
+        loading="lazy"
+        width={imageWidth}
+        height={imageHeight}
+        style={{
+          maskImage:
+            "linear-gradient(to bottom, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%)",
+        }}
+      />
+      <motion.h4
+        className={`relative z-10 mb-6 text-lg font-semibold text-neutral-700 transition-colors duration-300 dark:text-neutral-300`}
+      >
+        {title}
+      </motion.h4>
+      <motion.div
+        className="absolute right-3 bottom-5 left-3 translate-y-2 opacity-0 transition-all duration-500 ease-out group-hover:translate-y-0 group-hover:opacity-100"
+        initial={false}
+      >
+        <span
+          className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${buttonColor.replace("group-hover:", "")}`}
+        >
+          {buttonText}
+        </span>
+      </motion.div>
+    </motion.div>
+  );
+}
diff --git a/src/components/home/features-section.tsx b/src/components/home/features-section.tsx
new file mode 100644
index 00000000..22657987
--- /dev/null
+++ b/src/components/home/features-section.tsx
@@ -0,0 +1,102 @@
+"use client";
+import { motion } from "motion/react";
+import { useMemo } from "react";
+import { useDarkMode } from "@/hooks/useDarkMode";
+import { FeatureCard } from "./feature-card";
+import { ANIMATION_VARIANTS } from "./animation-variants";
+
+export function FeaturesSection() {
+  const { isDarkMode, mounted } = useDarkMode();
+
+  // Memoized feature cards data
+  const featureCards = useMemo(
+    () => [
+      {
+        title: "Beautiful out of the box",
+        imageSrc:
+          mounted && isDarkMode ? "/img/ui-dark.png" : "/img/ui-light.png",
+        buttonText: "Explore Design →",
+        buttonColor:
+          "group-hover:text-blue-600 dark:group-hover:text-blue-400 border-blue-500/20 bg-blue-500/10 text-blue-600 dark:border-blue-400/30 dark:bg-blue-400/10 dark:text-blue-400",
+        gradientColors: "bg-gradient-to-br from-blue-500/10 to-purple-500/10",
+        onClick: () => (window.location.href = "/docs"),
+        imageRotation: 0.5,
+        imageAlt:
+          "Beautiful user interface design showcasing Javaistic's clean and modern look",
+        imageWidth: 400,
+        imageHeight: 300,
+      },
+      {
+        title: "Interactive coding playgrounds",
+        imageSrc:
+          mounted && isDarkMode
+            ? "/img/playground-dark.png"
+            : "/img/playground-light.png",
+        buttonText: "Try Coding →",
+        buttonColor:
+          "group-hover:text-green-600 dark:group-hover:text-green-400 border-green-500/20 bg-green-500/10 text-green-600 dark:border-green-400/30 dark:bg-green-400/10 dark:text-green-400",
+        gradientColors: "bg-gradient-to-br from-green-500/10 to-emerald-500/10",
+        onClick: () => (window.location.href = "/programs"),
+        imageRotation: -0.5,
+        imageAlt:
+          "Interactive coding playground interface for hands-on Java learning",
+        imageWidth: 400,
+        imageHeight: 300,
+      },
+      {
+        title: "Fully open source and free",
+        imageSrc:
+          mounted && isDarkMode ? "/img/os-dark.png" : "/img/os-light.png",
+        buttonText: "View GitHub →",
+        buttonColor:
+          "group-hover:text-purple-600 dark:group-hover:text-purple-400 border-purple-500/20 bg-purple-500/10 text-purple-600 dark:border-purple-400/30 dark:bg-purple-400/10 dark:text-purple-400",
+        gradientColors: "bg-gradient-to-br from-purple-500/10 to-pink-500/10",
+        onClick: () =>
+          window.open("https://github.com/javaistic/javaistic", "_blank"),
+        imageRotation: 0.5,
+        imageAlt: "Open source community collaboration and GitHub repository",
+        imageWidth: 400,
+        imageHeight: 300,
+      },
+    ],
+    [mounted, isDarkMode],
+  );
+
+  return (
+    <motion.section
+      className="flex flex-col items-center justify-center py-24"
+      variants={ANIMATION_VARIANTS.container}
+      initial="hidden"
+      animate="visible"
+      role="region"
+      aria-labelledby="features-title"
+    >
+      <motion.h2
+        id="features-title"
+        className="font-funnel-display text-foreground max-w-5xl text-4xl font-bold tracking-tight sm:text-5xl"
+        variants={ANIMATION_VARIANTS.title}
+      >
+        Crafted for Learners
+      </motion.h2>
+      <motion.p
+        className="mt-4 mb-16 max-w-3xl text-lg font-medium text-neutral-700 dark:text-neutral-300"
+        variants={ANIMATION_VARIANTS.item}
+      >
+        At Javaistic, every feature is designed to make learning effortless and
+        inspiring.
+      </motion.p>
+      <motion.div
+        className="grid w-full max-w-5xl grid-cols-1 gap-6 sm:h-[370px] sm:grid-cols-3"
+        variants={ANIMATION_VARIANTS.container}
+        initial="hidden"
+        animate="visible"
+        role="group"
+        aria-label="Key features of Javaistic"
+      >
+        {featureCards.map((card, index) => (
+          <FeatureCard key={index} {...card} />
+        ))}
+      </motion.div>
+    </motion.section>
+  );
+}
diff --git a/src/components/home/hero-section.tsx b/src/components/home/hero-section.tsx
new file mode 100644
index 00000000..4de4c3b1
--- /dev/null
+++ b/src/components/home/hero-section.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { GitHubIcon } from "@/components/icons";
+import { Button } from "@/components/ui/button";
+import { motion } from "motion/react";
+import { ANIMATION_VARIANTS } from "./animation-variants";
+
+export function HeroSection() {
+  return (
+    <motion.section
+      className="flex flex-col items-center justify-center pt-36 pb-14"
+      variants={ANIMATION_VARIANTS.container}
+      initial="hidden"
+      animate="visible"
+      role="banner"
+      aria-labelledby="hero-title"
+    >
+      <motion.h1
+        id="hero-title"
+        className="font-funnel-display text-foreground max-w-5xl text-5xl font-bold tracking-tighter sm:text-7xl"
+        variants={ANIMATION_VARIANTS.title}
+      >
+        Master Java Programming efficiently with Javaistic
+      </motion.h1>
+      <motion.p
+        className="mt-6 max-w-3xl text-lg font-medium text-neutral-700 sm:text-xl dark:text-neutral-300"
+        variants={ANIMATION_VARIANTS.item}
+        role="complementary"
+        aria-label="Hero description"
+      >
+        Interactive, fast-paced learning for absolute beginners to advanced
+        learners.
+        <br /> A free and open-source platform to learn Java programming.
+      </motion.p>
+      <motion.div
+        className="mt-8 flex flex-col gap-4 sm:flex-row"
+        variants={ANIMATION_VARIANTS.container}
+        initial="hidden"
+        animate="visible"
+      >
+        <motion.a href="/docs" variants={ANIMATION_VARIANTS.title}>
+          <Button
+            size="lg"
+            className="cursor-pointer rounded-lg py-6 text-lg font-semibold duration-200 ease-in-out active:scale-105 dark:hover:bg-white/80"
+            aria-label="Start learning Java programming with our documentation"
+          >
+            Start Learning Now
+          </Button>
+        </motion.a>
+        <motion.a
+          href="https://github.com/javaistic/javaistic"
+          target="_blank"
+          rel="noopener noreferrer"
+          variants={ANIMATION_VARIANTS.title}
+        >
+          <Button
+            size="lg"
+            variant="outline"
+            className="dark:text-foreground border-blue cursor-pointer rounded-lg py-6 text-lg font-semibold"
+            aria-label="View Javaistic project on GitHub"
+          >
+            <GitHubIcon className="!size-5" aria-hidden="true" />
+            Star on GitHub
+          </Button>
+        </motion.a>
+      </motion.div>
+    </motion.section>
+  );
+}
diff --git a/src/components/home/home-tabs.tsx b/src/components/home/home-tabs.tsx
new file mode 100644
index 00000000..869c6d82
--- /dev/null
+++ b/src/components/home/home-tabs.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import {
+  UnderlineTabs,
+  type UnderlineTab,
+} from "@/components/home/underline-tabs";
+import { useDarkMode } from "@/hooks/useDarkMode";
+import Image from "next/image";
+import { SVGProps } from "react";
+
+export default function HomeTabs() {
+  const { isDarkMode, mounted } = useDarkMode();
+
+  // Generate tab items dynamically to handle dark/light mode images
+  const TAB_ITEMS: UnderlineTab[] = [
+    {
+      value: "docs",
+      label: "Docs",
+      icon: <DocsIcon className="h-5 w-5" />,
+      content: (
+        <Image
+          src={
+            mounted
+              ? isDarkMode
+                ? "/img/docs-dark.png"
+                : "/img/docs-light.png"
+              : "/img/docs-dark.png"
+          }
+          alt="Java programming docs and tutorials interface preview"
+          width={800}
+          height={600}
+          className="h-auto w-full rounded-3xl shadow-lg"
+          priority
+        />
+      ),
+    },
+    {
+      value: "programs",
+      label: "Programs",
+      icon: <CodeIcon className="h-5 w-5" />,
+      content: (
+        <Image
+          src={
+            mounted
+              ? isDarkMode
+                ? "/img/programs-dark.png"
+                : "/img/programs-light.png"
+              : "/img/programs-dark.png"
+          }
+          alt="Java programs interface preview"
+          width={800}
+          height={600}
+          className="h-auto w-full rounded-3xl shadow-lg"
+        />
+      ),
+    },
+  ];
+
+  return (
+    <div className="flex w-full flex-col items-center">
+      {/* Top Tab Navigation */}
+      <UnderlineTabs items={TAB_ITEMS} defaultValue="docs" className="w-full" />
+    </div>
+  );
+}
+
+function CodeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 19 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_4266_956)">
+        <path
+          d="M13.75 2H5.25C3.733 2 2.5 3.233 2.5 4.75V13.25C2.5 14.767 3.733 16 5.25 16H13.75C15.267 16 16.5 14.767 16.5 13.25V4.75C16.5 3.233 15.267 2 13.75 2ZM6.78 12.78C6.634 12.926 6.442 13 6.25 13C6.058 13 5.866 12.927 5.72 12.78C5.427 12.487 5.427 12.012 5.72 11.719L7.69 9.749L5.72 7.779C5.427 7.486 5.427 7.011 5.72 6.718C6.013 6.425 6.488 6.425 6.781 6.718L9.281 9.218C9.574 9.511 9.574 9.986 9.281 10.279L6.781 12.779L6.78 12.78ZM12.75 13H10.25C9.836 13 9.5 12.664 9.5 12.25C9.5 11.836 9.836 11.5 10.25 11.5H12.75C13.164 11.5 13.5 11.836 13.5 12.25C13.5 12.664 13.164 13 12.75 13Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4266_956">
+          <rect
+            width="18"
+            height="18"
+            fill="white"
+            transform="translate(0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+function DocsIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M16.146 2.98067C15.398 2.53967 14.181 2.01367 12.626 2.01367H12.624C11.022 2.01367 9.773 2.57067 9 3.04367C8.227 2.57067 6.978 2.01367 5.377 2.01367H5.375C3.82 2.01367 2.603 2.53967 1.855 2.98067C1.319 3.29567 1 3.85767 1 4.48167V13.5727C1 14.1537 1.287 14.6957 1.766 15.0227C2.239 15.3447 2.837 15.4127 3.369 15.2037C4.012 14.9507 4.683 14.8217 5.366 14.8207H5.374C6.586 14.8207 7.542 15.2247 8.131 15.5647C8.169 15.5867 8.211 15.5957 8.25 15.6147V5.94567C8.25 5.53167 8.586 5.19567 9 5.19567C9.414 5.19567 9.75 5.53167 9.75 5.94567V15.6147C9.789 15.5957 9.831 15.5867 9.869 15.5647C10.458 15.2257 11.413 14.8207 12.626 14.8207H12.633C13.316 14.8207 13.987 14.9507 14.631 15.2037C15.16 15.4117 15.758 15.3437 16.232 15.0217C16.713 14.6937 17 14.1507 17 13.5687V4.48667C17 3.86867 16.672 3.29167 16.146 2.98067Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/home/index.ts b/src/components/home/index.ts
new file mode 100644
index 00000000..857d76aa
--- /dev/null
+++ b/src/components/home/index.ts
@@ -0,0 +1,14 @@
+// Export all home page components
+export { HeroSection } from "./hero-section";
+export { FeaturesSection } from "./features-section";
+export { VisionSection } from "./vision-section";
+export { BentoGridSection } from "./bento-grid-section";
+export { CTASection } from "./cta-section";
+export { BackgroundSection } from "./background-section";
+
+// Export shared components
+export { FeatureCard } from "./feature-card";
+export { Badge } from "./badge";
+
+// Export constants
+export { ANIMATION_VARIANTS, HOVER_ANIMATIONS } from "./animation-variants";
diff --git a/src/components/home/underline-tabs.tsx b/src/components/home/underline-tabs.tsx
new file mode 100644
index 00000000..6082cbbf
--- /dev/null
+++ b/src/components/home/underline-tabs.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+import { motion } from "motion/react";
+import * as React from "react";
+
+export type UnderlineTab = {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+  content?: React.ReactNode;
+};
+
+type UnderlineTabsProps = {
+  items: UnderlineTab[];
+  defaultValue?: string;
+  className?: string;
+  listClassName?: string;
+  onValueChange?: (value: string) => void;
+};
+
+// Debounce utility for resize events
+function useDebounce<T extends (...args: unknown[]) => void>(
+  callback: T,
+  delay: number,
+): T {
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  return React.useCallback(
+    ((...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => callback(...args), delay);
+    }) as T,
+    [callback, delay],
+  );
+}
+
+export function UnderlineTabs({
+  items,
+  defaultValue,
+  className,
+  listClassName,
+  onValueChange,
+}: UnderlineTabsProps) {
+  const initial = defaultValue ?? items[0]?.value;
+  const [activeValue, setActiveValue] = React.useState(initial);
+  const [indicatorProps, setIndicatorProps] = React.useState({
+    left: 0,
+    width: 0,
+  });
+  const listRef = React.useRef<HTMLDivElement>(null);
+
+  const updateIndicator = React.useCallback(() => {
+    if (!listRef.current) return;
+
+    const activeElement = listRef.current.querySelector<HTMLButtonElement>(
+      `[data-state="active"]`,
+    );
+
+    if (activeElement) {
+      setIndicatorProps({
+        left: activeElement.offsetLeft,
+        width: activeElement.offsetWidth,
+      });
+    }
+  }, []);
+
+  const debouncedUpdateIndicator = useDebounce(updateIndicator, 100);
+
+  // Handle value changes
+  const handleValueChange = React.useCallback(
+    (value: string) => {
+      setActiveValue(value);
+      onValueChange?.(value);
+    },
+    [onValueChange],
+  );
+
+  // Update indicator when active tab changes
+  React.useEffect(() => {
+    updateIndicator();
+  }, [activeValue, updateIndicator]);
+
+  // Handle resize events
+  React.useEffect(() => {
+    window.addEventListener("resize", debouncedUpdateIndicator);
+    return () => window.removeEventListener("resize", debouncedUpdateIndicator);
+  }, [debouncedUpdateIndicator]);
+
+  return (
+    <Tabs
+      defaultValue={initial}
+      onValueChange={handleValueChange}
+      className={cn("w-full", className)}
+    >
+      <TabsList
+        ref={listRef}
+        className={cn(
+          "relative mx-auto flex w-full max-w-[220px] gap-3 rounded-none bg-transparent p-0",
+          listClassName,
+        )}
+      >
+        {items.map((item) => (
+          <TabsTrigger
+            key={item.value}
+            value={item.value}
+            id={`tab-${item.value}`}
+            aria-controls={`panel-${item.value}`}
+            className={cn(
+              "relative -mb-px rounded-none border-none px-1 pb-5",
+              "text-muted-foreground cursor-pointer text-base font-medium",
+              "hover:text-foreground dark:hover:text-foreground focus-visible:text-foreground dark:focus-visible:text-foreground",
+              "focus-visible:ring-ring/50 focus-visible:rounded-sm focus-visible:ring-2 focus-visible:outline-none",
+              "data-[state=active]:text-foreground bg-transparent! data-[state=active]:bg-transparent data-[state=active]:shadow-none",
+              "transition-colors duration-200 [&_svg]:size-5",
+            )}
+          >
+            <span className="flex items-center gap-2 [&_svg]:size-5">
+              {item.icon}
+              <span>{item.label}</span>
+            </span>
+          </TabsTrigger>
+        ))}
+
+        {/* Sliding underline with optimized animation and theme support */}
+        <motion.span
+          className="bg-foreground absolute bottom-0 h-[4px] rounded-full will-change-transform"
+          initial={false}
+          animate={{
+            left: indicatorProps.left,
+            width: indicatorProps.width,
+          }}
+          transition={{
+            type: "spring",
+            stiffness: 500,
+            damping: 35,
+            mass: 0.8,
+          }}
+        />
+      </TabsList>
+
+      {items.map((item) =>
+        item.content ? (
+          <TabsContent
+            key={item.value}
+            value={item.value}
+            className="w-full pt-2"
+          >
+            <div
+              className="border-border/20 w-full rounded-3xl border-4 transition-all duration-300"
+              style={{
+                maskImage:
+                  "linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%)",
+                WebkitMaskImage:
+                  "linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%)",
+              }}
+              role="tabpanel"
+              aria-labelledby={`tab-${item.value}`}
+              id={`panel-${item.value}`}
+            >
+              {item.content}
+            </div>
+          </TabsContent>
+        ) : null,
+      )}
+    </Tabs>
+  );
+}
diff --git a/src/components/home/vision-section.tsx b/src/components/home/vision-section.tsx
new file mode 100644
index 00000000..d4b0a7b9
--- /dev/null
+++ b/src/components/home/vision-section.tsx
@@ -0,0 +1,36 @@
+"use client";
+import { motion } from "motion/react";
+import { Ripple } from "@/components/magicui/ripple";
+import { ANIMATION_VARIANTS } from "./animation-variants";
+
+export function VisionSection() {
+  return (
+    <motion.section
+      className="group mx-auto mb-12 flex w-full max-w-5xl cursor-pointer flex-col items-center justify-center rounded-2xl border transition-all duration-300 hover:border-blue-500/50"
+      variants={ANIMATION_VARIANTS.container}
+      initial="hidden"
+      animate="visible"
+      whileHover={{ scale: 1.02 }}
+      onClick={() => (window.location.href = "/about")}
+    >
+      <div className="relative flex h-[300px] w-full flex-col items-center justify-center overflow-hidden">
+        <motion.div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/5 to-purple-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+
+        <motion.h2
+          className="font-funnel-display text-foreground relative z-10 text-center text-4xl font-bold transition-colors duration-300 group-hover:text-blue-600 dark:group-hover:text-blue-400"
+          variants={ANIMATION_VARIANTS.title}
+          whileHover={{ scale: 1.05 }}
+        >
+          Inspiring learners. <br />
+          Empowering all.
+        </motion.h2>
+        <motion.div className="relative z-10 mt-6 translate-y-2 opacity-0 transition-all duration-500 ease-out group-hover:translate-y-0 group-hover:opacity-100">
+          <span className="inline-flex items-center rounded-full border border-blue-500/20 bg-blue-500/10 px-4 py-2 text-sm font-medium text-blue-600 dark:border-blue-400/30 dark:bg-blue-400/10 dark:text-blue-400">
+            Our Vision →
+          </span>
+        </motion.div>
+        <Ripple className="fill-blue-400 opacity-70 transition-opacity duration-300 group-hover:opacity-100" />
+      </div>
+    </motion.section>
+  );
+}
diff --git a/src/components/magicui/ripple.tsx b/src/components/magicui/ripple.tsx
new file mode 100644
index 00000000..8676ff06
--- /dev/null
+++ b/src/components/magicui/ripple.tsx
@@ -0,0 +1,58 @@
+import React, { ComponentPropsWithoutRef, CSSProperties } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface RippleProps extends ComponentPropsWithoutRef<"div"> {
+  mainCircleSize?: number;
+  mainCircleOpacity?: number;
+  numCircles?: number;
+}
+
+export const Ripple = React.memo(function Ripple({
+  mainCircleSize = 210,
+  mainCircleOpacity = 0.24,
+  numCircles = 8,
+  className,
+  ...props
+}: RippleProps) {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute inset-0 [mask-image:linear-gradient(to_bottom,white,transparent)] select-none",
+        className,
+      )}
+      {...props}
+    >
+      {Array.from({ length: numCircles }, (_, i) => {
+        const size = mainCircleSize + i * 70;
+        const opacity = mainCircleOpacity - i * 0.03;
+        const animationDelay = `${i * 0.06}s`;
+        const borderStyle = "solid";
+
+        return (
+          <div
+            key={i}
+            className={`animate-ripple bg-foreground/25 absolute rounded-full border shadow-xl`}
+            style={
+              {
+                "--i": i,
+                width: `${size}px`,
+                height: `${size}px`,
+                opacity,
+                animationDelay,
+                borderStyle,
+                borderWidth: "1px",
+                borderColor: `var(--foreground)`,
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%) scale(1)",
+              } as CSSProperties
+            }
+          />
+        );
+      })}
+    </div>
+  );
+});
+
+Ripple.displayName = "Ripple";
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 00000000..469a958d
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/src/hooks/useDarkMode.ts b/src/hooks/useDarkMode.ts
new file mode 100644
index 00000000..0eb2d4ef
--- /dev/null
+++ b/src/hooks/useDarkMode.ts
@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Custom hook for detecting and managing dark mode state
+ * Handles system preferences, local storage, and class/attribute changes
+ */
+export function useDarkMode() {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  // Optimized theme detection
+  const checkDarkMode = useCallback(() => {
+    if (typeof window === "undefined") return;
+
+    const hasDarkClass = document.documentElement.classList.contains("dark");
+    const dataTheme = document.documentElement.getAttribute("data-theme");
+    const systemPrefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    ).matches;
+    const savedTheme = localStorage.getItem("theme");
+
+    const isDark =
+      savedTheme === "dark" ||
+      dataTheme === "dark" ||
+      hasDarkClass ||
+      (savedTheme !== "light" && dataTheme !== "light" && systemPrefersDark);
+
+    setIsDarkMode(isDark);
+  }, []);
+
+  useEffect(() => {
+    setMounted(true);
+    checkDarkMode();
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    mediaQuery.addEventListener("change", checkDarkMode);
+
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"],
+    });
+
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === "theme") checkDarkMode();
+    };
+    window.addEventListener("storage", handleStorageChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", checkDarkMode);
+      observer.disconnect();
+      window.removeEventListener("storage", handleStorageChange);
+    };
+  }, [checkDarkMode]);
+
+  return { isDarkMode, mounted };
+}