Skip to content

feat(marketing): full-screen footer with globe grid and closing CTA #9179

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

Merged
Kitenite merged 1 commit into from
Oct 31, 2026
Merged

feat(marketing): full-screen footer with globe grid and closing CTA #9179

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
2 changes: 0 additions & 2 deletions apps/marketing/src/app/[lang]/automations/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { getI18nInstance } from "@superset/i18n/server";
import { COMPANY, SOCIAL } from "@superset/shared/constants";
import { ArrowUpRight } from "lucide-react";
import type { Metadata } from "next";
import { CTASection } from "@/app/[lang]/components/CTASection";
import { ProductHeroActions } from "@/app/[lang]/components/ProductHeroActions";
import { localizedAlternates } from "@/app/[lang]/metadata";
import { initServerI18n } from "@/app/i18n-server";
Expand Down Expand Up @@ -109,7 +108,6 @@ export default async function AutomationsPage() {

<AutomationsFAQ />
</main>
<CTASection />
</div>
);
}
2 changes: 0 additions & 2 deletions apps/marketing/src/app/[lang]/browser/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { msg } from "@lingui/core/macro";
import { Trans, useLingui } from "@lingui/react/macro";
import { getI18nInstance } from "@superset/i18n/server";
import type { Metadata } from "next";
import { CTASection } from "@/app/[lang]/components/CTASection";
import { ProductHeroActions } from "@/app/[lang]/components/ProductHeroActions";
import { localizedAlternates } from "@/app/[lang]/metadata";
import { initServerI18n } from "@/app/i18n-server";
Expand Down Expand Up @@ -93,7 +92,6 @@ export default async function BrowserPage() {
<AgentDrive />
</section>
</main>
<CTASection />
</div>
);
}
80 changes: 0 additions & 80 deletions ...rketing/src/app/[lang]/components/CTASection/components/InstallCommand/InstallCommand.tsx
View file
Open in desktop

This file was deleted.

31 changes: 0 additions & 31 deletions apps/marketing/src/app/[lang]/components/CTASection/components/InstallCommand/constants.ts
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion apps/marketing/src/app/[lang]/components/CTASection/components/InstallCommand/index.ts
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion apps/marketing/src/app/[lang]/components/EdgeGlare/EdgeGlare.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import type { CSSProperties } from "react";
import { useRef } from "react";
import { usePointerVars } from "./hooks/usePointerVars";
import { usePointerVars } from "@/app/[lang]/hooks/usePointerVars";

type Edges = "ring" | "horizontal";

Expand Down
70 changes: 56 additions & 14 deletions apps/marketing/src/app/[lang]/components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,19 @@ import {
} from "@superset/ui/dropdown-menu";
import { m } from "framer-motion";
import { ArrowUpRight, Check, ChevronDown, Languages } from "lucide-react";
import dynamic from "next/dynamic";
import Link from "next/link";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";
import { FaApple } from "react-icons/fa";
import { track } from "@/lib/analytics";
import { Soc2Badge } from "../Soc2Badge";
import { SocialLinks } from "../SocialLinks";
import { FooterBackdrop } from "./components/FooterBackdrop";

const CTASection = dynamic(() =>
import("./components/CTASection").then((mod) => mod.CTASection),
);

function SupersetLogo() {
return (
Expand Down Expand Up @@ -192,23 +198,27 @@ export function Footer({
if (pathname === "/download") return null;

return (
<footer className="border-t border-border bg-background">
<footer className="relative isolate flex min-h-[calc(100svh-4rem)] flex-col overflow-hidden border-t border-border bg-background">

@greptile-apps greptile-apps Bot Oct 31, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Header stays above waitlist

The new isolate on the footer puts its WaitlistModal below the sticky Header. When a Windows visitor clicks “Join Waitlist,” the header stays visible and clickable above the full-screen backdrop. The modal renders directly inside the footer, so its z-50 cannot rise above the footer’s own layer. Render the modal through a portal outside the footer.

Prompt To Fix With AI 
This is a comment left during a code review.
Path: apps/marketing/src/app/[lang]/components/Footer/Footer.tsx
Line: 201

Comment:
**Header stays above waitlist**

The new `isolate` on the footer puts its `WaitlistModal` below the sticky `Header`. When a Windows visitor clicks “Join Waitlist,” the header stays visible and clickable above the full-screen backdrop. The modal renders directly inside the footer, so its `z-50` cannot rise above the footer’s own layer. Render the modal through a portal outside the footer.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

<FooterBackdrop />
<div className="flex flex-1 items-center">
<CTASection />
</div>
<m.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20"
className="mx-auto w-full max-w-7xl px-6 pb-10 sm:px-8"
>
<div className="grid grid-cols-2 gap-10 md:grid-cols-[minmax(0,1fr)_auto_auto_auto_auto] md:gap-x-16">
<div className="col-span-2 flex flex-col gap-6 md:col-span-1">
<div className="grid grid-cols-2 gap-x-10 gap-y-12 md:grid-cols-[auto_auto_auto] md:justify-between md:gap-x-16 lg:grid-cols-[minmax(0,1fr)_auto_auto_auto] xl:gap-x-20">
<div className="col-span-2 flex flex-col gap-6 md:col-span-3 md:flex-row md:items-center md:gap-10 lg:col-span-1 lg:flex-col lg:items-start lg:gap-6">
<Link
href="/"
className="inline-block text-foreground transition-colors hover:text-foreground/80"
className="inline-block w-max text-foreground transition-colors hover:text-foreground/80"
>
<SupersetLogo />
</Link>
<div className="-ml-2 flex items-center gap-2">
<div className="-ml-1 flex items-center gap-2 sm:-ml-2">
<SocialLinks />
<a
href={COMPANY.APP_STORE_URL}
Expand All @@ -234,19 +244,34 @@ export function Footer({
>
<Soc2Badge size={80} />
</a>
<p className="text-sm text-muted-foreground">
<Trans>© {year} Superset Inc.</Trans>
</p>
<FooterLanguageSwitcher locale={locale} />
</div>

<FooterColumn title={<Trans>Product</Trans>} links={PRODUCT_LINKS} />
<FooterColumn
title={<Trans>Product</Trans>}
links={PRODUCT_LINKS}
split
/>
<FooterColumn title={<Trans>Company</Trans>} links={COMPANY_LINKS} />
<FooterColumn
title={<Trans>Resources</Trans>}
links={RESOURCE_LINKS}
/>
<FooterColumn title={<Trans>Legal</Trans>} links={LEGAL_LINKS} />
</div>

<div className="mt-12 flex flex-col gap-4 border-t [@media(max-height:800px)]:mt-8 border-border pt-6 sm:flex-row sm:items-center sm:justify-between">
<div className="flex flex-wrap items-center gap-x-6 gap-y-3">
<p className="text-sm text-muted-foreground">
<Trans>© {year} Superset Inc.</Trans>
</p>
<FooterLanguageSwitcher locale={locale} />
</div>
<ul className="flex flex-wrap items-center gap-x-6 gap-y-3">
{LEGAL_LINKS.map((link) => (
<li key={link.href}>
<FooterLinkItem link={link} />
</li>
))}
</ul>
</div>
</m.div>
</footer>
Expand All @@ -256,14 +281,31 @@ export function Footer({
function FooterColumn({
title,
links,
split = false,
}: {
title: ReactNode;
links: FooterLink[];
split?: boolean;
}) {
return (
<div className="flex flex-col gap-4">
<div
className={`flex flex-col gap-4 ${split ? "col-span-2 md:col-span-1" : ""}`}
>
<p className="text-sm font-medium text-foreground">{title}</p>
<ul className="flex flex-col gap-3">
<ul
className={
split
? "grid grid-flow-col grid-cols-2 gap-x-10 gap-y-2 md:gap-x-16"
: "flex flex-col gap-2"
}
style={
split
? {
gridTemplateRows: `repeat(${Math.ceil(links.length / 2)}, auto)`,
}
: undefined
}
>
{links.map((link) => (
<li key={link.href}>
<FooterLinkItem link={link} />
Expand Down
29 changes: 8 additions & 21 deletions ...ang]/components/CTASection/CTASection.tsx → ...oter/components/CTASection/CTASection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,21 @@ import { COMPANY } from "@superset/shared/constants";
import { useState } from "react";
import { FaGithub } from "react-icons/fa";
import { track } from "@/lib/analytics";
import { DownloadButton } from "../DownloadButton";
import { WaitlistModal } from "../WaitlistModal";
import { InstallCommand } from "./components/InstallCommand";
import { DownloadButton } from "../../../DownloadButton";
import { WaitlistModal } from "../../../WaitlistModal";

interface CTASectionProps {
showInstallCommand?: boolean;
}

export function CTASection({ showInstallCommand = true }: CTASectionProps) {
export function CTASection() {
const { t } = useLingui();
const [isWaitlistOpen, setIsWaitlistOpen] = useState(false);

return (
<>
<section className="relative py-24 sm:py-32">
<section className="w-full py-14 [@media(max-height:800px)]:py-8">
<div className="max-w-7xl mx-auto px-6 sm:px-8 flex flex-col items-center text-center">
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-medium tracking-tight leading-[1.1] text-foreground mb-8">
<Trans>Bring your agents together.</Trans>
<h2 className="text-4xl sm:text-5xl lg:text-7xl lg:[@media(max-height:800px)]:text-6xl font-medium tracking-tight leading-[1.05] text-foreground mb-10 [@media(max-height:800px)]:mb-8">
<Trans comment="Footer call to action. Use the natural idiom for clearing a work backlog fast, not a literal translation of “smash”.">
Smash your backlog.
</Trans>
</h2>
<div className="flex flex-wrap items-center justify-center gap-2 sm:gap-4">
<DownloadButton
Expand All @@ -48,16 +45,6 @@ export function CTASection({ showInstallCommand = true }: CTASectionProps) {
<FaGithub className="size-4" />
</button>
</div>
{showInstallCommand && (
<>
<p className="mt-10 mb-4 text-sm text-muted-foreground">
<Trans>
Or ask your coding agent to install the Paradev CLI.
</Trans>
</p>
<InstallCommand />
</>
)}
</div>
</section>
<WaitlistModal
Expand Down
0 ...app/[lang]/components/CTASection/index.ts → ...nts/Footer/components/CTASection/index.ts
View file
Open in desktop
File renamed without changes.
Loading
Loading