🚀 feat(_editions): add more

src/pages/Download.tsx

@@ -1,25 +1,25 @@
 import React from 'react';
-import { Download as DownloadIcon, Monitor, Server, HardDrive } from 'lucide-react';
+import { Download as DownloadIcon, Monitor, Server, HardDrive, Smartphone, Code } from 'lucide-react';
 
 export function DownloadPage() {
   return (
     <div className="py-12">
       <div className="container mx-auto px-4">
         {/* Hero Section */}
         <section className="text-center mb-16">
-          <h1 className="text-4xl font-bold mb-6">Download Linux Mint</h1>
+          <h1 className="text-4xl font-bold mb-6">Download Snigdha OS</h1>
           <p className="text-xl text-gray-600 max-w-3xl mx-auto">
             Choose the edition that best suits your needs. All versions are free to
             download and use.
           </p>
         </section>
 
         {/* Edition Cards */}
-        <section className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+        <section className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-8 mb-16">
           <EditionCard
-            title="Cinnamon Edition"
+            title="Gnome Edition"
             description="Modern, innovative features while being traditional and familiar."
-            icon={<Monitor className="h-12 w-12 text-green-600" />}
+            icon={<Monitor className="h-12 w-12 text-indigo-600" />}
             recommended={true}
           />
           <EditionCard
@@ -32,6 +32,31 @@ export function DownloadPage() {
             description="Lightweight and stable. Perfect for older computers."
             icon={<HardDrive className="h-12 w-12 text-purple-600" />}
           />
+          <EditionCard
+            title="KDE Plasma Edition"
+            description="Customizable and visually stunning, perfect for power users."
+            icon={<Code className="h-12 w-12 text-pink-600" />}
+          />
+          <EditionCard
+            title="Minimal Edition"
+            description="Barebones version for advanced users who prefer custom setups."
+            icon={<Code className="h-12 w-12 text-gray-600" />}
+          />
+          <EditionCard
+            title="ARM Edition"
+            description="Optimized for ARM-based devices like Raspberry Pi."
+            icon={<Smartphone className="h-12 w-12 text-teal-600" />}
+          />
+          <EditionCard
+            title="Education Edition"
+            description="Packed with educational tools for students and teachers."
+            icon={<Server className="h-12 w-12 text-orange-600" />}
+          />
+          <EditionCard
+            title="Gaming Edition"
+            description="Enhanced with gaming tools and pre-installed gaming libraries."
+            icon={<Monitor className="h-12 w-12 text-red-600" />}
+          />
         </section>
 
         {/* System Requirements */}
@@ -66,17 +91,17 @@ export function DownloadPage() {
             <MirrorButton
               region="North America"
               speed="Fast"
-              url="https://mirrors.kernel.org/linuxmint/"
+              url="#"
             />
             <MirrorButton
               region="Europe"
               speed="Very Fast"
-              url="https://mirror.23media.com/linuxmint/"
+              url="#"
             />
             <MirrorButton
               region="Asia"
               speed="Fast"
-              url="https://mirror.xtom.com.hk/linuxmint/"
+              url="#"
             />
           </div>
         </section>
@@ -97,17 +122,17 @@ function EditionCard({
   recommended?: boolean;
 }) {
   return (
-    <div className={`bg-white rounded-lg shadow-lg p-8 relative ${recommended ? 'border-2 border-green-500' : ''}`}>
+    <div className={`bg-white rounded-lg shadow-lg p-8 relative ${recommended ? 'border-2 border-indigo-500' : ''}`}>
       {recommended && (
-        <div className="absolute top-4 right-4 bg-green-500 text-white px-2 py-1 rounded-full text-sm">
+        <div className="absolute top-4 right-4 bg-indigo-500 text-white px-2 py-1 rounded-full text-sm">
           Recommended
         </div>
       )}
       <div className="flex justify-center mb-4">{icon}</div>
       <h3 className="text-xl font-bold mb-2 text-center">{title}</h3>
       <p className="text-gray-600 text-center mb-6">{description}</p>
       <div className="flex justify-center">
-        <button className="flex items-center space-x-2 bg-green-600 text-white px-6 py-2 rounded-full hover:bg-green-700 transition-colors">
+        <button className="flex items-center space-x-2 bg-indigo-600 text-white px-6 py-2 rounded-[5px] hover:bg-indigo-700 transition-colors">
           <DownloadIcon className="h-5 w-5" />
           <span>Download</span>
         </button>
@@ -135,8 +160,8 @@ function MirrorButton({
           <h3 className="font-bold">{region}</h3>
           <p className="text-sm text-gray-600">{speed}</p>
         </div>
-        <DownloadIcon className="h-5 w-5 text-green-600" />
+        <DownloadIcon className="h-5 w-5 text-indigo-600" />
       </div>
     </a>
   );
-}
+}