Updated

Author: PrashantUnity

assets/css/tailwind-input.css

@@ -62,7 +62,11 @@
   }
 
   .home-hero__bg-layer {
-    @apply absolute inset-0 bg-cover bg-center bg-no-repeat transition-opacity duration-1000 ease-in-out;
+    @apply absolute inset-0 overflow-hidden transition-opacity duration-1000 ease-in-out;
+  }
+
+  .home-hero__bg-img {
+    @apply h-full w-full object-cover object-center;
   }
 
   .home-hero__overlay {
@@ -1064,6 +1068,10 @@
     @apply bg-white;
   }
 
+  .home-why__header {
+    @apply shrink-0;
+  }
+
   .home-why__eyebrow {
     @apply inline-block px-4 py-1.5 mb-6 text-sm font-medium text-slate-700 bg-white rounded-full border border-gray-200 shadow-sm;
   }
@@ -1073,7 +1081,11 @@
   }
 
   .home-why__intro {
-    @apply mx-auto mb-12 max-w-2xl text-lg leading-relaxed text-slate-500;
+    @apply mx-auto max-w-2xl text-lg leading-relaxed text-slate-500;
+  }
+
+  .home-why__grid {
+    @apply shrink-0;
   }
 
   .home-why__card {
@@ -1110,7 +1122,7 @@
   }
 
   .home-why__perk-text {
-    @apply min-w-0 flex-1;
+    @apply min-w-0 flex-1 text-sm leading-snug text-slate-600;
   }
 
   .home-faq-scroll {

content/_index.md

@@ -1,7 +1,7 @@
 ---
 title: "CodeFryDev"
 date: 2023-01-01T00:00:00Z
-description: "This is a platform where we learn, work on experimental projects, play games, come up with innovative ideas, and build many more..."
+description: "Free browser tools, games, and AI apps by CodeFryDev. No signup or install—JSON utilities, design lab, puzzles, and more. Open and use instantly."
 ---
 
 Homepage content is driven by `data/home.yaml` and `data/homepage.yaml`.

data/homepage.yaml

@@ -7,19 +7,19 @@ nav:
     secondaryTitle: "Hubs"
     hubs:
       - label: "Games"
-        url: "/games"
+        url: "/games/"
         icon: "game-controller"
       - label: "AI Tools"
-        url: "/ai"
+        url: "/ai/"
         icon: "robot"
       - label: "Design Lab"
-        url: "/designlab"
+        url: "/designlab/"
         icon: "palette"
       - label: "Store"
-        url: "/store"
+        url: "/store/"
         icon: "shopping-bag"
       - label: "Search all tools"
-        url: "/search"
+        url: "/search/"
         icon: "magnifying-glass"
 
 why:
@@ -46,37 +46,37 @@ why:
 
 hubBanners:
   games:
-    image: "https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=1600&q=80"
+    image: "/images/banners/games.jpg"
     title: "Games & Fun"
     description: "Puzzles, classics, and arcade games—play instantly in your browser."
   ai:
-    image: "https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=1600&q=80"
+    image: "/images/banners/ai.jpg"
     title: "AI Tools"
     description: "Meme generators, summarizers, chat, and more—no signup required."
   designlab:
-    image: "https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&w=1600&q=80"
+    image: "/images/banners/designlab.jpg"
     title: "Design Lab"
     description: "Creative design tools, visualizers, and resources for makers."
   store:
-    image: "https://images.unsplash.com/photo-1556745753-2903312f440c?auto=format&fit=crop&w=1600&q=80"
+    image: "/images/banners/store.jpg"
     title: "CodeFryDev Store"
     description: "Mobile apps and downloads on Google Play."
 
 categoryBanners:
   creative-assets:
-    image: "https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&w=1600&q=80"
+    image: "/images/banners/creative-assets.jpg"
     title: "Explore Creative & Assets"
     description: "Art tools, wallpapers, 3D models, and learning resources for makers."
   tools-utilities:
-    image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=1600&q=80"
+    image: "/images/banners/tools-utilities.jpg"
     title: "Tools & Utilities Collection"
     description: "Productivity apps, formatters, SEO tools, and dev utilities in your browser."
   games-fun:
-    image: "https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=1600&q=80"
+    image: "/images/banners/games-fun.jpg"
     title: "Games & Fun"
     description: "Wordle, Snake, Chain Reaction, and more—play instantly in your browser."
   site-links:
-    image: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1600&q=80"
+    image: "/images/banners/site-links.jpg"
     title: "Site & Resources"
     description: "About, updates, store, privacy, and external links."
 
@@ -85,13 +85,16 @@ hero:
   searchPlaceholder: "Search tools, games, AI apps..."
   autoplayMs: 6000
   slides:
-    - image: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=2850&q=80"
+    - image: "/images/hero/slide-1.jpg"
+      imageAlt: "Team collaborating on laptops"
       title: "Tools, games & AI in your browser"
       description: "This is a platform where we learn, work on experimental projects, play games, come up with innovative ideas, and build many more..."
-    - image: "https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=2850&q=80"
+    - image: "/images/hero/slide-2.jpg"
+      imageAlt: "Developers working together at a desk"
       title: "Build faster with CodeFryDev"
       description: "From JSON playgrounds to design lab resources—everything runs in your browser."
-    - image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=2852&q=80"
+    - image: "/images/hero/slide-3.jpg"
+      imageAlt: "Laptop showing code on a desk"
       title: "No install. Just open and use."
       description: "Explore creative assets, productivity tools, games, and AI helpers in one place."
 

hugo.toml

@@ -22,7 +22,7 @@ disableKinds = ["taxonomy", "term"]
   google_analytics_id = "G-VM01Q3R43D"
   microsoft_clarity_id = "mxr4hxioh4"
   # Add static/images/og-default.png (1200×630) for better social sharing; omit or leave empty to use logo
-  default_og_image = "images/og-default.png"
+  default_og_image = "images/og-default.jpg"
 
   [params.social]
     twitter = "codefrydev"

layouts/about-us/about-us.html

@@ -107,7 +107,7 @@ <h2 id="about-team-heading" class="about-heading m-0">Our team</h2>
         <li>
           <a href="{{ .RelPermalink }}" class="about-team-card no-underline group">
             <span class="about-team-card__avatar-wrap">
-              <img src="{{ .Params.listProfile_image }}" alt="" width="112" height="112" class="about-team-card__avatar" loading="lazy">
+              <img src="{{ .Params.listProfile_image }}" alt="{{ .Title }}" width="112" height="112" class="about-team-card__avatar" loading="lazy">
             </span>
             <span class="about-team-card__body">
               <span class="about-team-card__name">{{ .Title }}</span>

layouts/about/users/list.html

@@ -8,7 +8,7 @@ <h1 class="text-4xl font-bold text-slate-900 mb-3 m-0">{{ .Title }}</h1>
         {{- range sort .Pages "Weight" -}}
         <li>
           <a href="{{ .RelPermalink }}" class="bg-white border border-gray-100 rounded-2xl p-8 text-center hover:-translate-y-1 hover:shadow-md transition-all no-underline block group">
-            <img src="{{ .Params.listProfile_image }}" alt="" width="120" height="120" class="w-[120px] h-[120px] rounded-full object-cover border-4 border-gray-100 mx-auto mb-4 group-hover:border-blue-100 transition-colors" loading="lazy">
+            <img src="{{ .Params.listProfile_image }}" alt="{{ .Title }}" width="120" height="120" class="w-[120px] h-[120px] rounded-full object-cover border-4 border-gray-100 mx-auto mb-4 group-hover:border-blue-100 transition-colors" loading="lazy">
             <h2 class="text-xl font-bold text-slate-900 m-0 mb-2">{{ .Title }}</h2>
             <p class="text-sm text-slate-500 m-0 mb-4">{{ .Params.subtitle }}</p>
             <span class="inline-block text-xs font-semibold uppercase tracking-wide text-blue-600 bg-blue-50 px-3 py-1 rounded-full">View profile</span>

layouts/index.html

@@ -4,6 +4,7 @@
 <head>
   {{ partial "header.html" . }}
   {{ partial "home/head.html" . }}
+  <link rel="preload" as="image" href="/images/hero/slide-1.jpg" fetchpriority="high">
   <link rel="stylesheet" href="/css/ladybug.css">
 </head>
 <body class="home-page bg-gray-50/50 text-slate-800 font-sans antialiased">
@@ -18,7 +19,7 @@
     })();
   </script>
 
-  <main id="main-content" class="home-sections">
+  <main id="main-content" class="home-sections" tabindex="-1">
     {{ partial "home/hero.html" . }}
     {{- range hugo.Data.home.categories -}}
       {{ partial "home/category-section.html" (dict "category" . "Site" $.Site) }}
@@ -28,12 +29,13 @@
     {{ partial "home/marquee.html" . }}
     {{ partial "home/why.html" . }}
     {{ partial "home/faq.html" . }}
-    {{ partial "home/footer.html" . }}
   </main>
 
+  {{ partial "home/footer.html" . }}
   {{ partial "ladybug.html" . }}
   {{ partial "cookie-consent.html" . }}
   {{ partial "home/search-palette.html" . }}
+  <script src="/js/a11y.js" defer></script>
   <script src="/js/home-hero.js" defer></script>
   <script src="/js/home-nav.js" defer></script>
   <script src="/js/home-scroll.js" defer></script>