ACTA-Team · JosueBrenes · Mar 20, 2026 · Mar 19, 2026 · Mar 19, 2026 · Mar 19, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,8 +6,8 @@
     "dev": "next dev --turbopack",
     "build": "next build --turbopack",
     "start": "next start",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
-    "lint:check": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix --max-warnings 0",
+    "lint:check": "eslint . --ext .js,.jsx,.ts,.tsx --max-warnings 0",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "prepare": "husky",

diff --git a/public/ACTA1.png b/public/ACTA1.png
diff --git a/public/ACTA2.png b/public/ACTA2.png
diff --git a/public/ACTA3.png b/public/ACTA3.png
diff --git a/public/startups/baf.png b/public/startups/baf.png
diff --git a/public/startups/grantfox.png b/public/startups/grantfox.png
diff --git a/public/startups/interactuar.png b/public/startups/interactuar.png
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -111,9 +111,13 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  // suppressHydrationWarning: extensions (e.g. Bitwarden) inject attrs on <body> before hydrate
   return (
-    <html lang="en">
-      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}
+        suppressHydrationWarning
+      >
         <Script
           id="organization-schema"
           type="application/ld+json"

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,24 +1,17 @@
 "use client";
 
-import type React from "react";
-import Image from "next/image";
 import { motion } from "framer-motion";
-import { Button } from "@/components/ui/button";
-import { Particles } from "@/components/ui/particles";
-import { ShineBorder } from "@/components/ui/shine-border";
-import { usePostHog } from "posthog-js/react";
+import { TextAnimate } from "@/components/ui/text-animate";
 
-import ScrollProgress from "@/components/layout/ScrollProgress";
 import Footer from "@/components/layout/Footer";
-import AnimatedActa from "@/features/hero/AnimatedActa";
-import HeroSubtitle from "@/features/hero/HeroSubtitle";
-import ValueProposition from "@/features/value-proposition/ValueProposition";
-import ValuePropositionDetails from "@/features/value-proposition/ValueDetails";
-import ValueDetailsExtended from "@/features/value-proposition/ValueDetailsExtended";
 import HowItWorks from "@/features/how-it-works/HowItWorks";
-import UseCasesCarousel from "@/features/use-cases/UseCasesCarousel";
 import FAQ from "@/features/faq/FAQ";
+import ValueDetailsExtended from "@/features/value-proposition/ValueDetailsExtended";
+import UseCasesCarousel from "@/features/use-cases/UseCasesCarousel";
 import WaitlistForm from "@/features/waitlist/WaitlistForm";
+import HeroParallaxDemo from "@/features/hero/HeroParallax";
+import ACTAScrollDown from "@/features/acta-scroll/ACTAScrollDown";
+import { TrustedStartups } from "@/features/social-proof/TrustedByStartups";
 
 const fadeInUp = {
   initial: { opacity: 0, y: 20 },
@@ -27,120 +20,79 @@ const fadeInUp = {
 };
 
 export default function ActaLanding() {
-  const ph = usePostHog();
   return (
-    <div className="min-h-screen bg-background text-foreground overflow-x-hidden">
-      <ScrollProgress />
-
-      <div className="fixed inset-0 overflow-hidden pointer-events-none">
-        <div className="absolute inset-0 " />
-        <Particles
-          className="absolute inset-0 z-0"
-          quantity={60}
-          staticity={40}
-          ease={70}
-          size={0.4}
-          vx={0}
-          vy={0}
-          color="#ffffff"
-        />
-      </div>
-
+    <div
+      className="min-h-screen bg-background text-foreground"
+      style={{ overflowX: "clip" }}
+    >
       <nav className="relative z-10 px-6 py-4">
         <div className="max-w-7xl mx-auto flex items-center justify-between"></div>
       </nav>
 
-      <section className="relative z-10 isolate px-4 sm:px-6 py-12 sm:py-20 min-h-[85vh] md:min-h-[90vh] flex items-center">
-        <div className="pointer-events-none absolute inset-0 z-0">
-          {/* Logo difuminado */}
-          <div className="absolute inset-0 flex items-center justify-center">
-            <Image
-              src="/Acta-logo.png"
-              alt="ACTA Logo Background"
-              width={384}
-              height={384}
-              className="w-96 h-96 object-contain opacity-30 blur-[3px] scale-220"
-            />
-          </div>
-          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-white/10 via-transparent to-transparent [mask-image:radial-gradient(350px_200px_at_50%_0%,#000_40%,transparent_80%)]" />
-          <div className="absolute inset-0 bg-[linear-gradient(to_right,transparent_0,transparent_23%,rgba(255,255,255,.06)_24%,transparent_25%),linear-gradient(to_bottom,transparent_0,transparent_23%,rgba(255,255,255,.06)_24%,transparent_25%)] bg-[size:44px_44px] opacity-40" />
-        </div>
-
-        <div className="relative z-10 mx-auto max-w-5xl px-4 sm:px-6 text-center">
-          <div className="flex flex-col items-center gap-2 mb-12">
-            <AnimatedActa />
-          </div>
+      <section className="relative z-10">
+        <HeroParallaxDemo />
+      </section>
 
-          <HeroSubtitle delay={0.15} />
+      <div className="relative z-10 w-full" aria-hidden="true">
+        <div className="w-full h-px bg-white/[0.08]" />
+      </div>
 
-          <motion.div
-            className="flex flex-col sm:flex-row gap-4 justify-center mt-8"
-            {...fadeInUp}
-            transition={{ delay: 0.3 }}
-          >
-            <div className="relative overflow-hidden rounded-2xl">
-              <ShineBorder
-                shineColor={["#404040", "#808080", "#404040"]}
-                borderWidth={1}
-              />
-              <Button
-                asChild
-                className="bg-[#1a1a1a] text-white hover:bg-[#2a2a2a] rounded-2xl h-14 px-8 text-lg font-semibold shadow-lg transition-all focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#404040]/40 w-full"
-              >
-                <a
-                  href="//dapp.acta.build"
-                  onClick={() =>
-                    ph?.capture("clicked_try_demo", {
-                      location: "landing_page",
-                    })
-                  }
-                >
-                  Try our dApp!
-                </a>
-              </Button>
-            </div>
-          </motion.div>
-        </div>
+      <section className="relative z-10">
+        <ACTAScrollDown />
       </section>
 
-      <section className="relative z-10 px-4 sm:px-6 py-6 sm:py-14">
-        <div className="relative max-w-6xl mx-auto">
-          <motion.h2
-            className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-8 sm:mb-12"
-            {...fadeInUp}
-          >
-            What is ACTA?
-          </motion.h2>
-          <ValueProposition />
-        </div>
-      </section>
+      <div className="relative z-10 w-full" aria-hidden="true">
+        <div className="w-full h-px bg-white/[0.08]" />
+      </div>
 
       <section className="relative z-10 px-4 sm:px-6 py-6 sm:py-14">
-        <div className="relative max-w-6xl mx-auto">
-          <ValuePropositionDetails />
+        <div className="max-w-6xl mx-auto">
+          <motion.div {...fadeInUp} className="space-y-5">
+            <TextAnimate
+              className="text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold"
+              animation="slideLeft"
+              by="word"
+              delay={0.4}
+              duration={1.3}
+            >
+              The simplest way to issue blockchain based verifiable credentials.
+            </TextAnimate>
+          </motion.div>
         </div>
       </section>
 
+      <div className="relative z-10 w-full" aria-hidden="true">
+        <div className="w-full h-px bg-white/[0.08]" />
+      </div>
+
       <section className="relative z-10 px-4 sm:px-6 py-6 sm:py-14">
         <div className="relative max-w-6xl mx-auto">
           <ValueDetailsExtended />
         </div>
       </section>
 
+      <div className="relative z-10 w-full" aria-hidden="true">
+        <div className="w-full h-px bg-white/[0.08]" />
+      </div>
+
       <section className="relative z-10 px-4 sm:px-6 py-12 sm:py-20">
         <div className="max-w-6xl mx-auto">
           <motion.h2
             className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-8 sm:mb-16"
             {...fadeInUp}
           >
-            Use Cases
+            Use cases
           </motion.h2>
           <motion.div {...fadeInUp}>
             <UseCasesCarousel />
           </motion.div>
         </div>
       </section>
 
+      <div className="relative z-10 w-full" aria-hidden="true">
+        <div className="w-full h-px bg-white/[0.08]" />
+      </div>
+
       <section className="relative z-10 px-4 sm:px-6 py-12 sm:py-20">
         <div className="max-w-6xl mx-auto">
           <motion.div {...fadeInUp}>
@@ -149,6 +101,12 @@ export default function ActaLanding() {
         </div>
       </section>
 
+      <TrustedStartups />
+
+      <div className="relative z-10 w-full" aria-hidden="true">
+        <div className="w-full h-px bg-white/[0.08]" />
+      </div>
+
       <section className="relative z-10 px-4 sm:px-6 py-12 sm:py-20">
         <div className="max-w-2xl mx-auto">
           <motion.div {...fadeInUp}>
@@ -157,21 +115,24 @@ export default function ActaLanding() {
         </div>
       </section>
 
+      <div className="relative z-10 w-full" aria-hidden="true">
+        <div className="w-full h-px bg-white/[0.08]" />
+      </div>
+
       <section className="relative z-10 px-4 sm:px-6 py-12 sm:py-20">
         <div className="max-w-4xl mx-auto">
           <motion.h2
             className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-8 sm:mb-16"
             {...fadeInUp}
           >
-            Frequently Asked Questions
+            Frequently asked questions
           </motion.h2>
           <motion.div {...fadeInUp}>
             <FAQ />
           </motion.div>
         </div>
       </section>
 
-      {/* footer section */}
       <footer className="relative z-10 px-4 sm:px-6 py-8 sm:py-12 border-t border-border/50">
         <Footer />
       </footer>