🚀 feat(_up): I don't know actually

src/pages/Home.tsx

@@ -21,13 +21,14 @@ export function Home() {
             }
           }
 
-          /* Black and #28282b gradient animation */
+          /* Hero Section Background */
           .hero-background {
-            background: linear-gradient(270deg, #000000, #28282b, #000000); /* Black and Dark Gray Gradient */
+            background: linear-gradient(270deg, #6495ed, #28282b, #6495ed); /* Updated Gradient */
             background-size: 300% 300%;
             animation: gradientAnimation 15s ease infinite;
           }
 
+
           /* Card hover effect */
           .card:hover {
             transform: scale(1.05);
@@ -50,8 +51,12 @@ export function Home() {
         <div className="container mx-auto px-4 text-center relative z-10">
           {/* Main Heading */}
           <h1 className="text-5xl font-extrabold mb-6 text-shadow-md leading-tight">
-            Experience the Power 🔥
+            EXPERIENCE THE POWER OF
           </h1>
+          <h1 className="text-5xl font-extrabold mb-6 text-shadow-md leading-tight transform hover:scale-110 hover:text-[#ffffff] transition-all duration-300">
+            SNIGDHA OS 🔥
+          </h1>
+
           <p className="text-xl mb-8 max-w-3xl mx-auto text-shadow-lg text-justify">
             Snigdha OS is a lightweight, Arch-based Linux distribution crafted for <strong>Penetration Testing 🛡️</strong>, <strong>Ethical Hacking 🔍</strong>, and general use. Power up your system with cutting-edge tools 🛠️ and enhanced security features 🔐💻.
           </p>
@@ -60,7 +65,7 @@ export function Home() {
           <div className="flex justify-center space-x-6 mt-6">
             <Link
               to="/download"
-              className="bg-white text-[#6495ed] px-8 py-4 rounded-lg font-semibold shadow-lg transform hover:scale-105 hover:bg-gray-100 transition-all duration-300 inline-flex items-center space-x-3"
+              className="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold transform hover:scale-105 hover:bg-white hover:text-[#6495ed] transition-all duration-300 inline-flex items-center space-x-3"
             >
               <Download className="h-5 w-5" />
               <span>Download Now 🚀</span>
@@ -77,8 +82,8 @@ export function Home() {
 
           {/* Additional Information */}
           <div className="mt-12 max-w-2xl mx-auto">
-            <p className="text-lg text-white opacity-80 mb-4 text-justify">
+            <p className="text-xl mb-8 max-w-3xl mx-auto text-shadow-lg text-justify">
-              Join our thriving community of developers and cybersecurity professionals who are working together to build a safer digital world. 🌍🔧 Contribute to the project or simply enjoy the tools designed for your security needs.
+              Join our thriving community of developers and cybersecurity professionals who are working together to build a safer digital world. Contribute to the project or simply enjoy the tools designed for your security needs.
             </p>
 
             {/* Call to Action Button */}
@@ -96,110 +101,170 @@ export function Home() {
       </section>
 
       {/* Features Section */}
-      <section className="py-16 bg-gradient-to-r from-[#6495ed] to-white">
+      <section className="py-16 bg-gradient-to-r from-[#ffffff] to-white">
   <div className="container mx-auto px-4">
+    {/* Main Heading */}
     <h2 className="text-4xl font-bold text-center text-[#6495ed] mb-12 tracking-tight">
       Key Features ✨
     </h2>
+
+    {/* Subheading */}
+    <p className="text-xl text-center text-gray-700 mb-6 max-w-3xl mx-auto">
+      Discover the amazing features of Snigdha OS that make it the perfect choice for developers, cybersecurity professionals, and anyone looking for a fast, secure, and customizable OS.
+    </p>
+
+    {/* Feature Cards */}
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12">
       <FeatureCard
-              icon={<Shield className="h-10 w-10 text-red-500" />}
+        icon={<Shield className="h-10 w-10 text-red-500 mx-auto" />}
         title="Secure 🔒"
         description="Regular security updates and a robust system architecture keep your data safe."
       />
       <FeatureCard
-              icon={<Terminal className="h-10 w-10 text-green-500" />}
+        icon={<Terminal className="h-10 w-10 text-green-500 mx-auto" />}
         title="Powerful 💪"
         description="Full access to the terminal and system components for advanced users."
       />
       <FeatureCard
-              icon={<Download className="h-10 w-10 text-blue-500" />}
+        icon={<Download className="h-10 w-10 text-blue-500 mx-auto" />}
         title="Free Forever 🎉"
         description="Snigdha OS is free and open source. No costs, no subscriptions."
       />
       <FeatureCard
-              icon={<Award className="h-10 w-10 text-yellow-500" />}
+        icon={<Award className="h-10 w-10 text-yellow-500 mx-auto" />}
         title="Customizable 🎨"
         description="Personalize your desktop environment to suit your needs and style."
       />
       <FeatureCard
-              icon={<Users className="h-10 w-10 text-pink-500" />}
+        icon={<Users className="h-10 w-10 text-pink-500 mx-auto" />}
         title="Community Support 🤗"
         description="A vibrant community ready to help and share knowledge."
       />
       <FeatureCard
-              icon={<Star className="h-10 w-10 text-[#6495ed]" />}
+        icon={<Star className="h-10 w-10 text-[#6495ed] mx-auto" />}
         title="Feature Rich ⚡"
         description="Pre-installed applications and tools for everyday use."
       />
       <FeatureCard
-              icon={<Coffee className="h-10 w-10 text-brown-500" />}
+        icon={<Coffee className="h-10 w-10 text-brown-500 mx-auto" />}
         title="Energy Efficient 🌱"
         description="Optimized performance to save energy and enhance hardware longevity."
       />
       <FeatureCard
-              icon={<ArrowRight className="h-10 w-10 text-teal-500" />}
+        icon={<ArrowRight className="h-10 w-10 text-teal-500 mx-auto" />}
         title="Fast Boot ⏱️"
         description="Experience faster boot times and smooth transitions."
       />
       <FeatureCard
-              icon={<Terminal className="h-10 w-10 text-purple-500" />}
+        icon={<Terminal className="h-10 w-10 text-purple-500 mx-auto" />}
         title="Advanced Tools 🧰"
         description="Access specialized penetration testing and ethical hacking tools."
       />
     </div>
   </div>
+
+  {/* Inline CSS for Border Animation and Centered Icons */}
+  <style>
+    {`
+      .feature-card {
+        position: relative;
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+      }
+
+      .feature-card:hover {
+        transform: translateY(-10px);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+        border: 2px solid #6495ed; /* Add a blue border on hover */
+      }
+
+      .feature-card .icon {
+        margin-bottom: 15px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .feature-card .title {
+        font-size: 1.25rem;
+        font-weight: 600;
+      }
+
+      .feature-card .description {
+        font-size: 1rem;
+        color: #4b5563;
+      }
+    `}
+  </style>
 </section>
 
       {/* Latest Release Section */}
-      <section className="py-16 bg-gradient-to-r from-indigo-100 to-indigo-200">
+<section className="py-16 bg-gradient-to-br from-indigo-50 to-white">
   <div className="container mx-auto px-4">
-          <h2 className="text-4xl font-extrabold text-center mb-12 text-[#6495ed]">
+    {/* Section Heading */}
-            🎉 Latest Release: <span className="text-indigo-600">Snigdha OS | Arctic V ❄️</span>
+    <h2 className="text-5xl font-extrabold text-center mb-8 text-indigo-600">
+      🎉 Latest Release: <span className="text-[#6495ed]">Snigdha OS | Arctic V ❄️</span>
     </h2>
+    <p className="text-xl text-gray-700 text-center mb-12 leading-relaxed">
+      Discover the latest features and improvements in <span className="text-indigo-600 font-medium">Snigdha OS</span>. 
+      Designed for speed, reliability, and a seamless user experience. 🚀
+    </p>
 
-          <div className="bg-white rounded-xl shadow-2xl overflow-hidden flex flex-col md:flex-row items-center transition-transform transform hover:scale-105 hover:shadow-2xl">
+    {/* Content Wrapper */}
-            <div className="md:w-1/2 mb-8 md:mb-0">
+    <div className="bg-white rounded-xl shadow-2xl overflow-hidden grid grid-cols-1 lg:grid-cols-2 items-center">
+      {/* Image Section */}
+      <div className="relative overflow-hidden">
         <img
           src="https://images.unsplash.com/photo-1629654297299-c8506221ca97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80"
           alt="Snigdha OS Desktop"
-                className="rounded-lg shadow-xl transform transition duration-500 ease-in-out hover:scale-105 hover:shadow-2xl"
+          className="rounded-lg shadow-xl transform transition duration-500 ease-in-out hover:scale-105 hover:shadow-2xl w-full"
         />
+        <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50 pointer-events-none"></div>
       </div>
 
-            <div className="md:w-1/2 md:pl-8 p-8 space-y-6">
+      {/* Features Section */}
-              <p className="text-lg text-gray-700 mb-6 leading-relaxed">
+      <div className="p-8 lg:p-12 space-y-6">
-                Snigdha OS | Arctic V brings performance enhancements, better hardware support, and a whole new visual refresh! Experience the best of both worlds: sleek design and robust functionality. 🚀
+        <p className="text-lg text-gray-600 mb-6 leading-relaxed">
+          Snigdha OS | Arctic V brings an enhanced user experience with optimized performance, modern visuals, and seamless hardware compatibility.
         </p>
 
         <div className="space-y-6">
           <Feature
             title="🌐 New GNOME 47.0"
-                  description="A fresh, faster, and more intuitive GNOME experience that simplifies navigation with improved responsiveness."
+            description="A faster, more intuitive GNOME experience with improved navigation and responsiveness."
           />
           <Feature
             title="🛠️ Updated Software Manager"
-                  description="Enjoy a cleaner, faster interface for package management with streamlined features."
+            description="Cleaner, faster package management with streamlined features for ease of use."
           />
           <Feature
             title="🔧 Improved Hardware Support"
-                  description="Snigdha OS ensures seamless compatibility with modern devices and hardware configurations for a smooth experience."
+            description="Enjoy seamless compatibility with modern hardware for a smoother experience."
           />
           <Feature
             title="⚡ Upgraded Kernel & Drivers"
-                  description="Experience better performance with the latest Linux 6.x Zen kernel and optimized drivers for your hardware."
+            description="Enhanced performance with Linux 6.x Zen kernel and updated drivers."
           />
           <Feature
             title="🔄 Timeshift Snapshots"
-                  description="Create and manage system snapshots to restore your system whenever needed, ensuring peace of mind."
+            description="Easily create and manage snapshots to ensure system stability."
           />
           <Feature
             title="🎨 New Theme Options"
-                  description="Customize your desktop with a refreshed collection of themes and dark mode improvements for a more personalized look."
+            description="Explore a refreshed set of themes and dark mode improvements for better customization."
           />
         </div>
 
-              <div className="flex mt-8 justify-center space-x-6">
+        {/* Call-to-Action Buttons */}
+        <div className="flex justify-center lg:justify-start mt-8 space-x-6">
           <Link
             to="/download"
             className="inline-flex items-center space-x-3 bg-[#6495ed] text-white px-8 py-4 rounded-xl shadow-lg hover:bg-indigo-700 transform transition-all duration-300 hover:scale-105"
@@ -209,7 +274,7 @@ export function Home() {
           </Link>
           <Link
             to="/changelog"
-                  className="inline-flex items-center space-x-2 bg-gray-200 text-[#6495ed] px-6 py-2 rounded-xl shadow-lg hover:bg-gray-300 transform transition-all duration-300 hover:scale-105"
+            className="inline-flex items-center space-x-3 bg-gray-200 text-indigo-600 px-6 py-3 rounded-xl shadow-lg hover:bg-gray-300 transform transition-all duration-300 hover:scale-105"
           >
             <ArrowRight className="h-5 w-5" />
             <span>View Changelog 📜</span>
@@ -223,51 +288,86 @@ export function Home() {
       {/* Why Choose Snigdha OS */}
 <section className="py-16 bg-white">
   <div className="container mx-auto px-4">
-          <h2 className="text-3xl font-bold text-center mb-12 text-[#6495ed]">Why Choose Snigdha OS? 🤔</h2>
+    <h2 className="text-3xl font-bold text-center mb-12 text-[#6495ed]">
+      Why Choose Snigdha OS? 🤔
+    </h2>
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
       <ReasonCard
-              icon={<Award className="h-10 w-10 text-yellow-500" />}
+        icon={
+          <div className="flex items-center justify-center h-16 w-16 mx-auto bg-yellow-100 rounded-full">
+            <Award className="h-10 w-10 text-yellow-500" />
+          </div>
+        }
         title="User-Friendly 😊"
         description="With its intuitive interface, Snigdha OS provides a seamless experience for beginners and experts alike."
       />
       <ReasonCard
-              icon={<Users className="h-10 w-10 text-blue-500" />}
+        icon={
+          <div className="flex items-center justify-center h-16 w-16 mx-auto bg-blue-100 rounded-full">
+            <Users className="h-10 w-10 text-blue-500" />
+          </div>
+        }
         title="Active Community 🗣️"
         description="Join a vibrant community where users collaborate, share solutions, and build knowledge together."
       />
       <ReasonCard
-              icon={<Coffee className="h-10 w-10 text-red-500" />}
+        icon={
+          <div className="flex items-center justify-center h-16 w-16 mx-auto bg-red-100 rounded-full">
+            <Coffee className="h-10 w-10 text-red-500" />
+          </div>
+        }
         title="Stable & Reliable 📊"
         description="Built on Ubuntu's LTS base, Snigdha OS ensures long-term stability and security updates."
       />
       <ReasonCard
-              icon={<Star className="h-10 w-10 text-[#6495ed]" />}
+        icon={
+          <div className="flex items-center justify-center h-16 w-16 mx-auto bg-[#6495ed]/20 rounded-full">
+            <Star className="h-10 w-10 text-[#6495ed]" />
+          </div>
+        }
         title="Lightweight ⚡"
         description="With optimized performance, Snigdha OS works well on both older and newer hardware."
       />
       <ReasonCard
-              icon={<Terminal className="h-10 w-10 text-green-500" />}
+        icon={
+          <div className="flex items-center justify-center h-16 w-16 mx-auto bg-green-100 rounded-full">
+            <Terminal className="h-10 w-10 text-green-500" />
+          </div>
+        }
         title="Customizable 🖌️"
         description="Snigdha OS offers extensive customization options, so you can tailor the OS to your exact needs."
       />
       <ReasonCard
-              icon={<Shield className="h-10 w-10 text-purple-500" />}
+        icon={
+          <div className="flex items-center justify-center h-16 w-16 mx-auto bg-purple-100 rounded-full">
+            <Shield className="h-10 w-10 text-purple-500" />
+          </div>
+        }
         title="Top-Notch Security 🛡️"
         description="Snigdha OS is built with a strong focus on security. Regular updates and patches ensure that your system is always safe."
       />
       <ReasonCard
-              icon={<Award className="h-10 w-10 text-orange-500" />}
+        icon={
+          <div className="flex items-center justify-center h-16 w-16 mx-auto bg-orange-100 rounded-full">
+            <Award className="h-10 w-10 text-orange-500" />
+          </div>
+        }
         title="Performance Focused 🚀"
         description="Snigdha OS is optimized to deliver high performance even on low-spec hardware, ensuring smooth operation."
       />
       <ReasonCard
-              icon={<Star className="h-10 w-10 text-yellow-500" />}
+        icon={
+          <div className="flex items-center justify-center h-16 w-16 mx-auto bg-yellow-100 rounded-full">
+            <Star className="h-10 w-10 text-yellow-500" />
+          </div>
+        }
         title="Frequent Updates 🔄"
         description="Get regular updates with the latest features, bug fixes, and security patches."
       />
     </div>
   </div>
 </section>
+
     </div>
   );
 }