ourworld_web/www_engage_os
20
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add benefits

Browse Source
This commit is contained in:
sasha-astiadi 2025-06-18 15:28:51 +02:00
parent 07fd424a6b
commit 08bc8e8ba5
15 changed files with 358 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
.gitignore vendored Normal file
View File

@ -0,0 +1,45 @@
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# local env files
.env*.local
.env
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
# IDE specific files
.idea/
.vscode/
*.swp
*.swo
# OS specific files
Thumbs.db

8
.hintrc Normal file
View File

@ -0,0 +1,8 @@
{
"extends": [
"development"
],
"hints": {
"no-inline-styles": "off"
}
}

4
src/app/layout.tsx
View File

@ -13,7 +13,7 @@ const inter = Inter({
export const metadata: Metadata = {
title: {
template: '%s - Pocket',
default: 'Pocket - Invest at the perfect time.',
default: 'EngageOS - Invest at the perfect time.',
},
description:
'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.',
@ -25,7 +25,7 @@ export default function RootLayout({
children: React.ReactNode
}) {
return (
<html lang="en" className={clsx('bg-gray-50 antialiased', inter.variable)}>
<html lang="en" className={clsx('bg-white antialiased', inter.variable)}>
<body>{children}</body>
</html>
)

92
src/components/Benefits.tsx Normal file
View File

@ -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>
)
}

2
src/components/Button.tsx
View File

@ -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',

4
src/components/Footer.tsx
View File

@ -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">

9
src/components/Gradients.tsx Normal file
View File

@ -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'

66
src/components/Hero.tsx
View File

@ -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>
)
}

48
src/components/HeroHome.tsx Normal file
View File

@ -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>
)
}

154
src/components/Logo.tsx
View File

File diff suppressed because one or more lines are too long

1
src/images/Engage.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 4.0 MiB

BIN
src/images/benefits/benefits1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 242 KiB

BIN
src/images/benefits/benefits2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
src/images/benefits/benefits3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
src/images/benefits/benefits4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 398 KiB