Feat/UI overhaul

.github/workflows/CD.yml

@@ -7,11 +7,6 @@ on:
 
   workflow_dispatch:
 
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
 concurrency:
   group: "pages"
   cancel-in-progress: false
@@ -52,7 +47,12 @@ jobs:
     runs-on: ubuntu-latest
     needs: build
 
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4

README.md

@@ -171,8 +171,7 @@ Here is a breakdown of the key i18n directories and files:
 │   │   ├── SocialMediaCTA.tsx
 │   │   ├── ThemeToggle.tsx
 │   │   └── providers/
-│   │       ├── lenis-provider.tsx
-│   │       └── theme-provider.tsx
+│   │       └── lenis-provider.tsx
 │   │   └── ui/
 │   │       ├── Navbar.tsx
 │   │       └── button.tsx
@@ -191,7 +190,6 @@ Here is a breakdown of the key i18n directories and files:
 │   │   └── hi.json
 │   └── proxy.ts
 ├── tsconfig.json
-├── eslint.config.mjs
 └── .gitignore
 
 ```
@@ -380,7 +378,7 @@ This compiles optimized static pages under the `/[locale]` path and checks all T
 
 ### Running in Production
 
-Start the optimized server:
+Start the optimized server(This is optional if you are deploying to a static hosting service like GitHub Pages):
 
 ```bash
 npm run start

Tasks.md

@@ -10,7 +10,7 @@ In the checklist below, mark the items that have been completed for your project
    - [x] Has proper open graph metadata, to ensure that it is shown well when shared in social media.
    - [x] Has a footer and header with AOSSIE logos and social handles.
    - [x] Uses Next.js Server Components by default with Client Components (`"use client"`) introduced only where interactive state is required.
-   - [x] Is deployed to GitHub Pages via a GitHub Workflow (`.github/workflows/nextjs.yml`).
+   - [x] Is deployed to GitHub Pages via a GitHub Workflow (`.github/workflows/CD.yml`).
    - [x] Has automated CI build and lint validation (`.github/workflows/ci.yml`).
    - [x] Has CodeRabbit automated AI code review (`.coderabbit.yml`).
    - [x] Has open-source legal compliance (`DCO.md`, `COPYRIGHT.md`, `Contributors.md`).

src/components/Download.tsx

@@ -77,7 +77,7 @@ function DownloadButton({ value }: DownloadButtonProps) {
       disabled={loading}
       onClick={() => {
         if (link) {
-          window.open(link, "_blank");
+          window.open(link, "_blank", "noopener,noreferrer");
         }
       }}
       className="h-9 px-3 rounded-lg flex items-center gap-2 text-sm font-medium transition"

src/components/MockUp.tsx

@@ -1,4 +1,4 @@
-import Image, { StaticImageData } from "next/image";
+import Image, { type StaticImageData } from "next/image";
 import { FaApple } from "react-icons/fa";
 import { FaWifi } from "react-icons/fa6";
 import { IoBatteryFullOutline } from "react-icons/io5";

src/components/ShuffleGrid.tsx

@@ -22,7 +22,7 @@ const shuffle = (array: (typeof squareData)[0][]) => {
 
 
 const ShuffleGrid = () => {
-  const timeoutRef = useRef<any>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [squares, setSquares] = useState(squareData);
   useEffect(() => {
     const shuffleSquares = () => {
@@ -32,7 +32,11 @@ const ShuffleGrid = () => {
 
     shuffleSquares();
 
-    return () => clearTimeout(timeoutRef.current);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
   }, []);
 
   return (

src/components/SocialMediaCTA.tsx

@@ -76,6 +76,7 @@ export default function SocialMediaCTA() {
             </p>
 
             <button
+              type="button"
               className="inline-flex w-fit items-center gap-2 text-[14px] font-medium text-black dark:text-white transition-all hover:gap-3"
               onClick={() => {
                 window.open(card.link, "_blank", "noopener,noreferrer");

src/components/ui/Navbar.tsx

@@ -9,7 +9,7 @@ import React, {
 import { Button } from "@/components/ui/button";
 import { ThemeContext, ThemeOptions } from "@/context/theme-provider";
 import { FiMenu, FiMoon, FiSun, FiX } from "react-icons/fi";
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
 import PictoPyLogo from "@/assets/pictopy_logo.svg";
 import { platformConfig } from "@/const/const";
 import { usePlatform } from "@/hooks/usePlatform";
@@ -128,6 +128,7 @@ const Navbar: React.FC = () => {
           size="icon"
           className="min-[1000px]:hidden rounded-lg"
           onMouseEnter={() => setSidebarOpen(true)}
+          onClick={() => setSidebarOpen(true)}
         >
           <FiMenu size={24} />
         </Button>
@@ -185,7 +186,7 @@ function MobileSidebar({ sidebarOpen, setSidebarOpen }: MobileSidebarProps) {
   return (
     <>
       {/* Overlay */}
-      <div
+      <button
         className={`fixed bg-bg z-40 transition-opacity duration-300 min-[1000px]:hidden ${
           sidebarOpen
             ? "opacity-100 pointer-events-auto"

src/context/theme-provider.tsx

@@ -16,21 +16,30 @@ export const ThemeContext = React.createContext<ThemeContextStructure>({
   toggleTheme: () => {},
 });
 
-function getInitialTheme(): ThemeOptions {
-  if (typeof window === "undefined") return ThemeOptions.Light;
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<ThemeOptions>(ThemeOptions.Light);
 
-  const storedTheme = localStorage.getItem("theme");
+  useEffect(() => {
+    const storedTheme = localStorage.getItem("theme");
 
-  if (storedTheme === "dark") return ThemeOptions.Dark;
-  if (storedTheme === "light") return ThemeOptions.Light;
+    let resolvedTheme: ThemeOptions;
 
-  return window.matchMedia("(prefers-color-scheme: dark)").matches
-    ? ThemeOptions.Dark
-    : ThemeOptions.Light;
-}
+    if (storedTheme === "dark") {
+      resolvedTheme = ThemeOptions.Dark;
+    } else if (storedTheme === "light") {
+      resolvedTheme = ThemeOptions.Light;
+    } else {
+      resolvedTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? ThemeOptions.Dark
+        : ThemeOptions.Light;
+    }
 
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setTheme] = useState(getInitialTheme);
+    const setThemeForState = (theme: ThemeOptions) => {
+      setTheme(theme);
+    };
+
+    setThemeForState(resolvedTheme);
+  }, []);
 
   useEffect(() => {
     const root = document.documentElement;
@@ -46,7 +55,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
   const toggleTheme = () => {
     setTheme((prev) =>
-      prev === ThemeOptions.Dark ? ThemeOptions.Light : ThemeOptions.Dark
+      prev === ThemeOptions.Dark ? ThemeOptions.Light : ThemeOptions.Dark,
     );
   };
 
@@ -55,4 +64,4 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
       {children}
     </ThemeContext.Provider>
   );
-}
+}

src/hooks/usePlatform.ts

@@ -7,14 +7,14 @@ export function usePlatform() {
   return useMemo(() => {
     const ua = navigator.userAgent.toLowerCase();
 
-    const isMobile =
-      /android|iphone|ipad|ipod|mobile/i.test(ua);
+    const isMobile = /android|iphone|ipad|ipod|mobile/i.test(ua);
 
     let platform: Platform = "linux";
-
+
+    if (!ua) platform = "windows";
     if (ua.includes("mac")) platform = "mac";
     else if (ua.includes("win")) platform = "windows";
 
     return { platform, isMobile };
   }, []);
-}
+}

src/messages/hi.json

@@ -15,7 +15,7 @@
       "featureBadge": "नई सुविधा: AI टैगिंग",
       "downloadNow": "अभी डाउनलोड करें",
 
-      "heroTitle": "सबसे उन्नत ओपन-सोर्स गैलरी",
+      "heroTitle": "सबसे उन्नत",
       "heroSubtitle": "ओपन-सोर्स गैलरी",
       "heroDescription": "स्मार्ट गैलरी प्रबंधन। उन्नत AI आपकी तस्वीरों का स्थानीय रूप से विश्लेषण और व्यवस्थित करता है, जिससे आपकी सभी फाइलें सुरक्षित और आपके नियंत्रण में रहती हैं।"
     },