cleanup

web/src/routes/index.tsx

@@ -9,11 +9,12 @@ import {
   CTABannerSection,
 } from "~/components/landing";
 
-const cut = "clamp(16px, 2.5vw, 40px)";
-
 export default function Home() {
   return (
-    <main class="relative overflow-hidden">
+    <main
+      class="relative overflow-hidden"
+      style="--cut: clamp(16px, 2.5vw, 40px)"
+    >
       <Title>ShieldAI — AI-Powered Identity Protection</Title>
 
       <div class="relative">
@@ -24,38 +25,40 @@ export default function Home() {
       </div>
 
       <div
+        class="bg-dot-grid"
         style={{
-          "clip-path": `polygon(0 var(--cut, ${cut}), 100% 0, 100% 100%, 0 100%)`,
+          "clip-path": "polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%)",
         }}
       >
         <HowItWorksSection />
       </div>
 
       <div
+        class="relative z-10 backdrop-blur-2xl bg-bg/40 py-8 -my-10"
         style={{
-          "clip-path": `polygon(0 0, 100% 0, 100% calc(100% - var(--cut, ${cut})), 0 100%)`,
+          "clip-path":
+            "polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%)",
         }}
       >
         <FeaturesGridSection />
       </div>
 
       <div
+        class="bg-dot-grid"
         style={{
-          "clip-path": `polygon(0 var(--cut, ${cut}), 100% 0, 100% 100%, 0 100%)`,
+          "clip-path": "polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%)",
         }}
       >
         <ForUsersSection />
       </div>
 
       <div
+        class="relative z-10 backdrop-blur-2xl bg-bg/40 pt-8 -mt-10"
         style={{
-          "clip-path": `polygon(0 0, 100% 0, 100% calc(100% - var(--cut, ${cut})), 0 100%)`,
+          "clip-path": "polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%)",
         }}
       >
         <WhyShieldAISection />
-      </div>
-
-      <div>
         <CTABannerSection />
       </div>
     </main>