add benefits

src/components/Benefits.tsx

@@ -0,0 +1,92 @@
+import { Container } from '@/components/Container'
+import Image from 'next/image'
+import Benefits1 from '@/images/benefits/benefits1.jpg'
+import Benefits2 from '@/images/benefits/benefits2.jpg'
+import Benefits3 from '@/images/benefits/benefits3.jpg'
+import Benefits4 from '@/images/benefits/benefits4.jpg'
+
+
+export default function Benefits() {
+  return (
+    <div className="bg-white lg:py-24 py-12">
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+        <Container>
+            <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
+                <h2 className="lg:text-4xl text-3xl font-medium tracking-tight text-gray-900">
+                Built Different. For a Change.
+                </h2>   
+                <p className="mt-6 lg:text-lg text-base text-gray-600">
+                    Engage OS isn’t just another tech platform — it’s a digital infrastructure built from the ground up for purpose-driven organizations. From white-label sovereignty to field-ready resilience, every element of Engage OS is designed to meet the real-world challenges of civil society.
+                </p>
+            </div>
+        </Container>
+        <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
+          <div className="flex p-px lg:col-span-4">
+            <div className="overflow-hidden rounded-lg bg-white ring-1 ring-black/15 max-lg:rounded-t-4xl lg:rounded-tl-4xl">
+              <Image
+                alt=""
+                src={Benefits1}
+                className="h-80 object-cover object-left"
+              />
+              <div className="p-10">
+                <h3 className="text-sm/4 font-semibold text-gray-900"> Built for Civil Society</h3>
+                <p className="mt-2 text-lg font-medium tracking-tight text-gray-900">Purpose-First, Not Profit-First</p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  Unlike traditional SaaS built for commercial scale, Engage OS was born from the realities of NGOs, grassroots coalitions, and purpose-led institutions. Every module, flow, and metric is optimized to serve impact — not ad revenue or venture capital.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex p-px lg:col-span-2">
+            <div className="overflow-hidden rounded-lg bg-white ring-1 ring-black/15 lg:rounded-tr-4xl">
+              <Image
+                alt=""
+                src={Benefits2}
+                className="h-80 object-cover"
+              />
+              <div className="p-10">
+                <h3 className="text-sm/4 font-semibold text-gray-900">White-Label, Zero-Code</h3>
+                <p className="mt-2 text-lg font-medium tracking-tight text-gray-900">Your Brand, Your Movements</p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  Engage OS empowers organizations to fully own their digital identity. From Red Cross OS to Montessori OS, each instance is custom-branded — no tech team required. You launch a platform that looks and feels like you, not us.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex p-px lg:col-span-2">
+            <div className="overflow-hidden rounded-lg bg-white ring-1 ring-black/15 lg:rounded-bl-4xl">
+              <Image
+                alt=""
+                src={Benefits3}
+                className="h-80 object-cover"
+              />
+              <div className="p-10">
+                <h3 className="text-sm/4 font-semibold text-gray-900">Sovereign & Ethical Infrastructure</h3>
+                <p className="mt-2 text-lg font-medium tracking-tight text-gray-900">Own Your Data. Always.</p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  We don’t mine or monetize user data. Engage OS runs on decentralized, privacy-respecting infrastructure — built for trust, compliance, and sovereignty. You control where your data lives and who sees it.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex p-px lg:col-span-4">
+            <div className="overflow-hidden rounded-lg bg-white ring-1 ring-black/15 max-lg:rounded-b-4xl lg:rounded-br-4xl">
+              <Image
+                alt=""
+                src={Benefits4}
+                className="h-80 object-cover object-left"
+              />
+              <div className="p-10">
+                <h3 className="text-sm/4 font-semibold text-gray-900">Mutualized Model</h3>
+                <p className="mt-2 text-lg font-medium tracking-tight text-gray-900">Share Infrastructure. Multiply Impact.</p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  By pooling tech costs across aligned organizations, Engage OS offers enterprise-grade functionality at a fraction of the price. When one partner grows, the entire ecosystem benefits — through shared modules, updates, and insights.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Button.tsx

@@ -10,6 +10,8 @@ const baseStyles = {
 
 const variantStyles = {
   solid: {
+    gradient:
+      'bg-gradient-to-r from-[#caa5f0] via-[#8f79f9] to-[#3c82f5] text-white hover:brightness-110 active:brightness-95',
     cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
     white:
       'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',

src/components/Footer.tsx

@@ -29,8 +29,8 @@ export function Footer() {
             <div className="flex items-center text-gray-900">
               <Logomark className="h-10 w-10 flex-none fill-cyan-500" />
               <div className="ml-4">
-                <p className="text-base font-semibold">Pocket</p>
-                <p className="mt-1 text-sm">Invest at the perfect time.</p>
+                <p className="text-base font-semibold">EngageOS</p>
+                <p className="mt-1 text-sm">Empowering Purpose-Driven Organizations.</p>
               </div>
             </div>
             <nav className="mt-11 flex gap-8">

src/components/Gradients.tsx

@@ -0,0 +1,9 @@
+// gradients.tsx
+
+export const gradientText = 'bg-gradient-to-r from-[#caa5f0] via-[#8f79f9] to-[#3c82f5] bg-clip-text text-transparent'
+
+export const gradientLight = 'bg-gradient-to-r from-[#eee6f9] via-[#e5e4fa] to-[#dee9fb]'
+
+export const gradientDark = 'bg-gradient-to-r from-[#764ba2] via-[#667eea] to-[#314755] text-white'
+
+export const gradientAccent = 'bg-gradient-to-r from-[#8f79f9] to-[#3c82f5] text-white'

src/components/Hero.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx'
 
 import { AppDemo } from '@/components/AppDemo'
 import { AppStoreLink } from '@/components/AppStoreLink'
+import HeroHome from './HeroHome'
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import { PhoneFrame } from '@/components/PhoneFrame'
@@ -15,6 +16,7 @@ import logoForbes from '@/images/logos/forbes.svg'
 import logoHuffpost from '@/images/logos/huffpost.svg'
 import logoTechcrunch from '@/images/logos/techcrunch.svg'
 import logoWired from '@/images/logos/wired.svg'
+import Benefits from './Benefits'
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   let id = useId()
@@ -98,65 +100,15 @@ function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   )
 }
 
+
+
+
+
 export function Hero() {
   return (
-    <div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
-      <Container>
-        <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
-          <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-            <h1 className="text-4xl font-medium tracking-tight text-gray-900">
-              Invest at the perfect time.
-            </h1>
-            <p className="mt-6 text-lg text-gray-600">
-              By leveraging insights from our network of industry insiders,
-              you’ll know exactly when to buy to maximize profit, and exactly
-              when to sell to avoid painful losses.
-            </p>
-            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
-              <AppStoreLink />
-              <Button
-                href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-                variant="outline"
-              >
-                <PlayIcon className="h-6 w-6 flex-none" />
-                <span className="ml-2.5">Watch the video</span>
-              </Button>
-            </div>
-          </div>
-          <div className="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">
-            <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/3 mask-[linear-gradient(to_bottom,white_20%,transparent_75%)] stroke-gray-300/70 sm:top-16 sm:-translate-x-1/2 lg:-top-16 lg:ml-12 xl:-top-14 xl:ml-0" />
-            <div className="-mx-4 h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] px-9 sm:mx-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:px-0 lg:pt-10 xl:-bottom-32">
-              <PhoneFrame className="mx-auto max-w-[366px]" priority>
-                <AppDemo />
-              </PhoneFrame>
-            </div>
-          </div>
-          <div className="relative -mt-4 lg:col-span-7 lg:mt-0 xl:col-span-6">
-            <p className="text-center text-sm font-semibold text-gray-900 lg:text-left">
-              As featured in
-            </p>
-            <ul
-              role="list"
-              className="mx-auto mt-8 flex max-w-xl flex-wrap justify-center gap-x-10 gap-y-8 lg:mx-0 lg:justify-start"
-            >
-              {[
-                ['Forbes', logoForbes],
-                ['TechCrunch', logoTechcrunch],
-                ['Wired', logoWired],
-                ['CNN', logoCnn, 'hidden xl:block'],
-                ['BBC', logoBbc],
-                ['CBS', logoCbs],
-                ['Fast Company', logoFastCompany],
-                ['HuffPost', logoHuffpost, 'hidden xl:block'],
-              ].map(([name, logo, className]) => (
-                <li key={name} className={clsx('flex', className)}>
-                  <Image src={logo} alt={name} className="h-8" unoptimized />
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-      </Container>
+    <div className="overflow-hidden lg:pt-24 lg:pb-24 pt-12 pb-24">
+      <HeroHome />
+      <Benefits />
     </div>
   )
 }

src/components/HeroHome.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import Image from 'next/image'
+import { Button } from './Button'
+import Engage from '@/images/engage.svg'
+import { gradientText, gradientDark } from '@/components/Gradients'
+
+const navigation = [
+  { name: 'Product', href: '#' },
+  { name: 'Features', href: '#' },
+  { name: 'Marketplace', href: '#' },
+  { name: 'Company', href: '#' },
+]
+
+export default function HeroHome() {
+  return (
+    <div className="bg-white">
+        <div className="">
+          <div className="mx-auto max-w-7xl px-8 lg:px-8">
+            <div className="mx-auto max-w-3xl text-center">
+              <h1 className="text-3xl font-medium tracking-tight text-gray-900 lg:text-5xl">
+                Empowering Purpose-Driven Organizations.
+              </h1>
+              <p className="mt-8 lg:text-lg text-base text-gray-600">
+                Welcome to <span className={`font-semibold ${gradientText}`}>Engage OS</span>: the first all-in-one, white-label engagement platform to mobilize communities, engage supporters, scale impact, and fundraise—at a fraction of the cost.
+              </p>
+              <div className="mt-12 flex items-center justify-center gap-x-6 relative z-10">
+                <Button color="gradient">Get in Touch</Button>
+              <Button
+                href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+                variant="outline"
+              >
+                <span className="ml-2.5">Book a Demo</span>
+              </Button>
+              </div>
+            </div>
+          </div>
+          <div className="mx-auto max-w-7xl px-4 lg:px-8 mb-10 lg:mb-32">
+            <div className="max-w-4xl flow-root bg-transparent mx-auto relative">
+              <div className="lg:-m-8 m-10 flex justify-center">
+                <Image src={Engage} alt="" unoptimized />
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+  )
+}