ourworld_web/www_indaba
21
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add cta

Browse Source
This commit is contained in:
sasha-astiadi
2025-06-11 16:54:56 +02:00
parent 4611d325f6
commit 6246d0a256
28 changed files with 140 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/company/page.tsx
View File

@@ -129,6 +129,7 @@ function Person({
}
import { CompanyTestimonial } from '@/components/companytestimonial'
import { CTA } from '@/components/cta'
function Team() {
return (
@@ -265,6 +266,7 @@ export default function Company() {
<Ecosystem />
<Team />
<Investors />
<CTA />
<Footer />
</main>
)

47
src/app/page.tsx
View File

@@ -197,52 +197,7 @@ function DarkBentoSection() {
)
}
function CTA() {
return (
<div className="relative isolate">
<div className="px-6 py-24 sm:px-6 lg:py-32 lg:px-8 ">
<div className="mx-auto max-w-3xl text-center ">
<h2 className="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
Empower a Generation. Join the Movement.
</h2>
<p className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-600">
Help build a future where every young person can thrive — through holistic education, cultural connection, and community-led innovation.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<Button href="/get-involved">Get Involved</Button>
<Button variant="secondary" href="/contact">
Contact Us
</Button>
</div>
</div>
<div
className="absolute inset-x-0 -top-16 -z-10 transform-gpu overflow-hidden blur-3xl"
aria-hidden="true"
>
<div
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#e6d7ff] to-[#a8a2f9] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
<div
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#e6d7ff] to-[#948dfd] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}x
/>
</div>
</div>
</div>
)
}
import { CTA } from '@/components/cta'

50
src/components/cta.tsx Normal file
View File

@@ -0,0 +1,50 @@
'use client'
import { Button } from '@/components/button'
export function CTA() {
return (
<div className="relative isolate">
<div className="px-6 py-24 sm:px-6 lg:py-32 lg:px-8 ">
<div className="mx-auto max-w-3xl text-center ">
<h2 className="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
Empower a Generation. Join the Movement.
</h2>
<p className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-600">
Help build a future where every young person can thrive — through holistic education, cultural connection, and community-led innovation.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<Button href="/get-involved">Get Involved</Button>
<Button variant="secondary" href="/contact">
Contact Us
</Button>
</div>
</div>
<div
className="absolute inset-x-0 -top-16 -z-10 transform-gpu overflow-hidden blur-3xl"
aria-hidden="true"
>
<div
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#e6d7ff] to-[#a8a2f9] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
<div
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#e6d7ff] to-[#948dfd] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
</div>
</div>
)
}