ourworld_web/www_threefold_2025
23
0
Fork 0
forked from ourworld_web/www_engage_os
Code Pull Requests Activity

new

Browse Source
This commit is contained in:
sasha-astiadi
2025-06-18 16:44:30 +02:00
parent 08bc8e8ba5
commit 912b1733b3
17 changed files with 236 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AuthLayout.tsx
View File

@@ -28,7 +28,7 @@ export function AuthLayout({
{title}
</h1>
{subtitle && (
<p className="mt-3 text-center text-lg text-gray-600">{subtitle}</p>
<p className="mt-3 text-center lg:text-lg text-base text-gray-600">{subtitle}</p>
)}
</div>
<div className="-mx-4 mt-10 flex-auto bg-white px-4 py-10 shadow-2xl shadow-gray-900/10 sm:mx-0 sm:flex-none sm:rounded-5xl sm:p-24">

2
src/components/Benefits.tsx
View File

@@ -8,7 +8,7 @@ import Benefits4 from '@/images/benefits/benefits4.jpg'
export default function Benefits() {
return (
<div className="bg-white lg:py-24 py-12">
<div className="bg-white 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">

2
src/components/CallToAction.tsx
View File

@@ -16,7 +16,7 @@ export function CallToAction() {
<h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
Get your first tips today
</h2>
<p className="mt-4 text-lg text-gray-300">
<p className="mt-4 lg:text-lg text-base text-gray-300">
It takes 30 seconds to sign up. Download the app and create an
account today and we’ll send you a tip guaranteed to double your
first investment.

4
src/components/Faqs.tsx
View File

@@ -69,7 +69,7 @@ export function Faqs() {
>
Frequently asked questions
</h2>
<p className="mt-2 text-lg text-gray-600">
<p className="mt-2 lg:text-lg text-base text-gray-600">
If you have anything else you want to ask,{' '}
<a
href="mailto:info@example.com"
@@ -89,7 +89,7 @@ export function Faqs() {
<ul role="list" className="space-y-10">
{column.map((faq, faqIndex) => (
<li key={faqIndex}>
<h3 className="text-lg/6 font-semibold text-gray-900">
<h3 className="lg:text-lg text-base/6 font-semibold text-gray-900">
{faq.question}
</h3>
<p className="mt-4 text-sm text-gray-700">{faq.answer}</p>

4
src/components/Hero.tsx
View File

@@ -16,7 +16,6 @@ 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()
@@ -106,9 +105,8 @@ function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
export function Hero() {
return (
<div className="overflow-hidden lg:pt-24 lg:pb-24 pt-12 pb-24">
<div className="overflow-hidden lg:pt-24 lg:pb-24 py-12">
<HeroHome />
<Benefits />
</div>
)
}

2
src/components/HeroHome.tsx
View File

@@ -21,7 +21,7 @@ export default function HeroHome() {
<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">
<p className="mt-8 lg:lg:text-lg text-base 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">

2
src/components/Pricing.tsx
View File

@@ -225,7 +225,7 @@ export function Pricing() {
>
Flat pricing, no management fees.
</h2>
<p className="mt-2 text-lg text-gray-600">
<p className="mt-2 lg:text-lg text-base text-gray-600">
Whether you’re one person trying to get ahead or a big firm trying
to take over the world, we’ve got a plan for you.
</p>

6
src/components/PrimaryFeatures.tsx
View File

@@ -430,7 +430,7 @@ function FeaturesDesktop() {
)}
<div className="relative z-10 p-8">
<feature.icon className="h-8 w-8" />
<h3 className="mt-6 text-lg font-semibold text-white">
<h3 className="mt-6 lg:text-lg text-base font-semibold text-white">
<Tab className="text-left data-selected:not-data-focus:outline-hidden">
<span className="absolute inset-0 rounded-2xl" />
{feature.name}
@@ -531,7 +531,7 @@ function FeaturesMobile() {
</PhoneFrame>
<div className="absolute inset-x-0 bottom-0 bg-gray-800/95 p-6 backdrop-blur-sm sm:p-10">
<feature.icon className="h-8 w-8" />
<h3 className="mt-6 text-sm font-semibold text-white sm:text-lg">
<h3 className="mt-6 text-sm font-semibold text-white sm:lg:text-lg text-base">
{feature.name}
</h3>
<p className="mt-2 text-sm text-gray-400">
@@ -579,7 +579,7 @@ export function PrimaryFeatures() {
<h2 className="text-3xl font-medium tracking-tight text-white">
Every feature you need to win. Try it for yourself.
</h2>
<p className="mt-2 text-lg text-gray-400">
<p className="mt-2 lg:text-lg text-base text-gray-400">
Pocket was built for investors like you who play by their own rules
and aren’t going to let SEC regulations get in the way of their
dreams. If other investing tools are afraid to build it, Pocket has

4
src/components/Reviews.tsx
View File

@@ -150,7 +150,7 @@ function Review({
>
<blockquote className="text-gray-900">
<StarRating rating={rating} />
<p className="mt-4 text-lg/6 font-semibold before:content-['“'] after:content-['”']">
<p className="mt-4 lg:text-lg text-base/6 font-semibold before:content-['“'] after:content-['”']">
{title}
</p>
<p className="mt-3 text-base/7">{body}</p>
@@ -284,7 +284,7 @@ export function Reviews() {
>
Everyone is changing their life with Pocket.
</h2>
<p className="mt-2 text-lg text-gray-600 sm:text-center">
<p className="mt-2 lg:text-lg text-base text-gray-600 sm:text-center">
Thousands of people have doubled their net-worth in the last 30 days.
</p>
<ReviewGrid />

67
src/components/SecondaryFeatures.tsx
View File

@@ -1,43 +1,47 @@
import { useId } from 'react'
import { SquaresPlusIcon, BeakerIcon, CurrencyDollarIcon, AdjustmentsVerticalIcon, SparklesIcon, ServerStackIcon } from '@heroicons/react/24/solid'
import Image from 'next/image'
import AppScreenshot from '@/images/app_screenshot.png'
import { Container } from '@/components/Container'
const features = [
{
name: 'Invest any amount',
name: 'Engage Supporters with Community Tools.',
description:
'Whether it’s $1 or $1,000,000, we can put your money to work for you.',
icon: DeviceArrowIcon,
'Inspire action through built-in community tools like forums, comments, and stories that spark meaningful participation.',
icon: SquaresPlusIcon,
},
{
name: 'Build a balanced portfolio',
name: 'Train with AI-powered Learning Paths.',
description:
'Invest in different industries to find the most opportunities to win huge.',
icon: DeviceCardsIcon,
'Deliver scalable training with AI-powered learning paths, auto-generated content, and multilingual support.',
icon: BeakerIcon,
},
{
name: 'Trade in real-time',
name: 'Fundraise via Peer & Micro-Donations.',
description:
'Get insider tips on big stock moves and act on them within seconds.',
icon: DeviceClockIcon,
'Empower supporters to fundraise through peer-to-peer campaigns, micro-donations, and integrated payment solutions.',
icon: CurrencyDollarIcon,
},
{
name: 'Profit from your network',
name: 'Measure & Optimize Real-World Impact.',
description:
'Invite new insiders to get tips faster and beat even other Pocket users.',
icon: DeviceListIcon,
'Track real impact with dashboards that visualize KPIs, community activity, and field-level data.',
icon: AdjustmentsVerticalIcon,
},
{
name: 'Encrypted and anonymized',
name: 'White-Label Everything.',
description:
'Cutting-edge security technology that even the NSA doesn’t know about keeps you hidden.',
icon: DeviceLockIcon,
'Own your brand with a fully customizable platform—your name, your colors, your digital HQ.',
icon: SparklesIcon,
},
{
name: 'Portfolio tracking',
name: 'Robust & Secure Infrastructure.',
description:
'Watch your investments grow exponentially, leaving other investors in the dust.',
icon: DeviceChartIcon,
'Host on your terms via decentralized, privacy-respecting infrastructure built for trust and security.',
icon: ServerStackIcon,
},
]
@@ -191,18 +195,31 @@ export function SecondaryFeatures() {
<section
id="secondary-features"
aria-label="Features for building a portfolio"
className="py-20 sm:py-32"
className="pt-12 pb-24"
>
<Container>
<div className="mx-auto max-w-2xl sm:text-center">
<h2 className="text-3xl font-medium tracking-tight text-gray-900">
Now is the time to build your portfolio.
<div className="mx-auto max-w-4xl sm:text-center">
<h2 className="lg:text-4xl text-3xl font-medium tracking-tight text-gray-900">
The Platform Built for Purpose-driven Organizations
</h2>
<p className="mt-2 text-lg text-gray-600">
With typical market returns, you have to start young to secure your
future. With Pocket, it’s never too late to build your nest egg.
<p className="mt-4 lg:text-lg text-base text-gray-600">
Engage OS is the first plug-and-play engagement infrastructure built for civil society. From Red Cross OS to Montessori OS, any org can launch their own digital headquarters—no tech team needed.
</p>
</div>
<div className="relative overflow-hidden pt-16">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<Image
alt="App screenshot"
src={AppScreenshot}
width={2432}
height={1442}
className="mb-[-12%] rounded-xl shadow-2xl ring-1 ring-gray-900/10"
/>
<div aria-hidden="true" className="relative">
<div className="absolute -inset-x-20 bottom-0 bg-linear-to-t from-white pt-[7%]" />
</div>
</div>
</div>
<ul
role="list"
className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"

79
src/components/Tractions.tsx Normal file
View File

@@ -0,0 +1,79 @@
import Image from "next/image"
import Traction from "@/images/tractions/tractions.jpg"
import logoForbes from "@/images/logos/forbes.svg"
import logoTechcrunch from "@/images/logos/techcrunch.svg"
import logoWired from "@/images/logos/wired.svg"
import logoCnn from "@/images/logos/cnn.svg"
import logoBbc from "@/images/logos/bbc.svg"
import logoCbs from "@/images/logos/cbs.svg"
import logoFastCompany from "@/images/logos/fast-company.svg"
import logoHuffpost from "@/images/logos/huffpost.svg"
import clsx from "clsx"
const stats = [
{ id: 1, name: 'Raised in sponsorship.', value: '7M+' },
{ id: 2, name: 'Views from educational partners.', value: '3B+' },
{ id: 3, name: 'Users deployed.', value: '300K' },
{ id: 4, name: 'Revenues paid to NGOs', value: '$70M' },
]
export default function Tractions() {
return (
<div className="relative bg-white py-12">
<div className="mx-auto grid max-w-7xl lg:grid-cols-2">
{/* LEFT IMAGE + LOGO */}
<div className="flex flex-col items-center lg:items-start gap-8 px-6 pb-12 lg:px-8">
<div className="w-full ring-1 ring-black/15 rounded-3xl overflow-hidden max-lg:rounded-t-4xl lg:rounded-tl-4xl">
<Image
alt=""
src={Traction}
className="aspect-[3/2] object-cover w-full h-auto"
/>
</div>
<div className="w-full pr-6 lg:pr-12">
<ul
role="list"
className="mt-6 flex flex-wrap justify-center gap-x-10 gap-y-8 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 w-auto" unoptimized />
</li>
))}
</ul>
</div>
</div>
{/* RIGHT TEXT BLOCK */}
<div className="px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:mr-0 lg:max-w-lg">
<h2 className="text-base/8 font-semibold text-gray-900">Our track record</h2>
<p className="mt-2 text-4xl font-medium tracking-tight text-gray-900 sm:text-5xl">
Trusted by thousands of creators worldwide
</p>
<p className="mt-6 lg:text-lg text-base text-gray-600">
Engage OS powers the digital headquarters for over 300,000 users across 50+ countries. From grassroots NGOs to global movements, our platform is built to scale impact, not just numbers.
</p>
<dl className="mt-16 grid max-w-xl grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 xl:mt-16">
{stats.map((stat) => (
<div key={stat.id} className="flex flex-col gap-y-3 border-l border-gray-900/10 pl-6">
<dt className="text-sm/6 text-gray-600">{stat.name}</dt>
<dd className="order-first text-3xl font-semibold tracking-tight text-gray-900">{stat.value}</dd>
</div>
))}
</dl>
</div>
</div>
</div>
</div>
)
}