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

edit

Browse Source
This commit is contained in:
sasha-astiadi
2025-06-11 12:17:18 +02:00
parent 7b8c831970
commit 406f7e07ae
53 changed files with 1361 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@ import { AnimatedNumber } from '@/components/animated-number'
import { Button } from '@/components/button'
import { Container } from '@/components/container'
import { Footer } from '@/components/footer'
import { GradientBackground } from '@/components/gradient'
import { GradientLight } from '@/components/gradient'
import { Navbar } from '@/components/navbar'
import { Heading, Lead, Subheading } from '@/components/text'
import type { Metadata } from 'next'
@@ -457,7 +457,7 @@ function Careers() {
export default function Company() {
return (
<main className="overflow-hidden">
<GradientBackground />
<GradientLight />
<Container>
<Navbar />
</Container>

30
src/app/page.tsx
View File

@@ -199,9 +199,9 @@ function DarkBentoSection() {
function CTA() {
return (
<div className="bg-white ">
<div className="px-6 pt-24 pb-32 sm:px-6 lg:px-8 ">
<div className="mx-auto max-w-3xl text-center">
<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>
@@ -215,6 +215,30 @@ function CTA() {
</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>
)

7
src/components/featuredtestimonial.tsx
View File

@@ -1,4 +1,5 @@
import { clsx } from 'clsx'
import { Heading, Subheading } from '@/components/text'
const featuredTestimonial = {
body: 'Indaba changed the way I look at education. It made me realize that learning isn\'t about memorization, it\'s about becoming a better version of myself every day.',
@@ -81,12 +82,14 @@ export default function Example() {
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%)',
}}
className="ml-[max(50%,38rem)] aspect-1313/771 w-328.25 bg-linear-to-tr from-[#ff80b5] to-[#9089fc]"
className="ml-[max(50%,38rem)] aspect-1313/771 w-328.25 bg-linear-to-tr from-[#8d80ff] to-[#9089fc]"
/>
</div>
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-base/7 font-semibold text-indigo-600">Testimonials</h2>
<Subheading>Testimonials</Subheading>
<p className="mt-2 text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
Voices from Our Community
</p>

14
src/components/gradient.tsx
View File

@@ -28,3 +28,17 @@ export function GradientBackground() {
</div>
)
}
export function GradientLight() {
return (
<div className="relative mx-auto max-w-7xl">
<div
className={clsx(
'absolute -top-44 -right-60 h-60 w-xl transform-gpu md:right-0',
'bg-linear-145 from-[#b79fff] from-10% via-[#a28aff] via-50% to-[#a983fb] to-90%',
'rotate-[-10deg] rounded-full blur-3xl',
)}
/>
</div>
)
}

2
src/components/indabaos.tsx
View File

@@ -15,7 +15,7 @@ export function IndabaOs() {
return (
<div className="pt-24 pb-24">
<div className="mx-auto max-w-7xl h-3/4 px-6 lg:px-8">
<div className="relative isolate overflow-hidden bg-white px-6 py-24 lg:py-45 lg:px-8 rounded-2xl min-h-[700px]">
<div className="relative isolate overflow-hidden bg-white px-6 py-24 lg:pt-45 lg:pb-32 lg:px-8 rounded-2xl min-h-[700px]">
{/* Background image */}
<img
alt=""

6
src/components/logo.tsx
View File

@@ -2,7 +2,7 @@
import { clsx } from 'clsx'
export function Logo({ className }: { className?: string }) {
export function Logo({ className, color = "white" }: { className?: string, color?: "white" | "black" }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -18,12 +18,12 @@ export function Logo({ className }: { className?: string }) {
</defs>
<g id="9d38f3e9c1">
<path
fill="#fff"
fill={color}
d="M42.875 8.182v12.672h-2.687V8.182ZM47.668 15.354v5.5h-2.64v-9.5h2.515v1.672h.11c.219-.55.57-.988 1.062-1.312.489-.32 1.086-.485 1.797-.485q1.483.002 2.375.953.904.956.906 2.625v6.047h-2.64v-5.578q.013-.873-.438-1.36c-.304-.331-.718-.5-1.25-.5-.53 0-.965.173-1.297.516q-.501.503-.5 1.422M59.36 21.01a3.53 3.53 0 0 1-1.954-.562q-.877-.562-1.39-1.656-.502-1.09-.5-2.672 0-1.64.515-2.719.527-1.09 1.406-1.625a3.6 3.6 0 0 1 1.922-.547q.797.001 1.328.266.547.268.875.672c.22.262.383.523.5.781h.079V8.182h2.625v12.672h-2.594V19.34h-.11q-.176.393-.515.78-.347.377-.875.642-.534.248-1.313.25m.843-2.093q.951.001 1.469-.766c.351-.52.531-1.203.531-2.047 0-.851-.18-1.53-.531-2.03q-.518-.75-1.469-.75-.984 0-1.5.78-.502.769-.5 2 0 1.236.516 2.032c.343.523.836.78 1.484.78M69.645 21.026c-.907 0-1.665-.234-2.266-.703q-.89-.717-.89-2.125c0-.707.163-1.266.5-1.672q.497-.61 1.312-.89a7.2 7.2 0 0 1 1.75-.36q1.231-.122 1.765-.25.546-.14.547-.61v-.03q0-.591-.375-.907-.376-.328-1.047-.328-.702.001-1.125.313a1.5 1.5 0 0 0-.562.78l-2.438-.202a3.25 3.25 0 0 1 1.36-2.047c.719-.508 1.644-.766 2.781-.766a5.7 5.7 0 0 1 1.984.344q.922.329 1.485 1.031.562.706.562 1.844v6.406h-2.5v-1.312h-.062a2.9 2.9 0 0 1-1.047 1.078q-.692.405-1.734.406m.75-1.812q.857.002 1.421-.5.563-.499.563-1.25v-1.016q-.158.111-.484.188a8 8 0 0 1-.704.14 9 9 0 0 1-.64.094q-.703.111-1.125.406-.422.282-.422.844 0 .532.39.812c.258.188.594.282 1 .282M77.08 20.854V8.182h2.641v4.766h.078q.188-.388.516-.781.327-.404.86-.672.543-.265 1.327-.266a3.6 3.6 0 0 1 1.922.547q.873.535 1.406 1.625.53 1.078.532 2.719 0 1.582-.516 2.672-.517 1.094-1.39 1.656a3.54 3.54 0 0 1-1.954.563q-.767-.002-1.312-.25a2.9 2.9 0 0 1-.875-.641 3.6 3.6 0 0 1-.516-.781h-.11v1.515Zm2.594-4.75q0 1.267.516 2.047c.351.512.844.766 1.469.766.656 0 1.148-.258 1.484-.781q.516-.796.516-2.032 0-1.231-.516-2-.502-.78-1.484-.78-.954 0-1.47.75-.515.752-.515 2.03M90.819 21.026c-.906 0-1.664-.234-2.266-.703q-.89-.717-.89-2.125-.002-1.062.5-1.672.498-.61 1.312-.89a7.2 7.2 0 0 1 1.75-.36q1.231-.122 1.766-.25.546-.14.547-.61v-.03q0-.591-.375-.907c-.25-.218-.602-.328-1.047-.328q-.704.001-1.125.313a1.5 1.5 0 0 0-.563.78l-2.437-.202a3.25 3.25 0 0 1 1.359-2.047c.719-.508 1.645-.766 2.781-.766a5.7 5.7 0 0 1 1.985.344q.92.329 1.484 1.031.563.706.563 1.844v6.406h-2.5v-1.312H93.6a2.9 2.9 0 0 1-1.047 1.078q-.69.405-1.734.406m.75-1.812c.57 0 1.047-.164 1.422-.5q.562-.499.562-1.25v-1.016q-.156.111-.484.188a8 8 0 0 1-.703.14 9 9 0 0 1-.641.094q-.703.111-1.125.406-.422.282-.422.844 0 .532.39.812.39.282 1 .282m0 0"
></path>
<g clipPath="url(#720dd75892)">
<path
fill="#fff"
fill={color}
d="M11.18 8.523c-.883-2.132.11-4.574.11-4.574s2.425 1.024 3.312 3.16c.882 2.133.835 4.184-.11 4.575-.945.39-2.426-1.024-3.312-3.16M8.21 13.5c2.134.883 4.185.836 4.575-.11.39-.945-1.023-2.425-3.16-3.308-2.133-.887-4.574.105-4.574.105s1.023 2.426 3.16 3.313m1.415 5.617c2.137-.887 3.55-2.367 3.16-3.312-.39-.946-2.441-.989-4.574-.11-2.137.887-3.16 3.313-3.16 3.313s2.441.992 4.574.11m4.867-1.605c-.945-.39-2.426 1.023-3.312 3.16-.883 2.133.11 4.574.11 4.574s2.425-1.023 3.312-3.156c.878-2.137.835-4.184-.11-4.578m2.414 0c-.945.39-.988 2.441-.11 4.578.888 2.133 3.313 3.156 3.313 3.156s.989-2.441.11-4.574c-.887-2.133-2.367-3.55-3.313-3.16m6.282-1.813c-2.133-.883-4.184-.836-4.575.11-.39.945 1.024 2.425 3.16 3.312 2.133.883 4.575-.11 4.575-.11s-1.024-2.429-3.16-3.312m-1.41-5.617c-2.137.883-3.551 2.363-3.16 3.309.39.945 2.44.988 4.573.109 2.137-.887 3.16-3.312 3.16-3.312s-2.44-.993-4.574-.106m1.652-1.414c.41-1.18.418-2.219.418-2.219s-1.043.008-2.22.422a6.1 6.1 0 0 1-.44 2.059 8 8 0 0 1-.137.32q.156-.072.32-.137a5.8 5.8 0 0 1 2.059-.445m.164 5.8c-.106.048-.215.087-.324.13q.164.06.324.125a6.1 6.1 0 0 1 1.77 1.144 7.9 7.9 0 0 0 1.866-1.27s-.742-.734-1.867-1.277a6.1 6.1 0 0 1-1.77 1.149m-5.328.134a1.93 1.93 0 0 1-.621-.805 1.97 1.97 0 0 1-.13-1.012q-.135.019-.269.02-.389-.001-.742-.149a1.9 1.9 0 0 1-.8-.62 1.94 1.94 0 0 1-1.817.75c.054.429-.035.777-.13 1.01-.093.235-.277.54-.62.806.343.261.527.566.62.8.098.23.184.582.13 1.012a2.1 2.1 0 0 1 1.011.129c.23.094.54.277.805.621a1.91 1.91 0 0 1 1.543-.766c.09 0 .176.004.27.016-.055-.43.035-.777.129-1.012.093-.234.277-.539.62-.8m-10.457.125q.158-.066.324-.125c-.11-.043-.219-.082-.324-.13a6.1 6.1 0 0 1-1.77-1.144c-1.125.54-1.867 1.274-1.867 1.274s.742.73 1.867 1.273a6 6 0 0 1 1.77-1.148M21.37 20.09c-.11-.043-.21-.09-.32-.137q.072.158.137.32c.285.688.41 1.395.44 2.059 1.18.41 2.224.418 2.224.418s-.008-1.043-.418-2.219a6.1 6.1 0 0 1-2.063-.441M7.97 20.53a7.5 7.5 0 0 0-.418 2.219s1.043-.008 2.222-.422a6 6 0 0 1 .438-2.058c.043-.11.09-.211.137-.32q-.155.07-.32.136a6 6 0 0 1-2.06.445m7.734 1.637c-.043.11-.082.219-.129.324a6.1 6.1 0 0 1-1.144 1.77 7.8 7.8 0 0 0 1.273 1.867s.73-.742 1.274-1.867a6 6 0 0 1-1.145-1.77c-.05-.105-.09-.215-.129-.324M10.027 9.105q.164.066.32.137a6 6 0 0 1-.136-.32 6 6 0 0 1-.438-2.059c-1.18-.414-2.222-.422-2.222-.422s.008 1.043.418 2.223a6.1 6.1 0 0 1 2.058.441M15.7 7.031q.06-.165.125-.324a6.1 6.1 0 0 1 1.145-1.77c-.54-1.125-1.266-1.867-1.266-1.867s-.734.743-1.277 1.868c.449.492.863 1.082 1.144 1.769q.07.16.13.324m1.207 4.653c.946.39 2.426-1.024 3.313-3.16.883-2.133-.11-4.575-.11-4.575s-2.425 1.024-3.312 3.16c-.879 2.133-.832 4.184.11 4.575m0 0"
></path>
</g>

20
src/components/navbar.tsx
View File

@@ -12,20 +12,20 @@ import { Logo } from './logo'
import { PlusGrid, PlusGridItem, PlusGridRow } from './plus-grid'
const links = [
{ href: '/pricing', label: 'About' },
{ href: '/company', label: 'Projects' },
{ href: '/company', label: 'About' },
{ href: '/pricing', label: 'Projects' },
{ href: '/blog', label: 'Blog' },
{ href: '/login', label: 'Get Involved' },
]
function DesktopNav() {
function DesktopNav({ color = "white" }: { color?: "white" | "black" }) {
return (
<nav className="relative hidden lg:flex">
{links.map(({ href, label }) => (
<PlusGridItem key={href} className="relative flex">
<Link
href={href}
className="flex items-center px-4 py-3 text-base font-medium text-white bg-blend-multiply data-hover:bg-black/2.5"
className={`flex items-center px-4 py-3 text-base font-medium text-${color} bg-blend-multiply data-hover:bg-black/2.5`}
>
{label}
</Link>
@@ -46,7 +46,7 @@ function MobileNavButton() {
)
}
function MobileNav() {
function MobileNav({ color = "white" }: { color?: "white" | "black" }) {
return (
<DisclosurePanel className="lg:hidden">
<div className="flex flex-col gap-6 py-4">
@@ -61,7 +61,7 @@ function MobileNav() {
}}
key={href}
>
<Link href={href} className="text-base font-medium text-white">
<Link href={href} className={`text-base font-medium text-${color}`}>
{label}
</Link>
</motion.div>
@@ -75,7 +75,7 @@ function MobileNav() {
)
}
export function Navbar({ banner }: { banner?: React.ReactNode }) {
export function Navbar({ banner, color = "white" }: { banner?: React.ReactNode, color?: "white" | "black" }) {
return (
<Disclosure as="header" className="pt-12 sm:pt-16">
<PlusGrid>
@@ -83,7 +83,7 @@ export function Navbar({ banner }: { banner?: React.ReactNode }) {
<div className="relative flex gap-6">
<PlusGridItem className="py-3">
<Link href="/" title="Home">
<Logo className="h-9" />
<Logo className="h-9" color={color} />
</Link>
</PlusGridItem>
{banner && (
@@ -92,11 +92,11 @@ export function Navbar({ banner }: { banner?: React.ReactNode }) {
</div>
)}
</div>
<DesktopNav />
<DesktopNav color={color} />
<MobileNavButton />
</PlusGridRow>
</PlusGrid>
<MobileNav />
<MobileNav color={color} />
</Disclosure>
)
}