Website fixes for December 2025

.github/workflows/build.yml

@@ -0,0 +1,31 @@
+name: Build ALG Website
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build project
+        run: npm run build

app/downloads/Flavours.tsx

@@ -1,57 +1,9 @@
 "use client";
 
 import Image from "next/image";
-import React, { useEffect, useRef, useState } from "react";
-
-interface IsoLinks {
-  sourceforge: string;
-  // torrent: string;
-}
-
-interface IsoData {
-  kde: IsoLinks;
-  gnome: IsoLinks;
-  xfce: IsoLinks;
-}
-
-// const pureIso: IsoData = {
-//   kde: {
-//     sourceforge:
-//       "https://sourceforge.net/projects/arch-linux-gui/files/archlinux-gui-plasma-pure-2022.07-x86_64.iso/download",
-//     osdn: "https://osdn.net/dl/arch-linux-gui/archlinux-gui-plasma-pure-2022.07-x86_64.iso",
-//     torrent: "https://some-torrent-link/kde-pure.torrent",
-//   },
-//   gnome: {
-//     sourceforge:
-//       "https://sourceforge.net/projects/arch-linux-gui/files/archlinux-gui-gnome-pure-2022.07-x86_64.iso/download",
-//     osdn: "https://osdn.net/dl/arch-linux-gui/archlinux-gui-gnome-pure-2022.07-x86_64.iso",
-//     torrent: "https://some-torrent-link/gnome-pure.torrent",
-//   },
-//   xfce: {
-//     sourceforge:
-//       "https://sourceforge.net/projects/arch-linux-gui/files/archlinux-gui-xfce-pure-2022.07-x86_64.iso/download",
-//     osdn: "https://osdn.net/dl/arch-linux-gui/archlinux-gui-xfce-pure-2022.07-x86_64.iso",
-//     torrent: "https://some-torrent-link/xfce-pure.torrent",
-//   },
-// };
-
-const themedIso: IsoData = {
-  kde: {
-    sourceforge:
-      "https://sourceforge.net/projects/arch-linux-gui/files/alg-plasma-2025.10-x86_64.iso/download",
-    // torrent: "https://some-torrent-link/kde-themed.torrent",
-  },
-  gnome: {
-    sourceforge:
-      "https://sourceforge.net/projects/arch-linux-gui/files/alg-gnome-2025.10-x86_64.iso/download",
-    // torrent: "https://some-torrent-link/gnome-themed.torrent",
-  },
-  xfce: {
-    sourceforge:
-      "https://sourceforge.net/projects/arch-linux-gui/files/alg-xfce-2025.10-x86_64.iso/download",
-    // torrent: "https://some-torrent-link/xfce-themed.torrent",
-  },
-};
+import React, { useState } from "react";
+import { Copy, Check, Shield } from "lucide-react";
+import { themedIso } from '@/lib/Isodata'
 
 interface DesktopEnvironmentProps {
   name: "kde" | "gnome" | "xfce";
@@ -62,6 +14,51 @@ interface DesktopEnvironmentProps {
   isReversed?: boolean;
 }
 
+// Checksum Component
+const ChecksumDisplay: React.FC<{ checksum: string }> = ({ checksum }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(checksum);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+
+  return (
+    <div className="mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-600">
+      <div className="flex items-center gap-2 mb-2">
+        <Shield className="w-4 h-4 text-orange-600 dark:text-orange-400" />
+        <span className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+          SHA1 Checksum
+        </span>
+      </div>
+      <div className="flex items-center gap-2">
+        <code className="flex-1 text-xs bg-white dark:bg-gray-900 px-3 py-2 rounded border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 font-mono break-all">
+          {checksum}
+        </code>
+        <button
+          onClick={handleCopy}
+          className="flex-shrink-0 p-2 bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-500 text-white rounded transition-all duration-200"
+          title={copied ? "Copied!" : "Copy to clipboard"}
+        >
+          {copied ? (
+            <Check className="w-4 h-4" />
+          ) : (
+            <Copy className="w-4 h-4" />
+          )}
+        </button>
+      </div>
+      <p className="mt-2 text-xs text-gray-600 dark:text-gray-400">
+        Verify your download using this checksum
+      </p>
+    </div>
+  );
+};
+
 const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
   name,
   title,
@@ -71,107 +68,94 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
   isReversed,
 }) => {
   // Default to Themed variant for visuals and downloads
-  const [dropdownVisible, setDropdownVisible] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setDropdownVisible(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  const toggleDropdown = () => setDropdownVisible(!dropdownVisible);
-
   const isoLinks = themedIso[name];
 
   const contentSection = (
-    <div className="flex flex-col justify-center p-3 rounded-lg md:p-6">
-      <h2 className="mb-4 text-3xl font-bold md:text-5xl">{title}</h2>
-      <p className="mb-4 leading-relaxed md:text-lg">{description}</p>
-      <div className="flex items-center text-center rounded-lg md:hidden">
-        <Image
-          src={themedImage}
-          alt={title}
-          width={500}
-          height={300}
-          priority={true}
-          className="mx-auto rounded-lg"
-        />
+    <div className="flex flex-col justify-center p-6 md:p-8">
+      <h2 className="mb-4 text-3xl font-bold md:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-orange-700 dark:from-orange-400 dark:to-orange-300">
+        {title}
+      </h2>
+      <p className="mb-6 leading-relaxed text-gray-700 dark:text-gray-300 md:text-lg">
+        {description}
+      </p>
+      <div className="flex items-center text-center rounded-xl md:hidden mb-6">
+        <div className="relative w-full rounded-xl overflow-hidden border-2 border-orange-200 dark:border-orange-800/50 shadow-lg">
+          <Image
+            src={themedImage}
+            alt={title}
+            width={500}
+            height={300}
+            priority={true}
+            className="mx-auto"
+          />
+        </div>
       </div>
-      <div className="relative flex justify-center mt-6">
-        <button
-          onClick={toggleDropdown}
-          className="py-3 px-12 bg-[#F97316] text-white opacity-90 hover:opacity-100 rounded-full transition-all"
+      <div className="flex flex-col items-center mt-6">
+        <a
+          href={isoLinks.sourceforge}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="py-3 px-12 bg-orange-500 text-white hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-500 rounded-full transition-all duration-300 hover:scale-105 shadow-lg inline-block font-semibold"
         >
           Download
-        </button>
-        {dropdownVisible && (
-          <div
-            className="absolute mt-2 rounded shadow-lg top-full bg-white"
-            ref={dropdownRef}
-          >
-            {Object.entries(isoLinks).map(([key, value]) => (
-              <a
-                key={key}
-                href={value}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="block px-4 py-2 text-black hover:bg-gray-200"
-              >
-                {key.charAt(0).toUpperCase() + key.slice(1)}
-              </a>
-            ))}
-          </div>
-        )}
+        </a>
+        <div className="w-full max-w-md mt-4">
+          <ChecksumDisplay checksum={isoLinks.checksum} />
+        </div>
       </div>
     </div>
   );
 
   const imageSection = (
-    <div className="items-center hidden p-6 text-center rounded-lg md:flex">
-      <Image
-        src={themedImage}
-        alt={title}
-        width={900}
-        height={800}
-        priority={true}
-        className="mx-auto rounded-lg"
-      />
+    <div className="items-center hidden p-6 md:p-8 text-center md:flex">
+      <div className="relative w-full rounded-xl overflow-hidden border-2 border-orange-200 dark:border-orange-800/50 shadow-2xl hover:shadow-orange-300/50 dark:hover:shadow-orange-900/50 transition-shadow duration-300">
+        <Image
+          src={themedImage}
+          alt={title}
+          width={900}
+          height={800}
+          priority={true}
+          className="mx-auto"
+        />
+      </div>
     </div>
   );
 
   return (
-    <div className="grid grid-cols-1 gap-6 mb-12 md:grid-cols-2">
-      {isReversed ? (
-        <>
-          {imageSection}
-          {contentSection}
-        </>
-      ) : (
-        <>
-          {contentSection}
-          {imageSection}
-        </>
-      )}
+    <div className="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-orange-200/50 dark:border-orange-800/50 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
+      <div className="grid grid-cols-1 gap-0 md:grid-cols-2">
+        {isReversed ? (
+          <>
+            {imageSection}
+            {contentSection}
+          </>
+        ) : (
+          <>
+            {contentSection}
+            {imageSection}
+          </>
+        )}
+      </div>
     </div>
   );
 };
 
 export default function Flavours() {
   return (
-    <section className="bg-gradient-to-br from-orange-50 to-orange-100 dark:from-[#0b0b10] dark:to-[#09090B] pt-4 md:pt-0 px-4 sm:px-12 md:px-20 md:pb-12 lg:px-28">
-      {/* Don't know why now its working correctly but when pureImage & themedImage places are changed it works inversely, need to fix! */}
-      <div className="flex flex-col space-y-6">
+    <section className="relative bg-gradient-to-br from-orange-50 to-orange-100 dark:from-[#0b0b10] dark:to-[#09090B] pt-4 md:pt-0 px-4 sm:px-12 md:px-20 md:pb-12 lg:px-28 overflow-hidden">
+      {/* Dot Grid Pattern */}
+      <div className="absolute inset-0 z-0">
+        <svg className="absolute inset-0 w-full h-full" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <pattern id="dotPatternFlavours" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
+              <circle cx="2" cy="2" r="1.5" fill="rgba(249,115,22,0.1)" />
+            </pattern>
+          </defs>
+          <rect width="100%" height="100%" fill="url(#dotPatternFlavours)" />
+        </svg>
+      </div>
+
+      <div className="flex flex-col space-y-8 relative z-10">
         <DesktopEnvironment
           name="kde"
           title="ALG Plasma"

app/downloads/Requirements.tsx

@@ -4,12 +4,12 @@ export default function Requirements() {
   return (
     <section className="bg-gradient-to-br from-orange-50 to-orange-100 dark:from-[#0b0b10] dark:to-[#09090B] px-6 pt-36 sm:px-12 md:px-20 md:pb-12 lg:px-28">
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-        <div className="bg-[#FFFFFF] p-6 rounded-lg">
-          <h2 className="mb-4 text-2xl font-bold text-black md:text-3xl">
+        <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-orange-200 dark:border-orange-800/50">
+          <h2 className="mb-4 text-2xl font-bold text-gray-800 dark:text-gray-100 md:text-3xl">
             Requirements
           </h2>
-          <p className="mb-1 font-semibold text-gray-600">Minimum:</p>
-          <ul className="mb-4 text-gray-600 list-disc list-inside">
+          <p className="mb-1 font-semibold text-orange-700 dark:text-orange-400">Minimum:</p>
+          <ul className="mb-4 text-gray-700 dark:text-gray-300 list-disc list-inside">
             <li>
               64 bit x86_64 processor (Intel/AMD), with at least 2 CPU cores.
               (32-bit not supported)
@@ -22,10 +22,10 @@ export default function Requirements() {
               motherboard.
             </li>
           </ul>
-          <p className="mb-1 font-semibold text-gray-600">
+          <p className="mb-1 font-semibold text-orange-700 dark:text-orange-400">
             Recommended (Themed Edition):
           </p>
-          <ul className="text-gray-600 list-disc list-inside">
+          <ul className="text-gray-700 dark:text-gray-300 list-disc list-inside">
             <li>
               64 bit x86_64 processor (Intel/AMD), with at least 4 CPU cores.
               (32-bit not supported)
@@ -36,15 +36,15 @@ export default function Requirements() {
             <li>WiFi and Ethernet Card.</li>
           </ul>
         </div>
-        <div className="bg-[#9c89d1] p-6 rounded-lg">
-          <h2 className="mb-4 text-2xl font-bold md:text-3xl">
+        <div className="bg-gradient-to-br from-orange-500 to-orange-600 dark:from-orange-600 dark:to-orange-700 p-6 rounded-lg shadow-lg">
+          <h2 className="mb-4 text-2xl font-bold text-white md:text-3xl">
             Installation Instructions
           </h2>
           <h2 className="mb-1 font-semibold text-white">Make Bootable USB:</h2>
-          <ul className="mb-4 text-white list-disc list-inside">
+          <ul className="mb-4 text-white/95 list-disc list-inside">
             <li>
               To create a bootable USB. You can follow the step-by-step guides on
-              the <Link href="/tutorials" className="underline underline-offset-2 font-semibold text-white">Tutorials page</Link>.
+              the <Link href="/tutorials" className="underline underline-offset-2 font-bold text-white hover:text-orange-100">Tutorials page</Link>.
             </li>
           <h2 className="mb-1 font-semibold text-white">Getting Started with ALG installation:</h2>
             <li>

app/page.tsx

@@ -1,7 +1,6 @@
 import Hero from "@/components/Hero";
-import Testi from "@/components/Testi";
-import WhatsNew from "@/components/WhatsNew";
-import { Gallery } from "@/components/gallery";
+import { WhyALGSection, FeaturesDeepDiveSection } from "@/components/WhatsNew";
+import { Gallery, GetStartedSection } from "@/components/gallery";
 
 export const metadata = {
   title: "Arka Linux GUI",
@@ -12,9 +11,10 @@ export default function Home() {
   return (
     <main className="relative overflow-x-hidden">
       <Hero />
-      <WhatsNew />
+      <WhyALGSection />
+      <FeaturesDeepDiveSection />
       <Gallery />
-      <Testi />
+      <GetStartedSection />
     </main>
   );
 }