add benefits
This commit is contained in:
parent
07fd424a6b
commit
08bc8e8ba5
45
.gitignore
vendored
Normal file
45
.gitignore
vendored
Normal 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
8
.hintrc
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"extends": [
|
||||||
|
"development"
|
||||||
|
],
|
||||||
|
"hints": {
|
||||||
|
"no-inline-styles": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -13,7 +13,7 @@ const inter = Inter({
|
|||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: {
|
title: {
|
||||||
template: '%s - Pocket',
|
template: '%s - Pocket',
|
||||||
default: 'Pocket - Invest at the perfect time.',
|
default: 'EngageOS - Invest at the perfect time.',
|
||||||
},
|
},
|
||||||
description:
|
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.',
|
'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
|
children: React.ReactNode
|
||||||
}) {
|
}) {
|
||||||
return (
|
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>
|
<body>{children}</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
|
|||||||
92
src/components/Benefits.tsx
Normal file
92
src/components/Benefits.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -10,6 +10,8 @@ const baseStyles = {
|
|||||||
|
|
||||||
const variantStyles = {
|
const variantStyles = {
|
||||||
solid: {
|
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',
|
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:
|
white:
|
||||||
'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
|
'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
|
||||||
|
|||||||
@ -29,8 +29,8 @@ export function Footer() {
|
|||||||
<div className="flex items-center text-gray-900">
|
<div className="flex items-center text-gray-900">
|
||||||
<Logomark className="h-10 w-10 flex-none fill-cyan-500" />
|
<Logomark className="h-10 w-10 flex-none fill-cyan-500" />
|
||||||
<div className="ml-4">
|
<div className="ml-4">
|
||||||
<p className="text-base font-semibold">Pocket</p>
|
<p className="text-base font-semibold">EngageOS</p>
|
||||||
<p className="mt-1 text-sm">Invest at the perfect time.</p>
|
<p className="mt-1 text-sm">Empowering Purpose-Driven Organizations.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav className="mt-11 flex gap-8">
|
<nav className="mt-11 flex gap-8">
|
||||||
|
|||||||
9
src/components/Gradients.tsx
Normal file
9
src/components/Gradients.tsx
Normal 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'
|
||||||
@ -4,6 +4,7 @@ import clsx from 'clsx'
|
|||||||
|
|
||||||
import { AppDemo } from '@/components/AppDemo'
|
import { AppDemo } from '@/components/AppDemo'
|
||||||
import { AppStoreLink } from '@/components/AppStoreLink'
|
import { AppStoreLink } from '@/components/AppStoreLink'
|
||||||
|
import HeroHome from './HeroHome'
|
||||||
import { Button } from '@/components/Button'
|
import { Button } from '@/components/Button'
|
||||||
import { Container } from '@/components/Container'
|
import { Container } from '@/components/Container'
|
||||||
import { PhoneFrame } from '@/components/PhoneFrame'
|
import { PhoneFrame } from '@/components/PhoneFrame'
|
||||||
@ -15,6 +16,7 @@ import logoForbes from '@/images/logos/forbes.svg'
|
|||||||
import logoHuffpost from '@/images/logos/huffpost.svg'
|
import logoHuffpost from '@/images/logos/huffpost.svg'
|
||||||
import logoTechcrunch from '@/images/logos/techcrunch.svg'
|
import logoTechcrunch from '@/images/logos/techcrunch.svg'
|
||||||
import logoWired from '@/images/logos/wired.svg'
|
import logoWired from '@/images/logos/wired.svg'
|
||||||
|
import Benefits from './Benefits'
|
||||||
|
|
||||||
function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
|
function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
|
||||||
let id = useId()
|
let id = useId()
|
||||||
@ -98,65 +100,15 @@ function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export function Hero() {
|
export function Hero() {
|
||||||
return (
|
return (
|
||||||
<div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
|
<div className="overflow-hidden lg:pt-24 lg:pb-24 pt-12 pb-24">
|
||||||
<Container>
|
<HeroHome />
|
||||||
<div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
|
<Benefits />
|
||||||
<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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
48
src/components/HeroHome.tsx
Normal file
48
src/components/HeroHome.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
1
src/images/Engage.svg
Normal file
1
src/images/Engage.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 4.0 MiB |
BIN
src/images/benefits/benefits1.jpg
Normal file
BIN
src/images/benefits/benefits1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
src/images/benefits/benefits2.jpg
Normal file
BIN
src/images/benefits/benefits2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
src/images/benefits/benefits3.jpg
Normal file
BIN
src/images/benefits/benefits3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
src/images/benefits/benefits4.jpg
Normal file
BIN
src/images/benefits/benefits4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
Loading…
Reference in New Issue
Block a user