Analytics

Author: PrashantUnity

assets/css/modern-dark-theme.css

@@ -640,22 +640,50 @@
   background: rgb(71 85 105);
 }
 
-/* —— Section nav dots —— */
-[data-theme="dark"] body.home-page .home-section-nav__dot {
-  background-color: rgb(71 85 105);
+/* —— Why us section —— */
+[data-theme="dark"] body.home-page .home-why {
+  background-color: rgb(15 23 42) !important;
 }
 
-[data-theme="dark"] body.home-page .home-section-nav__dot:hover {
-  background-color: rgb(148 163 184);
+[data-theme="dark"] body.home-page .home-why__eyebrow {
+  background-color: rgb(30 41 59) !important;
+  border-color: rgb(51 65 85) !important;
+  color: rgb(203 213 225) !important;
+  box-shadow: none;
 }
 
-[data-theme="dark"] body.home-page .home-section-nav__dot.is-active {
-  background-color: rgb(226 232 240);
+[data-theme="dark"] body.home-page .home-why__title,
+[data-theme="dark"] body.home-page .home-why__card-title {
+  color: rgb(241 245 249) !important;
+}
+
+[data-theme="dark"] body.home-page .home-why__intro,
+[data-theme="dark"] body.home-page .home-why__card-text {
+  color: rgb(148 163 184) !important;
+}
+
+[data-theme="dark"] body.home-page .home-why__card-text a {
+  color: rgb(125 211 252) !important;
+}
+
+[data-theme="dark"] body.home-page .home-why__card {
+  background-color: rgb(30 41 59) !important;
+  border-color: rgb(51 65 85) !important;
+}
+
+[data-theme="dark"] body.home-page .home-why__card:hover {
+  background-color: rgb(51 65 85 / 0.45) !important;
+  border-color: rgb(71 85 105) !important;
+}
+
+[data-theme="dark"] body.home-page .home-why__perk {
+  background-color: rgb(30 41 59) !important;
+  border-color: rgb(51 65 85) !important;
+  color: rgb(203 213 225) !important;
 }
 
-/* —— Why section bullet area —— */
-[data-theme="dark"] body.home-page #why .bg-gray-50\/80 {
-  background-color: rgb(30 41 59 / 0.8) !important;
+[data-theme="dark"] body.home-page .home-why__perk-icon {
+  color: rgb(52 211 153) !important;
 }
 
 /* —— Breadcrumbs —— */

assets/css/tailwind-input.css

@@ -23,23 +23,21 @@
     filter: invert(1) brightness(1.1);
   }
 
-  /* Gentle snap on homepage when a section is near the viewport (no forced wheel paging) */
+  /* Hero-only snap: gentle align when scrolling back to the top panel */
   @media (prefers-reduced-motion: no-preference) {
     html:has(body.home-page) {
       scroll-behavior: smooth;
       scroll-snap-type: y proximity;
     }
   }
 
-  .home-sections > section {
+  .home-sections > section#hero {
     scroll-snap-align: start;
     scroll-snap-stop: normal;
     scroll-margin-top: var(--home-nav-height, 73px);
   }
 
-  .home-sections > footer.site-footer {
-    scroll-snap-align: end;
-    scroll-snap-stop: normal;
+  .home-sections > section:not(#hero) {
     scroll-margin-top: var(--home-nav-height, 73px);
   }
 
@@ -1012,16 +1010,58 @@
     transition: opacity 0.4s ease;
   }
 
-  .home-section-nav__dot {
-    @apply w-2 h-2 rounded-full bg-slate-300 border-0 p-0 cursor-pointer transition-all duration-300;
+  /* Why us section (#why) */
+  .home-why {
+    @apply bg-white;
+  }
+
+  .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;
+  }
+
+  .home-why__title {
+    @apply text-4xl font-bold tracking-tight text-slate-900 mb-6 md:text-[44px];
+  }
+
+  .home-why__intro {
+    @apply mx-auto mb-12 max-w-2xl text-lg leading-relaxed text-slate-500;
+  }
+
+  .home-why__card {
+    @apply rounded-2xl border border-gray-100 bg-gray-50/80 p-6 text-left transition-colors md:p-8;
+    @apply hover:border-slate-200 hover:bg-white;
+  }
+
+  .home-why__card-icon {
+    @apply mb-3 block text-2xl leading-none;
+  }
+
+  .home-why__card-title {
+    @apply mb-2 text-lg font-bold text-slate-900;
+  }
+
+  .home-why__card-text {
+    @apply text-[14px] leading-relaxed text-slate-500;
+  }
+
+  .home-why__card-text a {
+    @apply font-medium text-brand no-underline hover:underline;
+  }
+
+  .home-why__perks {
+    @apply mx-auto mt-10 grid max-w-5xl grid-cols-1 gap-3 px-4 sm:grid-cols-2;
+  }
+
+  .home-why__perk {
+    @apply flex items-center gap-3 rounded-xl border border-gray-100 bg-slate-50/90 px-4 py-3.5 text-left text-sm leading-snug text-slate-600;
   }
 
-  .home-section-nav__dot:hover {
-    @apply bg-slate-500 scale-125;
+  .home-why__perk-icon {
+    @apply shrink-0 text-lg text-emerald-500;
   }
 
-  .home-section-nav__dot.is-active {
-    @apply bg-brand;
+  .home-why__perk-text {
+    @apply min-w-0 flex-1;
   }
 
   .home-faq-scroll {

layouts/index.html

@@ -8,7 +8,6 @@
 </head>
 <body class="home-page bg-gray-50/50 text-slate-800 font-sans antialiased">
   {{ partial "skip-link.html" . }}
-  {{ partial "home/section-nav.html" . }}
   {{ partial "home/nav.html" . }}
   <script>
     (function () {

layouts/partials/header.html

@@ -121,8 +121,8 @@
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#e5e9f4">
-<meta name="msapplication-TileColor" content="#e5e9f4">
-<meta name="theme-color" content="#e5e9f4">
+<meta name="msapplication-TileColor" content="#0f172a">
+<meta name="theme-color" content="#0f172a">
 
 {{- /* Language meta and hreflang (use $locale from top of head) */ -}}
 <meta name="language" content="{{ $locale }}">
@@ -134,15 +134,19 @@
 <link rel="stylesheet" href="/css/theme.css">
 <script>
 (function() {
-    const theme = localStorage.getItem('theme-preference') || 'light';
-    document.documentElement.setAttribute('data-theme', theme);
+  var theme = localStorage.getItem('theme-preference') || 'dark';
+  document.documentElement.setAttribute('data-theme', theme);
+  var meta = document.querySelector('meta[name="theme-color"]');
+  if (meta) meta.setAttribute('content', theme === 'dark' ? '#0f172a' : '#e5e9f4');
 })();
 </script>
 {{- else -}}
 <script>
 (function() {
-  var theme = localStorage.getItem('theme-preference') || 'light';
+  var theme = localStorage.getItem('theme-preference') || 'dark';
   document.documentElement.setAttribute('data-theme', theme);
+  var meta = document.querySelector('meta[name="theme-color"]');
+  if (meta) meta.setAttribute('content', theme === 'dark' ? '#0f172a' : '#e5e9f4');
 })();
 </script>
 {{- end -}}

layouts/partials/home/category-section.html

@@ -18,7 +18,7 @@
 {{- end -}}
 {{- $headingId := printf "category-heading-%s" $slug -}}
 
-<section id="{{ $slug }}" data-section-label="{{ $cat.name }}" class="snap-start min-h-screen flex flex-col justify-start bg-gray-50/50 relative py-16" aria-labelledby="{{ $headingId }}">
+<section id="{{ $slug }}" data-section-label="{{ $cat.name }}" class="min-h-0 flex flex-col justify-start bg-gray-50/50 relative py-12 md:py-16" aria-labelledby="{{ $headingId }}">
   <div class="max-w-7xl mx-auto px-4 w-full h-full flex flex-col min-h-0">
     <div class="flex items-center justify-between mb-6 md:mb-8 pb-4 border-b border-gray-200 shrink-0">
       <div>
@@ -33,9 +33,9 @@ <h3 class="text-xs font-bold tracking-widest text-slate-500 uppercase m-0">{{ $s
       </div>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 flex-1 min-h-0 content-center">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 flex-1 min-h-0 items-start md:content-center">
       {{- range $i, $item := $previewItems -}}
-      <div class="{{ if ge $i 3 }}hidden md:block{{ end }} min-h-0">
+      <div class="{{ if ge $i 6 }}hidden md:block{{ end }} min-h-0">
         {{ partial "home/tool-card.html" (dict "item" $item "defaultPhosphorIcon" $defaultIcon "categoryName" $cat.name "source" (printf "home_%s" $slug)) }}
       </div>
       {{- end -}}

layouts/partials/home/cta-coffee.html

@@ -1,6 +1,6 @@
 {{- $cta := hugo.Data.homepage.cta.coffee -}}
 {{- if $cta -}}
-<section id="support" data-section-label="Support" class="snap-start min-h-[70vh] flex flex-col justify-center bg-gray-50 text-center relative pt-24 pb-16" aria-labelledby="coffee-heading">
+<section id="support" data-section-label="Support" class="flex flex-col justify-center bg-gray-50 text-center relative pt-24 pb-16" aria-labelledby="coffee-heading">
   <div class="max-w-2xl mx-auto px-4 flex flex-col items-center w-full">
     <h2 id="coffee-heading" class="text-4xl md:text-5xl font-bold text-slate-900 mb-6 m-0">{{ $cta.title | default "Buy us a Coffee" }}</h2>
     <p class="text-lg text-slate-500 mb-10 m-0">{{ $cta.description }}</p>

layouts/partials/home/faq.html

@@ -1,5 +1,5 @@
 {{- if hugo.Data.faq.faqs -}}
-<section id="faq" data-section-label="FAQ" class="snap-start min-h-screen flex flex-col bg-gray-50/50 relative pt-24 pb-12 home-faq" aria-labelledby="faq-heading">
+<section id="faq" data-section-label="FAQ" class="flex flex-col bg-gray-50/50 relative pt-24 pb-12 home-faq" aria-labelledby="faq-heading">
   <div class="max-w-3xl mx-auto px-4 w-full h-full flex flex-col min-h-0">
     <div class="text-center mb-6 shrink-0">
       <span class="inline-block px-4 py-1.5 mb-4 text-sm font-medium text-slate-700 bg-white rounded-full border border-gray-200 shadow-sm">FAQ</span>

layouts/partials/home/footer.html

@@ -1,12 +1,11 @@
 {{- $totalTools := 0 -}}
 {{- range hugo.Data.home.categories }}{{ $totalTools = add $totalTools (len .items) }}{{ end -}}
 
-{{- $snap := .Scratch.Get "homeFooterSnap" | default true -}}
 <footer
   id="footer"
   data-section-label="Footer"
-  class="site-footer {{ if $snap }}snap-start {{ end }}"
-  data-footer-home="{{ if $snap }}true{{ else }}false{{ end }}"
+  class="site-footer"
+  data-footer-home="true"
 >
   <div class="site-footer__inner">
     <div class="site-footer__mast">
@@ -66,7 +65,7 @@
       </details>
     </nav>
 
-    {{- if $snap -}}
+    {{- if .IsHome -}}
     <button type="button" class="site-footer__back-top" data-footer-back-top hidden>
       Back to top
       <i class="ph-bold ph-arrow-up" aria-hidden="true"></i>

layouts/partials/home/marquee.html

@@ -1,6 +1,6 @@
 {{- $marquee := hugo.Data.homepage.marquee -}}
 {{- if and $marquee $marquee.enabled $marquee.items -}}
-<section id="partners" data-section-label="Partners" class="snap-start py-12 border-t border-gray-200 bg-white overflow-hidden relative group" aria-label="{{ $marquee.label | default "Partners" }}">
+<section id="partners" data-section-label="Partners" class="py-12 border-t border-gray-200 bg-white overflow-hidden relative group" aria-label="{{ $marquee.label | default "Partners" }}">
   <div class="text-center mb-8">
     <p class="text-sm font-semibold tracking-widest text-slate-400 uppercase m-0">{{ $marquee.label }}</p>
   </div>

layouts/partials/home/modern-page-end.html

@@ -13,7 +13,6 @@
       {{ partial "home/breadcrumbs.html" $bc }}
     </div>
     {{- end -}}
-    {{- $page.Scratch.Set "homeFooterSnap" false -}}
     {{ partial "home/footer.html" $page }}
   </main>
   {{ partial "cookie-consent.html" $page }}