Merge pull request #15 from arch-linux-gui/dev

Dev to Main push

Author: harshau007

app/JoinUs/JobCard.tsx

@@ -17,7 +17,7 @@ export default function JobCard({ id, title, location, skills }: JobCardProps) {
           {skills.map((skill, index) => (
             <span
               key={index}
-              className="m-1 px-3 py-1 bg-blue-100 text-blue-800 text-sm font-semibold rounded-full"
+              className="m-1 px-3 py-1 bg-orange-200 text-orange-800 text-sm font-semibold rounded-full"
             >
               {skill}
             </span>

app/JoinUs/[jobId]/jobContent.tsx

@@ -45,15 +45,15 @@ export default function JobContent({ jobId }) {
             {job.skills.map((skill, index) => (
               <span
                 key={index}
-                className="px-3 py-1 m-1 text-sm font-semibold text-blue-800 bg-blue-100 rounded-full"
+                className="px-3 py-1 m-1 text-sm font-semibold text-orange-800 bg-orange-100 rounded-full"
               >
                 {skill}
               </span>
             ))}
           </div>
           <button
             onClick={handleApplyClick}
-            className="inline-block mt-4 px-12 py-3 bg-[#6a45d1] font-bold text-white rounded-full hover:bg-[#7554d1] transition duration-300"
+            className="inline-block mt-4 px-12 py-3 bg-[#F97316] font-bold text-white rounded-full hover:bg-[#ec9a60] transition duration-300"
           >
             Apply
           </button>
@@ -111,7 +111,7 @@ export default function JobContent({ jobId }) {
               <a
                 href={`mailto:[email protected]?subject=Application%20For%20${job.title}%20Role`}
                 target="_blank"
-                className="text-[#6a45d1] underline hover:text-[#7554d1] transition duration-300"
+                className="text-[#F97316] underline hover:text-[#ec9a60] transition duration-300"
               >
                 [email protected]
               </a>{" "}

app/about/aboutus.tsx

@@ -75,7 +75,7 @@ const AboutPage = () => {
           <div className="flex-1 mb-12 lg:mb-0">
             <div className="flex justify-center items-center h-full">
               <Image
-                src="/alg-logo.png"
+                src="https://github.com/arch-linux-gui/artwork/blob/dev/logo.png?raw=true"
                 alt="Arka Linux GUI Logo"
                 width={400}
                 height={400}
@@ -132,7 +132,7 @@ const AboutPage = () => {
                 <div className="flex flex-col h-full justify-between">
                   <div>
                     <Image
-                      src={member.image || "/alg-logo.png"}
+                      src={member.image || "https://github.com/arch-linux-gui/artwork/blob/dev/logo.png?raw=true"}
                       alt={member.name}
                       width={150}
                       height={150}

app/donate/Donates.tsx

@@ -52,7 +52,7 @@ export default function EnhancedDonationPage() {
     <div className="container mx-auto px-4 py-32 max-w-4xl">
       <div className="flex items-center justify-center mb-8">
         <Image
-          src="/alg-logo.png"
+          src="https://github.com/arch-linux-gui/artwork/blob/dev/logo.png?raw=true"
           alt="Arka Linux GUI Logo"
           width={100}
           height={100}

app/downloads/Flavours.tsx

@@ -96,7 +96,7 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
 
   const toggleDropdown = () => setDropdownVisible(!dropdownVisible);
 
-  const isoLinks = isThemed ? themedIso[name] : pureIso[name];
+  const isoLinks = !isThemed ? themedIso[name] : pureIso[name];
 
   const contentSection = (
     <div className="flex flex-col justify-center p-3 rounded-lg md:p-6">
@@ -108,6 +108,7 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
           alt={title}
           width={500}
           height={300}
+          priority={true}
           className="mx-auto rounded-lg"
         />
       </div>
@@ -116,7 +117,7 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
         <button
           onClick={() => setIsThemed(!isThemed)}
           className={`${
-            !isThemed ? "bg-[#6a45d1]" : "bg-gray-400"
+            !isThemed ? "bg-[#F97316]" : "bg-gray-400"
           } w-14 h-8 rounded-full relative`}
         >
           <span
@@ -130,7 +131,7 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
       <div className="relative flex justify-center mt-6">
         <button
           onClick={toggleDropdown}
-          className="py-3 px-12 bg-[#6a45d1] text-white opacity-90 hover:opacity-100 rounded-full transition-all"
+          className="py-3 px-12 bg-[#F97316] text-white opacity-90 hover:opacity-100 rounded-full transition-all"
         >
           Download
         </button>
@@ -163,6 +164,7 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
         alt={title}
         width={900}
         height={800}
+        priority={true}
         className="mx-auto rounded-lg"
       />
     </div>
@@ -188,30 +190,33 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
 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">
-      <DesktopEnvironment
-        name="kde"
-        title="KDE Plasma"
-        description="The Plasma Themed Edition (also known as the Flagship) of Arka Linux GUI helps you install Vanilla Arch Linux with the KDE Plasma Desktop Environment. It is pre-configured and ready to use. It comes with all the necessary software and settings to help users get started quickly."
-        pureImage="/plasma-pure.png"
-        themedImage="/plasma.png"
-        isReversed={false}
-      />
-      <DesktopEnvironment
-        name="gnome"
-        title="GNOME"
-        description="The GNOME Edition of Arka Linux GUI helps you install Vanilla Arch Linux with the GNOME Desktop Environment. It is pre-configured and ready to use. It comes with all the necessary software and settings to help users get started quickly."
-        pureImage="/gnome-pure.png"
-        themedImage="/gnome.jpg"
-        isReversed={true}
-      />
-      <DesktopEnvironment
-        name="xfce"
-        title="XFCE"
-        description="The XFCE Edition of Arka Linux GUI helps you install Vanilla Arch Linux with the XFCE Desktop Environment. It is pre-configured and ready to use. It comes with all the necessary software and settings to help users get started quickly."
-        pureImage="/xfce-pure.png"
-        themedImage="/xfce.png"
-        isReversed={false}
-      />
+      {/* 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">
+        <DesktopEnvironment
+          name="kde"
+          title="KDE Plasma"
+          description="The Plasma Themed Edition (also known as the Flagship) of Arka Linux GUI helps you install Vanilla Arch Linux with the KDE Plasma Desktop Environment. It is pre-configured and ready to use. It comes with all the necessary software and settings to help users get started quickly."
+          pureImage="https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/themed/plasma.png?raw=true"
+          themedImage="https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/pure/plasma-pure.png?raw=true"
+          isReversed={false}
+        />
+        <DesktopEnvironment
+          name="gnome"
+          title="GNOME"
+          description="The GNOME Edition of Arka Linux GUI helps you install Vanilla Arch Linux with the GNOME Desktop Environment. It is pre-configured and ready to use. It comes with all the necessary software and settings to help users get started quickly."
+          pureImage="https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/themed/gnome.png?raw=true"
+          themedImage="https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/pure/gnome.png?raw=true"
+          isReversed={true}
+        />
+        <DesktopEnvironment
+          name="xfce"
+          title="XFCE"
+          description="The XFCE Edition of Arka Linux GUI helps you install Vanilla Arch Linux with the XFCE Desktop Environment. It is pre-configured and ready to use. It comes with all the necessary software and settings to help users get started quickly."
+          pureImage="https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/themed/xfce-themed.png?raw=true"
+          themedImage="https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/pure/xfce-pure.png?raw=true"
+          isReversed={false}
+        />
+      </div>
     </section>
   );
 }

app/globals.css

@@ -15,56 +15,106 @@ body {
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --foreground: 0 0% 14.902%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --card-foreground: 0 0% 14.902%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
+    --popover-foreground: 0 0% 14.902%;
+    --primary: 37.6923 92.126% 50.1961%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 220 14.2857% 95.8824%;
+    --secondary-foreground: 215 13.7931% 34.1176%;
+    --muted: 210 20% 98.0392%;
+    --muted-foreground: 220 8.9362% 46.0784%;
+    --accent: 48 100% 96.0784%;
+    --accent-foreground: 22.7273 82.5% 31.3725%;
+    --destructive: 0 84.2365% 60.1961%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 220 13.0435% 90.9804%;
+    --input: 220 13.0435% 90.9804%;
+    --ring: 37.6923 92.126% 50.1961%;
+    --chart-1: 37.6923 92.126% 50.1961%;
+    --chart-2: 32.1327 94.6188% 43.7255%;
+    --chart-3: 25.9649 90.4762% 37.0588%;
+    --chart-4: 22.7273 82.5% 31.3725%;
+    --chart-5: 21.7143 77.7778% 26.4706%;
+    --sidebar: 210 20% 98.0392%;
+    --sidebar-foreground: 0 0% 14.902%;
+    --sidebar-primary: 37.6923 92.126% 50.1961%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 48 100% 96.0784%;
+    --sidebar-accent-foreground: 22.7273 82.5% 31.3725%;
+    --sidebar-border: 220 13.0435% 90.9804%;
+    --sidebar-ring: 37.6923 92.126% 50.1961%;
+    --font-sans: Inter, sans-serif;
+    --font-serif: Source Serif 4, serif;
+    --font-mono: JetBrains Mono, monospace;
+    --radius: 0.7rem;
+    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+    --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+    --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
   }
+
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --background: 0 0% 9.0196%;
+    --foreground: 0 0% 89.8039%;
+    --card: 0 0% 14.902%;
+    --card-foreground: 0 0% 89.8039%;
+    --popover: 0 0% 14.902%;
+    --popover-foreground: 0 0% 89.8039%;
+    --primary: 37.6923 92.126% 50.1961%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 0 0% 14.902%;
+    --secondary-foreground: 0 0% 89.8039%;
+    --muted: 0 0% 14.902%;
+    --muted-foreground: 0 0% 63.9216%;
+    --accent: 22.7273 82.5% 31.3725%;
+    --accent-foreground: 48 96.6387% 76.6667%;
+    --destructive: 0 84.2365% 60.1961%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 25.098%;
+    --input: 0 0% 25.098%;
+    --ring: 37.6923 92.126% 50.1961%;
+    --chart-1: 43.2558 96.4126% 56.2745%;
+    --chart-2: 32.1327 94.6188% 43.7255%;
+    --chart-3: 22.7273 82.5% 31.3725%;
+    --chart-4: 25.9649 90.4762% 37.0588%;
+    --chart-5: 22.7273 82.5% 31.3725%;
+    --sidebar: 0 0% 5.8824%;
+    --sidebar-foreground: 0 0% 89.8039%;
+    --sidebar-primary: 37.6923 92.126% 50.1961%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 22.7273 82.5% 31.3725%;
+    --sidebar-accent-foreground: 48 96.6387% 76.6667%;
+    --sidebar-border: 0 0% 25.098%;
+    --sidebar-ring: 37.6923 92.126% 50.1961%;
+    --font-sans: Inter, sans-serif;
+    --font-serif: Source Serif 4, serif;
+    --font-mono: JetBrains Mono, monospace;
+    --radius: 0.7rem;
+    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+    --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+    --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
   }
 }
 
@@ -132,7 +182,7 @@ body {
 
 .loader {
   border: 8px solid #f3f3f3;
-  border-top: 5px solid #6a45d1;
+  border-top: 5px solid #d09031;
   border-radius: 50%;
   width: 50px;
   height: 50px;