+
- {hasError &&
{error}
}
+ {hasError && (
+
+ {error}
+
+ )}
)
diff --git a/frontend/src/components/skeletons/SponsorsSkeleton.tsx b/frontend/src/components/skeletons/SponsorsSkeleton.tsx
new file mode 100644
index 0000000000..557d060628
--- /dev/null
+++ b/frontend/src/components/skeletons/SponsorsSkeleton.tsx
@@ -0,0 +1,93 @@
+import { Skeleton } from '@heroui/skeleton'
+
+const SponsorsSkeleton = () => {
+ return (
+
+
+
+
+
+ {[1, 2].map((tierIdx) => (
+
+
+
+
+
+
+ {Array.from({ length: tierIdx === 1 ? 2 : 3 }).map((_, i) => (
+
+
+
+ {tierIdx === 1 && (
+ <>
+
+
+
+ )}
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {[1, 2, 3].map((i) => (
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {[1, 2, 3].map((i) => (
+
+
+
+ ))}
+
+
+
+ )
+}
+
+export default SponsorsSkeleton
diff --git a/frontend/src/components/sponsors/BecomeSponsorCTA.tsx b/frontend/src/components/sponsors/BecomeSponsorCTA.tsx
new file mode 100644
index 0000000000..39223b6d55
--- /dev/null
+++ b/frontend/src/components/sponsors/BecomeSponsorCTA.tsx
@@ -0,0 +1,49 @@
+import Link from 'next/link'
+import { OWASP_NEST_DONATE_URL } from 'utils/constants'
+
+export default function BecomeSponsorCTA() {
+ return (
+
+
+
+
+ Corporate sponsorship
+
+
+ Your organization can appear here. Applications are reviewed by the OWASP Nest team.
+
+
+ Apply to sponsor
+
+ →
+
+
+
+
+
+
+ One-time donation
+
+
+ Support Nest and OWASP with a single gift through the Foundation — no sponsorship
+ application required.
+
+
+ Donate once
+
+ →
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/components/sponsors/SponsorApplicationForm.tsx b/frontend/src/components/sponsors/SponsorApplicationForm.tsx
new file mode 100644
index 0000000000..f404096432
--- /dev/null
+++ b/frontend/src/components/sponsors/SponsorApplicationForm.tsx
@@ -0,0 +1,285 @@
+'use client'
+
+import Link from 'next/link'
+import type React from 'react'
+import { useCallback, useState } from 'react'
+import { FaCheckCircle } from 'react-icons/fa'
+import { OWASP_NEST_SLACK_CHANNEL_URL } from 'utils/constants'
+import { FormButtons } from 'components/forms/shared/FormButtons'
+import { FormTextarea } from 'components/forms/shared/FormTextarea'
+import { FormTextInput } from 'components/forms/shared/FormTextInput'
+
+interface FormState {
+ organizationName: string
+ website: string
+ contactEmail: string
+ message: string
+}
+
+interface TouchedState {
+ organizationName: boolean
+ website: boolean
+ contactEmail: boolean
+ message: boolean
+}
+
+const initialFormState: FormState = {
+ organizationName: '',
+ website: '',
+ contactEmail: '',
+ message: '',
+}
+
+const initialTouchedState: TouchedState = {
+ organizationName: false,
+ website: false,
+ contactEmail: false,
+ message: false,
+}
+
+function isProbablyEmail(value: string): boolean {
+ // Keep it linear-time to avoid regex backtracking warnings.
+ const email = value.trim()
+ if (!email || email.includes(' ') || email.length > 254) return false
+ //check valid email address
+ const at = email.indexOf('@')
+ if (at <= 0 || at !== email.lastIndexOf('@') || at === email.length - 1) return false
+
+ const domain = email.slice(at + 1)
+ const dot = domain.indexOf('.')
+ if (dot <= 0 || dot === domain.length - 1) return false
+
+ return true
+}
+
+function isHttpUrl(value: string): boolean {
+ const raw = value.trim()
+ if (!raw) return false
+
+ try {
+ const url = new URL(raw)
+ return url.protocol === 'http:' || url.protocol === 'https:'
+ } catch {
+ return false
+ }
+}
+
+function validate(form: FormState) {
+ const errors: Partial
> = {}
+
+ if (!form.organizationName.trim()) {
+ errors.organizationName = 'Organization name is required'
+ }
+
+ if (!form.contactEmail.trim()) {
+ errors.contactEmail = 'Contact email is required'
+ } else if (!isProbablyEmail(form.contactEmail)) {
+ errors.contactEmail = 'Enter a valid email address'
+ }
+
+ if (form.website && !isHttpUrl(form.website)) {
+ errors.website = 'Enter a valid URL (e.g., https://example.com)'
+ }
+
+ return errors
+}
+
+export default function SponsorApplicationForm() {
+ const [form, setForm] = useState(initialFormState)
+ const [touched, setTouched] = useState(initialTouchedState)
+ const [submitted, setSubmitted] = useState(false)
+ const [loading, setLoading] = useState(false)
+ const [serverError, setServerError] = useState(null)
+
+ const errors = validate(form)
+
+ const handleFieldChange = useCallback(
+ (field: keyof FormState) => (value: string) => {
+ setForm((prev) => ({ ...prev, [field]: value }))
+ },
+ []
+ )
+
+ const handleBlur = useCallback(
+ (field: keyof FormState) => () => {
+ setTouched((prev) => ({ ...prev, [field]: true }))
+ },
+ []
+ )
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+
+ setTouched({
+ organizationName: true,
+ website: true,
+ contactEmail: true,
+ message: true,
+ })
+
+ const fd = new FormData(e.currentTarget)
+ const current: FormState = {
+ organizationName: String(fd.get('organizationName') ?? ''),
+ website: String(fd.get('website') ?? ''),
+ contactEmail: String(fd.get('contactEmail') ?? ''),
+ message: String(fd.get('message') ?? ''),
+ }
+ setForm(current)
+
+ if (Object.keys(validate(current)).length > 0) {
+ return
+ }
+
+ setLoading(true)
+ setServerError(null)
+
+ try {
+ const res = await fetch('/api/v0/sponsors/apply', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(
+ Object.fromEntries([
+ ['organization_name', current.organizationName.trim()],
+ ['website', current.website.trim()],
+ ['contact_email', current.contactEmail.trim()],
+ ['message', current.message.trim()],
+ ])
+ ),
+ })
+
+ if (res.ok) {
+ setSubmitted(true)
+ } else {
+ const data = (await res.json()) as { message?: string }
+ setServerError(data.message ?? 'Something went wrong. Please try again.')
+ }
+ } catch {
+ setServerError('Could not reach the server. Please try again later.')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ if (submitted) {
+ return (
+
+
+
+
+ Application received
+
+
+ Thanks for your interest in sponsoring OWASP Nest. The team will review your application
+ and follow up via the email you provided.
+
+
+ Want to introduce yourself sooner? Reach out in{' '}
+
+ #project-nest
+ {' '}
+ on Slack.
+
+
+
+ ← Back to sponsors
+
+
+
+
+ Required fields are marked. The Nest team reviews applications via Django Admin and will
+ follow up by email.
+
+
+ {serverError && (
+
+ {serverError}
+
+ )}
+
+
+
+ )
+}
diff --git a/frontend/src/components/sponsors/SponsorApplyHero.tsx b/frontend/src/components/sponsors/SponsorApplyHero.tsx
new file mode 100644
index 0000000000..6e95bcf5ff
--- /dev/null
+++ b/frontend/src/components/sponsors/SponsorApplyHero.tsx
@@ -0,0 +1,22 @@
+import Link from 'next/link'
+
+export default function SponsorApplyHero() {
+ return (
+
+ )
+}
diff --git a/frontend/src/components/sponsors/SponsorDiamondCard.tsx b/frontend/src/components/sponsors/SponsorDiamondCard.tsx
new file mode 100644
index 0000000000..249dafd65e
--- /dev/null
+++ b/frontend/src/components/sponsors/SponsorDiamondCard.tsx
@@ -0,0 +1,49 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import type { SponsorData } from 'types/sponsor'
+
+const DIAMOND_MOTTO_FALLBACK = 'Security for everyone, built in the open.'
+
+interface SponsorDiamondCardProps {
+ sponsor: SponsorData
+}
+
+export default function SponsorDiamondCard({ sponsor }: SponsorDiamondCardProps) {
+ const mottoAside = sponsor.motto?.trim() || DIAMOND_MOTTO_FALLBACK
+
+ const logoInner = sponsor.imageUrl ? (
+
+ ) : (
+ Logo
+ )
+
+ return (
+
+
+
+ {logoInner}
+
+
+
+ {sponsor.name}
+
+
+ “{mottoAside}”
+
+
+
+ Community Support
+
+
+ Organizations powering OWASP Nest
+
+
+ These organizations invest in open, secure software for everyone.
+
+
+ Their support keeps OWASP Nest free, open source, and community-driven.
+
+
+
+ )
+}
diff --git a/frontend/src/components/sponsors/SponsorTierCard.tsx b/frontend/src/components/sponsors/SponsorTierCard.tsx
new file mode 100644
index 0000000000..8150281b44
--- /dev/null
+++ b/frontend/src/components/sponsors/SponsorTierCard.tsx
@@ -0,0 +1,72 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import type { SponsorData, SponsorTier } from 'types/sponsor'
+
+import SponsorDiamondCard from 'components/sponsors/SponsorDiamondCard'
+
+interface SponsorTierCardProps {
+ sponsor: SponsorData
+ size: 'lg' | 'md' | 'sm'
+ tier: SponsorTier
+}
+
+const tileBase =
+ 'group flex flex-col items-center rounded-lg bg-gray-200 text-center outline-none transition-all duration-300 hover:bg-blue-100 focus-visible:ring-2 focus-visible:ring-gray-900/25 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus-visible:ring-gray-300/35 dark:focus-visible:ring-offset-[#212529]'
+
+const sizeMap = {
+ lg: {
+ padding: 'px-5 py-8 sm:py-10',
+ logoArea: 'min-h-[5.75rem] sm:min-h-[6.75rem]',
+ nameClass: 'text-base font-semibold sm:text-lg',
+ img: { w: 200, h: 80 },
+ },
+ md: {
+ padding: 'px-4 py-7 sm:py-8',
+ logoArea: 'min-h-[4.75rem] sm:min-h-[5.25rem]',
+ nameClass: 'text-sm font-semibold sm:text-base',
+ img: { w: 160, h: 64 },
+ },
+ sm: {
+ padding: 'px-3 py-5 sm:py-6',
+ logoArea: 'min-h-[3.75rem] sm:min-h-16',
+ nameClass: 'text-xs font-semibold sm:text-sm',
+ img: { w: 120, h: 48 },
+ },
+} as const
+
+export default function SponsorTierCard({ sponsor, size, tier }: SponsorTierCardProps) {
+ if (tier === 'diamond') {
+ return
+ }
+
+ const s = sizeMap[size]
+
+ return (
+
+
+ {sponsor.imageUrl ? (
+
+ ) : (
+ Logo
+ )}
+
+
+ {sponsor.name}
+
+
+ )
+}
diff --git a/frontend/src/components/sponsors/SponsorTierSection.tsx b/frontend/src/components/sponsors/SponsorTierSection.tsx
new file mode 100644
index 0000000000..6d91a68cb1
--- /dev/null
+++ b/frontend/src/components/sponsors/SponsorTierSection.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import { useState } from 'react'
+import type { SponsorData, SponsorTier } from 'types/sponsor'
+import { TIER_LABEL } from 'types/sponsor'
+
+import SponsorTierCard from 'components/sponsors/SponsorTierCard'
+
+interface SponsorTierSectionProps {
+ tier: SponsorTier
+ sponsors: SponsorData[]
+}
+
+const TIER_GRID: Record = {
+ diamond: { cols: 'grid-cols-1', size: 'lg' },
+ platinum: { cols: 'grid-cols-1 sm:grid-cols-2', size: 'lg' },
+ gold: { cols: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3', size: 'md' },
+ silver: { cols: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4', size: 'sm' },
+ supporter: { cols: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4', size: 'sm' },
+}
+
+const tierHeadingId = (tier: SponsorTier) => `sponsors-tier-${tier}`
+
+export default function SponsorTierSection({ tier, sponsors }: SponsorTierSectionProps) {
+ const [isExpanded, setIsExpanded] = useState(false)
+
+ if (sponsors.length === 0) return null
+
+ const sortedSponsors = [...sponsors].sort((a, b) => a.name.localeCompare(b.name))
+ const { cols, size } = TIER_GRID[tier]
+ const label = TIER_LABEL[tier]
+
+ const isSupporter = tier === 'supporter'
+ const maxItems = 8
+ const hasMore = isSupporter && sortedSponsors.length > maxItems
+ const visibleSponsors =
+ hasMore && !isExpanded ? sortedSponsors.slice(0, maxItems) : sortedSponsors
+
+ return (
+
+
+
+ {label}
+
+
+ {label} sponsors
+
+
+ {visibleSponsors.map((sponsor) => (
+
+ ))}
+
+
+ {hasMore && (
+
+
+
+ {FAQ.map(({ q, a }) => (
+
+
+ {q}
+
+
+
+ {a}
+
+
+ ))}
+
+ {SHOWCASE.map(({ badge, title, description, href, cta, external, icon: Icon }) => {
+ const inner = (
+ <>
+
+
+
+
+
+ {badge}
+
+
+
{title}
+
+ {description}
+
+
+ {cta}
+
+ ›
+
+
+
+ )
+
+ const cardClass =
+ 'flex h-full flex-col rounded-2xl bg-gray-50 p-6 transition-colors hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 sm:p-7'
+
+ if (external) {
+ return (
+
+ {inner}
+
+ )
+ }
+
+ return (
+
+ {inner}
+
+ )
+ })}
+