New homepage

apps/web/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@next/third-parties": "^15.1.7",
     "@t3-oss/env-nextjs": "^0.11.1",
+    "@tailwindcss/postcss": "^4.0.13",
     "@trigger.dev/sdk": "^3.3.15",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -37,8 +38,8 @@
     "@types/node": "^22.13.2",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
-    "postcss": "^8.5.2",
-    "tailwindcss": "^3.4.17",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.0.13",
     "typescript": "^5.7.3"
   }
 }

apps/web/postcss.config.mjs

@@ -1,8 +1,6 @@
-/** @type {import('postcss-load-config').Config} */
 const config = {
-  plugins: {
-    tailwindcss: {},
-  },
+	plugins: {
+		"@tailwindcss/postcss": {},
+	},
 };
-
 export default config;

apps/web/src/app/(home)/page.tsx

@@ -1,41 +1,20 @@
-import { WaitlistForm } from "@/app/components/waitlist-form";
-import Balancer from "react-wrap-balancer";
-import WhyUs from "../components/why-us";
-import OurSolution from "../components/our-solution";
-import HowItWorks from "../components/how-it-works";
-import CTA from "../components/cta";
+import { HeroSection } from "@/app/components/(homepage)/home-hero";
+import { Section2 } from "@/app/components/(homepage)/section-2";
+import { Section3 } from "@/app/components/(homepage)/section-3";
+import { Section4 } from "@/app/components/(homepage)/section-4";
+import { Section5 } from "@/app/components/(homepage)/section-5";
+import { Section6 } from "@/app/components/(homepage)/section-6";
+import { Section7 } from "@/app/components/(homepage)/section-7";
 
 export default function Home() {
   return (
-    <section className="w-full">
-      <div className="container mx-auto px-8 mt-24">
-        <div className="flex flex-col items-center text-center space-y-6">
-          <h1 className="text-4xl md:text-6xl font-medium leading-tight tracking-tighter lg:leading-[1.1] mx-auto">
-            <Balancer>Open Source Compliance Automation Platform</Balancer>
-          </h1>
-          <p className="text-lg md:text-xl font-light text-muted-foreground mt-6 mx-auto">
-            <Balancer>
-              Get audit ready, fast. Automate compliance with frameworks like
-              SOC 2, ISO 27001, and GDPR - in weeks, not months. Open source
-              competitor to Drata & Vanta.
-            </Balancer>
-          </p>
-        </div>
-      </div>
-
-      <div className="mt-10 container mx-auto px-8 max-w-[550px]">
-        <WaitlistForm />
-      </div>
-
-      <WhyUs />
-
-      <div className="from-accent/20 to-background bg-gradient-to-b">
-        <OurSolution />
-      </div>
-
-      <HowItWorks />
-
-      <CTA />
-    </section>
+    <div>
+      <HeroSection />
+      <Section2 />
+      <Section3 />
+      <Section4 />
+      <Section7 />
+      <Section6 />
+    </div>
   );
-}
+}

apps/web/src/app/(home)/success/page.tsx

@@ -1,4 +1,4 @@
-import Logo from "@/app/components/logo";
+
 import { env } from "@/env.mjs";
 import Link from "next/link";
 import Balancer from "react-wrap-balancer";
@@ -9,8 +9,6 @@ export default function SuccessPage() {
       <section className="w- full">
         <div className="container mx-auto px-4 py-16 md:py-24">
           <div className="flex flex-col items-center space-y-6">
-            <Logo />
-
             <h1 className="max-w-[900px] text-4xl font-semibold leading-tight tracking-tighter lg:leading-[1.1] mx-auto">
               <Balancer>Thank you 🎉</Balancer>
             </h1>

apps/web/src/app/components/(homepage)/home-hero.tsx

@@ -0,0 +1,124 @@
+/* eslint-disable @next/next/no-img-element */
+
+"use client";
+
+import { FlickeringGrid } from "@/app/components/flickering-grid";
+import { motion } from "motion/react";
+import { WaitlistForm } from "@/app/components/(homepage)/waitlist-form";
+
+
+export function HeroSection() {
+  return (
+    <section className="relative m-4 rounded-lg overflow-hidden">
+      <div className="absolute inset-0">
+        <div className="absolute inset-0 -z-10 h-full w-full [background:radial-gradient(150%_120%_at_55%_10%,transparent_40%,#00DC73_100%)]" />
+      </div>
+
+      <div className="absolute w-full h-56 [mask-image:linear-gradient(to_top,transparent_25%,black_95%)]">
+        <FlickeringGrid
+          className="absolute inset-0 z-0 size-full"
+          squareSize={4}
+          gridGap={6}
+          color="#6B7280"
+          maxOpacity={0.5}
+          flickerChance={0.1}
+        />
+      </div>
+      <div className="relative z-10 pt-56 h-full w-full flex flex-col items-center justify-center">
+        <div className="max-w-xl lg:max-w-3xl mx-auto h-full w-full flex flex-col items-center justify-center">
+          <button
+            type="button"
+            className="h-9 mb-6 w-fit px-1 pl-3 py-1 flex items-center gap-2 rounded-full text-sm border border-white/[0.012] cursor-pointer [background:radial-gradient(251.65%_175%_at_50%_-15%,rgba(255,255,255,0.04)_0%,rgba(255,255,255,0.00)_31.41%),rgba(255,255,255,0.08)] text-white"
+          >
+            Automate your path to compliance{" "}
+            <span className="ml-2 size-6 bg-white rounded-full flex items-center justify-center">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="13"
+                height="12"
+                viewBox="0 0 13 12"
+                fill="none"
+                className="size-4"
+              >
+                <path
+                  d="M2.5 6H10.5M10.5 6L7.5 3M10.5 6L7.5 9"
+                  stroke="#16171B"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </span>
+          </button>
+          <div className="flex flex-col items-center justify-center gap-5">
+            <h1 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-medium tracking-tight text-balance text-center text-white">
+              Open Source Compliance Automation Platform
+            </h1>
+            <p className="text-base lg:text-lg text-center text-[#E1E1E1]/70 max-w-xl mx-auto text-balance leading-relaxed tracking-tight">
+              Get audit ready, fast. Automate compliance with frameworks like
+              SOC 2, ISO 27001, and GDPR - in weeks, not months.
+            </p>
+          </div>
+          <div className="mt-8">
+            <WaitlistForm />
+          </div>
+        </div>
+
+        <div className=" w-full max-w-5xl mx-auto relative flex items-center justify-center">
+          <div className="absolute inset-0 overflow-hidden [mask-image:radial-gradient(circle_at_center,black_50%,transparent_80%)]">
+            <motion.div
+              initial={{
+                opacity: 0,
+                rotateX: 70,
+                rotateZ: -60,
+              }}
+              animate={{
+                opacity: 1,
+                rotateX: 60,
+                rotateZ: -45,
+              }}
+              transition={{
+                duration: 1.5,
+                ease: "easeOut",
+              }}
+              className="absolute inset-0 [perspective:1000px] transform-gpu"
+              style={{
+                transformOrigin: "50% 50%",
+              }}
+            >
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{
+                  opacity: 1,
+                  translateY: ["-50%", "-48%", "-50%"],
+                  translateX: ["-50%", "-52%", "-50%"],
+                }}
+                transition={{
+                  opacity: { duration: 1 },
+                  translateY: {
+                    repeat: Number.POSITIVE_INFINITY,
+                    duration: 20,
+                    ease: "linear",
+                  },
+                  translateX: {
+                    repeat: Number.POSITIVE_INFINITY,
+                    duration: 20,
+                    ease: "linear",
+                  },
+                }}
+                className="absolute inset-0 h-[1000%] w-[1000%] bg-[linear-gradient(to_right,#ffffff10_1px,transparent_1px),linear-gradient(to_bottom,#ffffff10_1px,transparent_1px)]"
+                style={{
+                  backgroundSize: "10rem 10rem",
+                }}
+              />
+            </motion.div>
+          </div>
+          <img
+            src="/hero-showcase.png"
+            alt=""
+            className="size-full object-contain rotate-[3deg] z-[999]"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}

apps/web/src/app/components/(homepage)/section-2.tsx

@@ -0,0 +1,59 @@
+export function Section2() {
+  const features = [
+    {
+      title: "Automated Continuous Monitoring",
+      description: "Detect security risks and compliance gaps in minutes.",
+    },
+    {
+      title: "Automated Evidence Collection",
+      description:
+        "Powerful integrations automatically collect evidence for most frameworks.",
+    },
+    {
+      title: "Pre-Mapped Controls",
+      description:
+        "Frameworks like SOC 2, ISO 27001, and GDPR supported out of the box.",
+    },
+    {
+      title: "Risk & Vendor Management",
+      description: "Manage your risks, manage vendors & protect your company.",
+    },
+  ];
+
+  return (
+    <section className="relative flex justify-center items-center py-10 px-10 md:px-6 border-b border-border/5">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:p-8 max-w-7xl mx-auto">
+        {features.map((feature, index) => (
+          <div
+            key={feature.title}
+            className=" text-white p-6 grid grid-rows-[auto_1fr] relative"
+          >
+            <div className="absolute w-px h-full bg-gradient-to-b  from-transparent via-[#2D2E32] to-transparent left-0 top-0" />
+            <div className="absolute w-px h-5 bg-[#00DC73] left-0 top-[60px]" />
+            <div className="flex flex-col gap-2 mb-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="28"
+                height="28"
+                viewBox="0 0 28 28"
+                fill="none"
+              >
+                <path
+                  opacity="0.2"
+                  d="M19.25 14C19.25 15.0384 18.9421 16.0534 18.3652 16.9167C17.7883 17.7801 16.9684 18.453 16.0091 18.8504C15.0498 19.2477 13.9942 19.3517 12.9758 19.1491C11.9574 18.9466 11.0219 18.4465 10.2877 17.7123C9.55347 16.9781 9.05345 16.0426 8.85088 15.0242C8.64831 14.0058 8.75227 12.9502 9.14963 11.9909C9.54699 11.0316 10.2199 10.2117 11.0833 9.63479C11.9466 9.05791 12.9616 8.75 14 8.75C15.3924 8.75 16.7277 9.30312 17.7123 10.2877C18.6969 11.2723 19.25 12.6076 19.25 14Z"
+                  fill="#00DC73"
+                />
+                <path
+                  d="M24.2675 9.09557C25.4817 11.635 25.7122 14.5343 24.9145 17.2337C24.1168 19.9331 22.3475 22.2414 19.948 23.713C17.5485 25.1846 14.6889 25.7152 11.9212 25.2025C9.15349 24.6897 6.67381 23.1699 4.96074 20.9364C3.24768 18.7029 2.42267 15.9139 2.64495 13.1079C2.86723 10.3019 4.12103 7.67766 6.16438 5.7417C8.20773 3.80574 10.8958 2.69529 13.7097 2.62468C16.5236 2.55407 19.264 3.52829 21.4019 5.35932L23.8814 2.8787C24.0456 2.71451 24.2683 2.62227 24.5005 2.62227C24.7326 2.62227 24.9553 2.71451 25.1195 2.8787C25.2837 3.04288 25.3759 3.26557 25.3759 3.49776C25.3759 3.72995 25.2837 3.95264 25.1195 4.11682L14.6195 14.6168C14.4553 14.781 14.2326 14.8732 14.0005 14.8732C13.7683 14.8732 13.5456 14.781 13.3814 14.6168C13.2172 14.4526 13.125 14.23 13.125 13.9978C13.125 13.7656 13.2172 13.5429 13.3814 13.3787L16.4133 10.3468C15.5916 9.8034 14.6106 9.55319 13.629 9.6367C12.6474 9.72021 11.7227 10.1326 11.0047 10.807C10.2866 11.4814 9.8172 12.3784 9.67239 13.3529C9.52759 14.3273 9.71588 15.3221 10.2068 16.1761C10.6977 17.0302 11.4625 17.6936 12.3774 18.059C13.2923 18.4243 14.3037 18.4702 15.2478 18.1892C16.192 17.9082 17.0138 17.3167 17.58 16.5106C18.1462 15.7045 18.4238 14.7308 18.3678 13.7473C18.3613 13.6324 18.3776 13.5173 18.4156 13.4087C18.4536 13.3001 18.5126 13.2 18.5893 13.1142C18.666 13.0283 18.7588 12.9585 18.8625 12.9085C18.9662 12.8586 19.0787 12.8295 19.1936 12.8231C19.4256 12.81 19.6534 12.8897 19.8267 13.0445C19.9125 13.1212 19.9824 13.2141 20.0324 13.3178C20.0823 13.4214 20.1113 13.5339 20.1178 13.6489C20.1976 15.041 19.8 16.4186 18.9907 17.5541C18.1814 18.6896 17.0089 19.515 15.667 19.8939C14.325 20.2727 12.894 20.1823 11.6104 19.6377C10.3268 19.093 9.26741 18.1267 8.60741 16.8984C7.9474 15.6701 7.72626 14.2534 7.98052 12.8824C8.23478 11.5114 8.94923 10.2682 10.0058 9.35821C11.0623 8.44827 12.3978 7.92606 13.7913 7.87791C15.1849 7.82976 16.5531 8.25854 17.67 9.09338L20.1583 6.6051C18.3348 5.09113 16.0162 4.30425 13.6479 4.39559C11.2796 4.48693 9.0285 5.45006 7.32703 7.09999C5.62556 8.74991 4.59366 10.9703 4.42953 13.3347C4.2654 15.6991 4.9806 18.0407 6.43778 19.9099C7.89496 21.7791 9.99136 23.0441 12.3243 23.4618C14.6573 23.8794 17.0624 23.4205 19.0776 22.173C21.0928 20.9255 22.576 18.9774 23.2424 16.703C23.9088 14.4285 23.7114 11.988 22.6881 9.85026C22.588 9.64082 22.5753 9.40021 22.6526 9.18134C22.7299 8.96248 22.891 8.78331 23.1005 8.68323C23.3099 8.58315 23.5505 8.57037 23.7694 8.6477C23.9882 8.72503 24.1674 8.88613 24.2675 9.09557Z"
+                  fill="#00DC73"
+                />
+              </svg>
+              <h3 className="mb-2">{feature.title}</h3>
+            </div>
+            <p className="text-[#E1E1E1]/70 text-sm">{feature.description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}