🚀 feat(_loc): it will fetch location according geoip

src/pages/Download.tsx

@@ -1,108 +1,129 @@
-import React from 'react';
-import { Download as DownloadIcon, Monitor, Server, HardDrive, Smartphone, Code } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import {
+  Download as DownloadIcon,
+  Monitor,
+  Server,
+  HardDrive,
+  Smartphone,
+  Code,
+} from 'lucide-react';
 
 export function DownloadPage() {
+  const [userLocation, setUserLocation] = useState<string | null>(null);
+
+  // Detect user location using a public API
+  useEffect(() => {
+    async function fetchLocation() {
+      try {
+        const response = await fetch('https://ipapi.co/json/');
+        const data = await response.json();
+        setUserLocation(`${data.city}, ${data.country}`);
+      } catch (error) {
+        console.error('Failed to fetch user location:', error);
+        setUserLocation(null);
+      }
+    }
+    fetchLocation();
+  }, []);
+
   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 Snigdha OS</h1>
+          <h1 className="text-4xl font-bold mb-6 text-indigo-600">
+            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.
+            Choose the edition that best suits your needs. All versions are free
+            to download and use, providing the best experience for developers,
+            students, and professionals alike.
           </p>
+          <div className="mt-8 space-y-6">
+            <div className="flex justify-center items-center space-x-4">
+              <FeatureBadge color="indigo" text="Lightweight & Fast" />
+              <FeatureBadge color="purple" text="Open Source & Free" />
+              <FeatureBadge color="green" text="Customizable & Secure" />
+            </div>
+            <p className="text-lg text-gray-700 max-w-4xl mx-auto">
+              Snigdha OS is designed to provide an unparalleled experience,
+              whether you're working on an older device or a high-end system.
+              Built with efficiency, reliability, and beauty in mind, it’s
+              perfect for home users, professionals, and enterprises. Download
+              today to unlock the full potential of your hardware.
+            </p>
+            <div className="mt-8">
+              <ActionButton
+                href="#"
+                color="indigo"
+                text="Explore Editions"
+              />
+              <ActionButton
+                href="#"
+                color="gray"
+                text="Read More"
+                className="ml-4"
+              />
+            </div>
+          </div>
         </section>
 
         {/* Edition Cards */}
-        <section className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-8 mb-16">
-          <EditionCard
-            title="Gnome Edition"
-            description="Modern, innovative features while being traditional and familiar."
-            icon={<Monitor className="h-12 w-12 text-indigo-600" />}
-            recommended={true}
-          />
-          <EditionCard
-            title="MATE Edition"
-            description="Traditional desktop experience, highly stable and reliable."
-            icon={<Server className="h-12 w-12 text-blue-600" />}
-          />
-          <EditionCard
-            title="Xfce Edition"
-            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 className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-16">
+          {editionData.map((edition, index) => (
+            <EditionCard key={index} {...edition} />
+          ))}
         </section>
 
         {/* System Requirements */}
         <section className="mb-16">
-          <h2 className="text-3xl font-bold mb-8">System Requirements</h2>
-          <div className="bg-white rounded-lg shadow-lg p-8">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-              <div>
-                <h3 className="text-xl font-bold mb-4">Minimum Requirements</h3>
-                <ul className="space-y-2">
-                  <li>2GB RAM (4GB recommended)</li>
-                  <li>20GB of disk space (100GB recommended)</li>
-                  <li>1024×768 resolution</li>
-                </ul>
-              </div>
-              <div>
-                <h3 className="text-xl font-bold mb-4">Recommended</h3>
-                <ul className="space-y-2">
-                  <li>4GB RAM or more</li>
-                  <li>100GB of disk space or more</li>
-                  <li>1920×1080 resolution or higher</li>
-                </ul>
-              </div>
+          <h2 className="text-3xl font-bold text-center mb-8 text-indigo-600">
+            System Requirements
+          </h2>
+          <div className="rounded-lg p-10 shadow-lg">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+              <SystemRequirements
+                title="Minimum Requirements"
+                specs={[
+                  '2GB RAM (4GB recommended)',
+                  '20GB of disk space (100GB recommended)',
+                  '1024×768 resolution',
+                ]}
+                notes="These are the minimum requirements to run Snigdha OS smoothly. For basic tasks such as web browsing, office applications, and media playback, this setup is sufficient."
+              />
+              <SystemRequirements
+                title="Recommended Requirements"
+                specs={[
+                  '4GB RAM or more',
+                  '100GB of disk space or more',
+                  '1920×1080 resolution or higher',
+                ]}
+                notes="These specifications provide an optimal experience, enabling smooth performance for multitasking, using modern applications, and running resource-intensive tasks like video editing or gaming."
+              />
             </div>
           </div>
         </section>
 
         {/* Download Mirrors */}
-        <section>
-          <h2 className="text-3xl font-bold mb-8">Download Mirrors</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <MirrorButton
-              region="North America"
-              speed="Fast"
-              url="#"
-            />
-            <MirrorButton
-              region="Europe"
-              speed="Very Fast"
-              url="#"
-            />
-            <MirrorButton
-              region="Asia"
-              speed="Fast"
-              url="#"
-            />
+        <section className="mb-16">
+          <h2 className="text-3xl font-bold text-center mb-8">
+            Download Mirrors
+          </h2>
+          <p className="text-lg text-gray-600 text-center mb-6 max-w-2xl mx-auto">
+            Select a mirror closest to your location for faster download speeds.{' '}
+            <br />
+            {userLocation ? (
+              <span className="text-gray-600 font-regular">
+                Your detected location: <span className="text-green-600 font-bold">{userLocation}</span>
+              </span>
+            ) : (
+              <span>Detecting your location...</span>
+            )}
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {mirrorData.map((mirror, index) => (
+              <MirrorButton key={index} {...mirror} />
+            ))}
           </div>
         </section>
       </div>
@@ -110,28 +131,86 @@ export function DownloadPage() {
   );
 }
 
+// Components
+function FeatureBadge({
+  color,
+  text,
+}: {
+  color: string;
+  text: string;
+}) {
+  return (
+    <span
+      className={`inline-block px-4 py-2 text-sm bg-${color}-600 text-white rounded-[5px] shadow-md`}
+    >
+      {text}
+    </span>
+  );
+}
+
+function ActionButton({
+  href,
+  text,
+  color,
+  className = '',
+}: {
+  href: string;
+  text: string;
+  color: string;
+  className?: string;
+}) {
+  return (
+    <a
+      href={href}
+      className={`px-6 py-3 bg-${color}-600 text-white text-lg font-semibold rounded-lg shadow-lg hover:bg-${color}-700 transition-colors ${className}`}
+    >
+      {text}
+    </a>
+  );
+}
+
 function EditionCard({
   title,
   description,
+  keyFeatures,
+  idealFor,
   icon,
-  recommended = false,
+  recommended,
 }: {
   title: string;
   description: string;
+  keyFeatures: string[];
+  idealFor: string;
   icon: React.ReactNode;
   recommended?: boolean;
 }) {
   return (
-    <div className={`bg-white rounded-lg shadow-lg p-8 relative ${recommended ? 'border-2 border-indigo-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-indigo-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-[5px] 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">
+      <p className="text-gray-600 text-center mb-4">{description}</p>
+      <div className="mb-4">
+        <h4 className="text-sm font-bold text-indigo-600">Key Features:</h4>
+        <ul className="list-disc list-inside text-gray-600 text-sm">
+          {keyFeatures.map((feature, index) => (
+            <li key={index}>{feature}</li>
+          ))}
+        </ul>
+      </div>
+      <div>
+        <h4 className="text-sm font-bold text-indigo-600">Ideal For:</h4>
+        <p className="text-gray-600 text-sm">{idealFor}</p>
+      </div>
+      <div className="flex justify-center mt-6">
         <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>
@@ -141,27 +220,171 @@ function EditionCard({
   );
 }
 
+function SystemRequirements({
+  title,
+  specs,
+  notes,
+}: {
+  title: string;
+  specs: string[];
+  notes: string;
+}) {
+  return (
+    <div className="bg-white rounded-lg p-6 shadow-xl hover:shadow-2xl transition-shadow">
+      <h3 className="text-xl font-bold text-indigo-600">{title}</h3>
+      <ul className="space-y-3 text-gray-700">
+        {specs.map((spec, index) => (
+          <li key={index}>{spec}</li>
+        ))}
+      </ul>
+      <p className="mt-4 text-gray-600 text-sm">{notes}</p>
+    </div>
+  );
+}
+
 function MirrorButton({
   region,
   speed,
+  host,
   url,
 }: {
   region: string;
   speed: string;
+  host: string;
   url: string;
 }) {
+  const speedColor = {
+    'Very Fast': 'text-green-500',
+    Fast: 'text-blue-500',
+    Moderate: 'text-orange-500',
+  }[speed];
+
   return (
     <a
       href={url}
-      className="block bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow"
+      className="block bg-white rounded-lg shadow hover:shadow-lg transition-shadow p-6 border border-gray-200"
     >
-      <div className="flex justify-between items-center">
-        <div>
-          <h3 className="font-bold">{region}</h3>
-          <p className="text-sm text-gray-600">{speed}</p>
+      <div className="flex flex-col space-y-3">
+        <div className="text-center">
+          <h3 className="text-xl font-bold">{region}</h3>
+          <p className="text-sm">{host}</p>
         </div>
-        <DownloadIcon className="h-5 w-5 text-indigo-600" />
+        <div className="text-center">
+          <span className={`font-semibold ${speedColor}`}>{speed}</span>
+        </div>
+        <button className="bg-indigo-600 text-white py-2 px-4 rounded-lg">
+          Download
+        </button>
       </div>
     </a>
   );
 }
+
+// Data
+const editionData = [
+  {
+    title: 'Gnome Edition',
+    description: 'Modern, innovative features while being traditional and familiar.',
+    keyFeatures: ['Dynamic Workspaces', 'Extensible Extensions', 'Built-in Accessibility'],
+    idealFor: 'General users who prefer a sleek and functional desktop experience.',
+    icon: <Monitor className="h-12 w-12 text-indigo-600" />,
+    recommended: true,
+  },
+  {
+    title: 'MATE Edition',
+    description: 'Traditional desktop experience, highly stable and reliable.',
+    keyFeatures: ['Low Resource Usage', 'Consistent Workflow', 'Legacy Support'],
+    idealFor: 'Users who value simplicity and reliability over modern features.',
+    icon: <Server className="h-12 w-12 text-blue-600" />,
+  },
+  {
+    title: 'Xfce Edition',
+    description: 'Lightweight and stable. Perfect for older computers.',
+    keyFeatures: ['Minimal Resource Usage', 'Fast Boot Times', 'Highly Customizable'],
+    idealFor: 'Users with older hardware or those who need maximum performance.',
+    icon: <HardDrive className="h-12 w-12 text-purple-600" />,
+  },
+  {
+    title: 'KDE Plasma Edition',
+    description: 'Customizable and visually stunning, perfect for power users.',
+    keyFeatures: ['Advanced Widgets', 'Custom Themes', 'Built-in Productivity Apps'],
+    idealFor: 'Tech enthusiasts and power users who love customization.',
+    icon: <Code className="h-12 w-12 text-pink-600" />,
+  },
+  {
+    title: 'Minimal Edition',
+    description: 'Barebones version for advanced users who prefer custom setups.',
+    keyFeatures: ['Minimal Preinstalled Apps', 'Manual Configuration', 'Highly Flexible'],
+    idealFor: 'Experienced users who want a clean slate to build their OS.',
+    icon: <Code className="h-12 w-12 text-gray-600" />,
+  },
+  {
+    title: 'ARM Edition',
+    description: 'Optimized for ARM-based devices like Raspberry Pi.',
+    keyFeatures: ['Optimized for ARM', 'Pre-configured Packages', 'Energy Efficient'],
+    idealFor: 'Raspberry Pi enthusiasts and developers working on ARM devices.',
+    icon: <Smartphone className="h-12 w-12 text-teal-600" />,
+  },
+  {
+    title: 'Education Edition',
+    description: 'Packed with educational tools for students and teachers.',
+    keyFeatures: ['Preloaded Educational Software', 'Child-friendly Interface', 'Classroom Tools'],
+    idealFor: 'Students, teachers, and educational institutions.',
+    icon: <Server className="h-12 w-12 text-orange-600" />,
+  },
+  {
+    title: 'Gaming Edition',
+    description: 'Enhanced with gaming tools and pre-installed gaming libraries.',
+    keyFeatures: ['Gaming Drivers', 'Pre-installed Steam', 'Optimized Performance'],
+    idealFor: 'Gamers who need a robust environment for PC gaming.',
+    icon: <Monitor className="h-12 w-12 text-red-600" />,
+  },
+];
+
+// const mirrorData = [
+//   {
+//     region: 'North America',
+//     speed: 'Fast',
+//     host: 'MirrorHost USA',
+//     url: '#',
+//   },
+//   // ... Add other mirrors similarly
+// ];
+const mirrorData = [
+  {
+    region: 'North America',
+    speed: 'Fast',
+    host: 'MirrorHost USA',
+    url: '#',
+  },
+  {
+    region: 'Europe',
+    speed: 'Very Fast',
+    host: 'EuroMirror DE',
+    url: '#',
+  },
+  {
+    region: 'Asia',
+    speed: 'Fast',
+    host: 'AsiaNet JP',
+    url: '#',
+  },
+  {
+    region: 'Australia',
+    speed: 'Moderate',
+    host: 'AusSpeed AU',
+    url: '#',
+  },
+  {
+    region: 'South America',
+    speed: 'Moderate',
+    host: 'LATAM Mirror BR',
+    url: '#',
+  },
+  {
+    region: 'Africa',
+    speed: 'Fast',
+    host: 'Afrinet ZA',
+    url: '#',
+  },
+];