Skip to content

feat(marketing): redesign hero section with Linear-style stacked layout #1452

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 12 commits into from
Feb 16, 2026
Merged

feat(marketing): redesign hero section with Linear-style stacked layout #1452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f914dfa
Mockup improvement
Kitenite Feb 12, 2026
db451b2
Beauty
Kitenite Feb 12, 2026
c0c0b65
Mockup
Kitenite Feb 13, 2026
4c40003
Merge remote-tracking branch 'origin' into kitenite/hero-cleanup
Kitenite Feb 16, 2026
0437b2d
UX
Kitenite Feb 16, 2026
ae46a70
Border
Kitenite Feb 16, 2026
3f9872c
UI
Kitenite Feb 16, 2026
fbcb0a7
Lint
Kitenite Feb 16, 2026
735ddba
Merge remote-tracking branch 'origin' into kitenite/hero-cleanup
Kitenite Feb 16, 2026
74fe593
upgrade
Kitenite Feb 16, 2026
1259074
Clean up
Kitenite Feb 16, 2026
da04af9
no biome
Kitenite Feb 16, 2026
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
107 changes: 56 additions & 51 deletions apps/marketing/src/app/components/HeroSection/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
"use client";

import { COMPANY } from "@superset/shared/constants";
import { useState } from "react";
import { useScroll } from "framer-motion";
import { useRef, useState } from "react";
import { FaGithub } from "react-icons/fa";
import { DownloadButton } from "../DownloadButton";
import { WaitlistModal } from "../WaitlistModal";
Expand All @@ -10,64 +11,68 @@ import { TypewriterText } from "./components/TypewriterText";

export function HeroSection() {
const [isWaitlistOpen, setIsWaitlistOpen] = useState(false);
const demoRef = useRef<HTMLDivElement>(null);

const { scrollYProgress } = useScroll({
target: demoRef,
offset: ["start 0.45", "start 0"],
});

return (
<div>
<div className="flex mt-14 min-h-[calc(100svh-64px)] items-center -translate-y-12 overflow-hidden">
<div className="relative w-full max-w-[1600px] mx-auto px-4 sm:px-8 lg:px-[30px] py-8 sm:py-12 lg:py-16">
<div className="grid grid-cols-1 lg:grid-cols-[2fr_3fr] gap-8 lg:gap-16 items-center">
<div className="space-y-6 sm:space-y-8">
<div className="space-y-2 sm:space-y-6">
<h1
className="text-3xl sm:text-4xl lg:text-5xl font-normal tracking-normal leading-[1.3em] text-foreground relative"
style={{ fontFamily: "var(--font-ibm-plex-mono)" }}
>
<span className="invisible" aria-hidden="true">
The Terminal for Coding Agents.
</span>
<span className="absolute inset-0">
<TypewriterText
segments={[
{ text: "The Terminal for " },
{
text: "Coding Agents",
style: {
fontFamily: "var(--font-geist-pixel-grid)",
},
<div className="flex flex-col items-center pt-24 sm:pt-32 lg:pt-40 overflow-hidden">
<div className="relative w-full max-w-[1600px] mx-auto px-4 sm:px-8 lg:px-[30px]">
<div className="flex flex-col items-center text-center">
<div className="space-y-4 sm:space-y-6">
<h1
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-medium tracking-tight leading-[1.1] text-foreground relative"
style={{ fontFamily: "var(--font-ibm-plex-mono)" }}
>
<span className="invisible" aria-hidden="true">
The Code Editor for AI Agents.
</span>
<span className="absolute inset-0">
<TypewriterText
segments={[
{ text: "The Code Editor for " },
{
text: "AI Agents.",
style: {
fontFamily: "var(--font-geist-pixel-grid)",
},
{ text: "." },
]}
speed={40}
delay={600}
/>
</span>
</h1>
<p className="text-base sm:text-xl font-light text-muted-foreground max-w-[400px]">
Orchestrate a team of Claude Code, Codex, or any other coding
agents
</p>
</div>

<div className="flex flex-wrap items-center gap-2 sm:gap-4">
<DownloadButton
onJoinWaitlist={() => setIsWaitlistOpen(true)}
/>
<button
type="button"
className="px-4 py-2.5 sm:px-6 sm:py-3 text-sm sm:text-base font-normal bg-background border border-border text-foreground hover:bg-muted transition-colors flex items-center gap-2"
onClick={() => window.open(COMPANY.GITHUB_URL, "_blank")}
aria-label="View on GitHub"
>
View on GitHub
<FaGithub className="size-4" />
</button>
</div>
},
]}
speed={40}
delay={600}
/>
</span>
</h1>
<p className="text-base sm:text-xl font-light text-muted-foreground max-w-4xl mx-auto">
Orchestrate swarms of Claude Code, Codex, etc. in parallel.
Works for any agents. Built for the AI era.
</p>
</div>

<div className="relative w-full min-w-0">
<ProductDemo />
<div className="flex flex-wrap items-center justify-center gap-2 sm:gap-4 mt-6 sm:mt-8">
<DownloadButton onJoinWaitlist={() => setIsWaitlistOpen(true)} />
<button
type="button"
className="px-4 py-2.5 sm:px-6 sm:py-3 text-sm sm:text-base font-normal bg-background border border-border text-foreground hover:bg-muted transition-colors flex items-center gap-2"
onClick={() => window.open(COMPANY.GITHUB_URL, "_blank")}
aria-label="View on GitHub"
>
View on GitHub
<FaGithub className="size-4" />
</button>
Comment on lines +58 to +66
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Feb 13, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Use an <a> tag instead of <button> with window.open for the GitHub link.

A <button> with onClick={() => window.open(...)) loses native link behavior — middle-click to open in new tab, right-click context menu, link preview on hover, and crawler discoverability. An anchor element is semantically correct here.

🔗 Proposed fix 
-						<button
-							type="button"
-							className="px-4 py-2.5 sm:px-6 sm:py-3 text-sm sm:text-base font-normal bg-background border border-border text-foreground hover:bg-muted transition-colors flex items-center gap-2"
-							onClick={() => window.open(COMPANY.GITHUB_URL, "_blank")}
-							aria-label="View on GitHub"
-						>
-							View on GitHub
-							<FaGithub className="size-4" />
-						</button>
+						<a
+							href={COMPANY.GITHUB_URL}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="px-4 py-2.5 sm:px-6 sm:py-3 text-sm sm:text-base font-normal bg-background border border-border text-foreground hover:bg-muted transition-colors flex items-center gap-2"
+						>
+							View on GitHub
+							<FaGithub className="size-4" />
+						</a>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<button
type="button"
className="px-4 py-2.5 sm:px-6 sm:py-3 text-sm sm:text-base font-normal bg-background border border-border text-foreground hover:bg-muted transition-colors flex items-center gap-2"
onClick={() => window.open(COMPANY.GITHUB_URL, "_blank")}
aria-label="View on GitHub"
>
View on GitHub
<FaGithub className="size-4" />
</button>
<a
href={COMPANY.GITHUB_URL}
target="_blank"
rel="noopener noreferrer"
className="px-4 py-2.5 sm:px-6 sm:py-3 text-sm sm:text-base font-normal bg-background border border-border text-foreground hover:bg-muted transition-colors flex items-center gap-2"
>
View on GitHub
<FaGithub className="size-4" />
</a>
🤖 Prompt for AI Agents 
In `@apps/marketing/src/app/components/HeroSection/HeroSection.tsx` around lines
59 - 67, Replace the GitHub <button> in the HeroSection component with a
semantic <a> element that points to COMPANY.GITHUB_URL (use target="_blank" and
rel="noopener noreferrer"), keep the same className, aria-label="View on
GitHub", visible text "View on GitHub" and the <FaGithub> icon so styling and
accessibility remain identical but native link behaviors (middle-click, context
menu, crawlers) are preserved.

</div>
</div>

<div
ref={demoRef}
className="relative w-full mt-12 sm:mt-16 lg:mt-20"
>
<ProductDemo scrollYProgress={scrollYProgress} />
</div>
</div>
</div>
<WaitlistModal
Expand Down
Loading
Loading