Skip to content

Show Featured on badges under the landing hero CTA #183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Programcode wants to merge 1 commit into from
Closed

Show Featured on badges under the landing hero CTA #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions src/components/landing/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ const Hero = () => {
</a>
</Reveal>

<FeaturedOn />

<Reveal onLoad delay={0.15} className="mt-8 grid gap-3 sm:grid-cols-3">
{planHighlights.map((item) => (
<div key={item.label} className="rounded-xl border border-border/70 bg-card p-4">
Expand All @@ -95,6 +97,42 @@ const Hero = () => {
);
};

// Launch directories check that their badge is on the homepage above the fold.
// Both themes render and CSS shows one, because the prerendered HTML can't know
// the visitor's theme. Image hosts must stay in vercel.json's img-src.
const FEATURED_BADGES = [
{
alt: "Featured on LaunchIgniter",
width: 154,
light: { href: "https://launchigniter.com/product/debatelab?ref=badge-debatelab", src: "https://launchigniter.com/api/badge/debatelab?theme=light" },
dark: { href: "https://launchigniter.com/product/debatelab?ref=badge-debatelab", src: "https://launchigniter.com/api/badge/debatelab?theme=dark" },
},
{
alt: "Launched on StartupBase",
width: 150,
light: { href: "https://startupbase.io/products/debatelab?utm_source=startupbase&utm_medium=badge&utm_campaign=launch-badge-light", src: "https://statics.startupbase.io/site/badges/launched-on-sb.svg" },
dark: { href: "https://startupbase.io/products/debatelab?utm_source=startupbase&utm_medium=badge&utm_campaign=launch-badge-dark", src: "https://statics.startupbase.io/site/badges/launched-on-sb-dark.svg" },
},
];

const FeaturedOn = () => (
<Reveal onLoad delay={0.15} className="mt-5">
<div data-featured-on className="flex flex-wrap items-center gap-3">
{FEATURED_BADGES.flatMap((badge) => (["light", "dark"] as const).map((theme) => (
<a
key={badge[theme].src}
href={badge[theme].href}
target="_blank"
rel="noopener noreferrer"
className={`${theme === "light" ? "dark:hidden" : "hidden dark:block"} rounded-lg opacity-90 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
>
<img src={badge[theme].src} alt={badge.alt} width={badge.width} height={40} loading="eager" className="h-10 w-auto" />
</a>
)))}
</div>
</Reveal>
);

const HeroPreview = () => {
const { t } = useTranslation();
type DemoMode = "generate" | "crossfire" | "sparring";
Expand Down
2 changes: 1 addition & 1 deletion vercel.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@
"headers": [
{
"key": "Content-Security-Policy",
"value": "default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'none'; form-action 'self'; img-src 'self' data: blob: https://*.jam.dev; font-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' https://*.jam.dev; worker-src 'self' blob:; frame-src 'self' https://accounts.google.com https://*.jam.dev; connect-src 'self' https://*.jam.dev https://uziwdtkzofptihahfooo.supabase.co https://brifeyypjauyusmkptkx.supabase.co https://*.ingest.sentry.io https://*.sentry.io https://eu.i.posthog.com https://*.posthog.com;"
"value": "default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'none'; form-action 'self'; img-src 'self' data: blob: https://*.jam.dev https://launchigniter.com https://statics.startupbase.io; font-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' https://*.jam.dev; worker-src 'self' blob:; frame-src 'self' https://accounts.google.com https://*.jam.dev; connect-src 'self' https://*.jam.dev https://uziwdtkzofptihahfooo.supabase.co https://brifeyypjauyusmkptkx.supabase.co https://*.ingest.sentry.io https://*.sentry.io https://eu.i.posthog.com https://*.posthog.com;"
},
{
"key": "X-Frame-Options",
Expand Down
Loading