Skip to content

Refresh marketing site and release pipeline #178

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
BunsDev merged 4 commits into from
Apr 1, 2026
Merged

Refresh marketing site and release pipeline #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a60a7a3
Fix marketing Vercel output config
BunsDev Apr 1, 2026
8aa0eb8
Refresh marketing site with warmer anime-inspired styling
BunsDev Apr 1, 2026
09c385c
Resolve merge conflicts with main, keep anime styling + new brand
BunsDev Apr 1, 2026
c520ac0
Update Next route typings path for marketing app
BunsDev Apr 1, 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
26 changes: 20 additions & 6 deletions apps/marketing/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

:root {
color-scheme: dark;
--radius: 0.625rem;
--radius: 1.25rem;

/* Dark-mode-only palette */
--background: color-mix(in srgb, #0a0a1a 95%, white);
Expand Down Expand Up @@ -78,9 +78,7 @@
}

@theme inline {
--font-sans:
var(--font-dm-sans), "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
sans-serif;
--font-sans: var(--font-nunito), "Nunito", "Nunito Fallback", system-ui, sans-serif;
--font-mono: "SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
--color-background: var(--background);
--color-foreground: var(--foreground);
Expand All @@ -106,10 +104,10 @@
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--radius-sm: calc(var(--radius) - 4px);
--radius-sm: calc(var(--radius) - 6px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-xl: calc(var(--radius) + 8px);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
Expand Down Expand Up @@ -147,6 +145,22 @@
background-color: var(--primary);
color: white;
}

/* Anime-cute warm styling */
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: -0.01em;
}

/* Soft hover glow for interactive elements */
button,
a {
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
}

/* Fractal noise texture overlay */
Expand Down
9 changes: 3 additions & 6 deletions apps/marketing/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import type React from "react";
import type { Metadata } from "next";
import { DM_Sans } from "next/font/google";
import { Nunito } from "next/font/google";
import { Analytics } from "@vercel/analytics/next";
import "./globals.css";

const dmSans = DM_Sans({
subsets: ["latin"],
variable: "--font-dm-sans",
});
const nunito = Nunito({ subsets: ["latin"], variable: "--font-nunito" });

export const metadata: Metadata = {
title: "OK Code — A Minimal Web GUI for Coding Agents",
Expand Down Expand Up @@ -63,7 +60,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en" className="dark">
<body className={`${dmSans.variable} font-sans antialiased`}>
<body className={`${nunito.variable} font-sans antialiased`}>
{children}
<Analytics />
</body>
Expand Down
28 changes: 13 additions & 15 deletions apps/marketing/components/ai-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const agents = [

export function AISection() {
return (
<div className="relative z-20 py-40 bg-background">
<div className="relative z-20 py-48 bg-background">
<div
className="absolute top-0 left-0 right-0 pointer-events-none"
style={{
Expand All @@ -23,7 +23,7 @@ export function AISection() {
}}
/>
<div className="w-full flex justify-center px-6">
<div className="w-full max-w-5xl">
<div className="w-full max-w-7xl">
{/* Section label - Use semantic tokens */}
<motion.div
initial={{ opacity: 0, y: 20 }}
Expand All @@ -43,12 +43,10 @@ export function AISection() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.1 }}
className="text-3xl sm:text-4xl md:text-5xl lg:text-[56px] text-foreground max-w-3xl mb-8"
className="text-4xl sm:text-5xl md:text-6xl lg:text-[68px] text-foreground max-w-4xl mb-10 font-bold"
style={{
letterSpacing: "-0.0325em",
fontVariationSettings: '"opsz" 28',
fontWeight: 538,
lineHeight: 1.1,
letterSpacing: "-0.02em",
lineHeight: 1.08,
}}
>
AI-assisted product development
Expand All @@ -60,7 +58,7 @@ export function AISection() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }}
className="text-muted-foreground max-w-md mb-8"
className="text-muted-foreground max-w-lg mb-10 text-lg"
>
<span className="text-foreground font-medium">Sprint for Agents.</span> Choose from a
variety of AI agents and start delegating work, from code generation to other technical
Expand All @@ -73,7 +71,7 @@ export function AISection() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.3 }}
className="px-5 py-2.5 bg-secondary text-secondary-foreground rounded-lg border border-border hover:bg-accent transition-colors text-sm flex items-center gap-2 mb-16"
className="px-7 py-3.5 bg-secondary text-secondary-foreground rounded-2xl border border-border hover:bg-accent hover:scale-105 transition-all text-base font-semibold flex items-center gap-2 mb-16 shadow-sm"
>
Learn more
<ChevronRight className="w-4 h-4" />
Expand Down Expand Up @@ -214,16 +212,16 @@ export function AISection() {
<div className="grid grid-cols-1 md:grid-cols-2">
{/* Left column - Use semantic tokens */}
<div className="border-t border-r border-b border-border/60 pt-12 pr-12 pb-16">
<h3 className="text-secondary-foreground font-medium text-xl mb-3">
<h3 className="text-secondary-foreground font-bold text-2xl mb-4">
Self-driving product operations
</h3>
<p className="text-muted-foreground text-base mb-8">
<p className="text-muted-foreground text-lg mb-8">
Streamline your product development workflows with AI assistance for routine,
manual tasks.
</p>

{/* Triage Intelligence Card - Use semantic tokens */}
<div className="bg-card/30 border border-border/60 rounded-xl p-5">
<div className="bg-card/30 border border-border/60 rounded-3xl p-6">
<div className="flex items-center gap-2 mb-5">
<svg
className="w-4 h-4 text-muted-foreground"
Expand Down Expand Up @@ -303,13 +301,13 @@ export function AISection() {

{/* Right column - Use semantic tokens */}
<div className="border-t border-b border-border/60 pt-12 pl-12 pb-16">
<h3 className="text-secondary-foreground font-medium text-xl mb-3">Sprint MCP</h3>
<p className="text-muted-foreground text-base mb-8">
<h3 className="text-secondary-foreground font-bold text-2xl mb-4">Sprint MCP</h3>
<p className="text-muted-foreground text-lg mb-8">
Connect Sprint to your favorite tools including Cursor, Claude, ChatGPT, and more.
</p>

{/* MCP Code Snippet - Use semantic tokens for code syntax */}
<div className="bg-card/30 border border-border/60 rounded-xl p-5 font-mono text-sm">
<div className="bg-card/30 border border-border/60 rounded-3xl p-6 font-mono text-sm">
<p className="text-muted-foreground/70 mb-3">{"//mcp.sprint.app/sse"}</p>
<div className="space-y-1 mb-6">
<p>
Expand Down
16 changes: 8 additions & 8 deletions apps/marketing/components/cta-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@ import Link from "next/link";

export function CTASection() {
return (
<section className="py-24 px-6 bg-background">
<div className="max-w-6xl mx-auto">
<div className="flex flex-col md:flex-row items-center justify-between gap-8">
<h2 className="text-3xl md:text-4xl lg:text-[42px] font-medium text-foreground tracking-tight text-balance">
<section className="py-32 px-6 bg-background">
<div className="max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row items-center justify-between gap-10">
<h2 className="text-4xl md:text-5xl lg:text-[56px] font-bold text-foreground tracking-tight text-balance leading-tight">
Plan the present. Build the future.
</h2>
<div className="flex items-center gap-3">
<button className="px-5 py-2.5 border border-border text-foreground font-medium rounded-lg hover:bg-accent transition-colors text-sm">
<div className="flex items-center gap-4">
<button className="px-7 py-3.5 border-2 border-border text-foreground font-bold rounded-2xl hover:bg-accent hover:scale-105 transition-all text-base">
Contact sales
</button>
<Link
href="/dashboard"
className="px-5 py-2.5 bg-foreground text-background font-medium rounded-lg hover:bg-foreground/90 transition-colors text-sm"
className="px-7 py-3.5 bg-foreground text-background font-bold rounded-2xl hover:bg-foreground/90 hover:scale-105 transition-all text-base shadow-lg"
>
Get started
Get started ✨
</Link>
</div>
</div>
Expand Down
30 changes: 13 additions & 17 deletions apps/marketing/components/feature-cards-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const featureCards = [

export function FeatureCardsSection() {
return (
<div className="relative z-20 py-40 bg-background">
<div className="relative z-20 py-48 bg-background">
<div
className="absolute top-0 left-0 right-0 pointer-events-none"
style={{
Expand All @@ -83,20 +83,18 @@ export function FeatureCardsSection() {
}}
/>
<div className="w-full flex justify-center px-6">
<div className="w-full max-w-5xl">
<div className="w-full max-w-7xl">
{/* Header row */}
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8 mb-16">
<motion.h2
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="text-3xl sm:text-4xl md:text-5xl lg:text-[56px] text-foreground max-w-md"
className="text-4xl sm:text-5xl md:text-6xl lg:text-[68px] text-foreground max-w-lg font-bold"
style={{
letterSpacing: "-0.0325em",
fontVariationSettings: '"opsz" 28',
fontWeight: 538,
lineHeight: 1.1,
letterSpacing: "-0.02em",
lineHeight: 1.08,
}}
>
Made for modern product teams
Expand All @@ -108,7 +106,7 @@ export function FeatureCardsSection() {
transition={{ duration: 0.6, delay: 0.1 }}
className="max-w-md"
>
<p className="text-muted-foreground leading-relaxed">
<p className="text-muted-foreground leading-relaxed text-lg">
Sprint is shaped by the practices and principles that distinguish world-class
product teams from the rest: relentless focus, fast execution, and a commitment to
the quality of craft.{" "}
Expand All @@ -131,11 +129,11 @@ export function FeatureCardsSection() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 + index * 0.1 }}
className="bg-card/50 border border-border hover:border-ring transition-colors cursor-pointer group overflow-hidden relative flex flex-col justify-end"
className="bg-card/50 border border-border hover:border-ring hover:shadow-xl transition-all cursor-pointer group overflow-hidden relative flex flex-col justify-end"
style={{
aspectRatio: "336 / 360",
borderRadius: "30px",
height: "360px",
aspectRatio: "336 / 420",
borderRadius: "36px",
height: "420px",
isolation: "isolate",
}}
>
Expand All @@ -150,12 +148,10 @@ export function FeatureCardsSection() {
</div>
<div
className="relative z-10 flex items-center justify-between w-full"
style={{ padding: "0 24px 40px", gap: "16px" }}
style={{ padding: "0 28px 44px", gap: "16px" }}
>
<h3 className="text-foreground font-medium text-lg leading-tight">
{card.title}
</h3>
<div className="w-8 h-8 rounded-full border border-border flex items-center justify-center text-muted-foreground group-hover:border-ring group-hover:text-secondary-foreground transition-colors flex-shrink-0">
<h3 className="text-foreground font-bold text-xl leading-tight">{card.title}</h3>
<div className="w-10 h-10 rounded-full border-2 border-border flex items-center justify-center text-muted-foreground group-hover:border-ring group-hover:text-secondary-foreground group-hover:scale-110 transition-all flex-shrink-0">
<Plus className="w-4 h-4" />
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions apps/marketing/components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import { LINKS } from "./links";

export function Footer() {
return (
<footer className="border-t border-white/[0.04] px-6 py-6">
<div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 sm:flex-row">
<span className="text-[13px] text-muted-foreground">
<span className="text-foreground/60">OK Code</span> &middot; Built by{" "}
<footer className="border-t border-white/[0.04] px-6 py-8">
<div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 sm:flex-row">
<span className="text-sm text-muted-foreground">
<span className="text-foreground/60 font-bold">OK Code</span> &middot; Built by{" "}
<ExternalLink
href="https://github.com/OpenKnots"
className="text-muted-foreground hover:text-foreground transition-colors no-underline"
Expand All @@ -15,7 +15,7 @@ export function Footer() {
</ExternalLink>
</span>

<div className="flex items-center gap-5 text-[13px]">
<div className="flex items-center gap-6 text-sm">
<ExternalLink href={LINKS.github}>GitHub</ExternalLink>
<ExternalLink href={LINKS.releases}>Releases</ExternalLink>
<ExternalLink href={LINKS.discord}>Discord</ExternalLink>
Expand Down
14 changes: 7 additions & 7 deletions apps/marketing/components/hero-3d-stage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,20 +57,20 @@ export function Hero3DStage() {
<div className="relative z-10 pt-28 flex flex-col">
{/* Hero text - contained and centered */}
<div className="w-full flex justify-center px-6 mt-16">
<div className="w-full max-w-4xl">
<div className="w-full max-w-6xl">
<motion.h1
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="text-4xl md:text-5xl lg:text-[56px] font-medium text-foreground leading-[1.1] text-balance"
className="text-5xl md:text-6xl lg:text-[72px] font-bold text-foreground leading-[1.08] text-balance"
>
Sprint is a purpose-built tool for planning and building products
</motion.h1>
<motion.p
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.1 }}
className="mt-6 text-lg text-muted-foreground"
className="mt-8 text-xl md:text-2xl text-muted-foreground leading-relaxed"
>
Meet the system for modern software development.
<br />
Expand All @@ -80,14 +80,14 @@ export function Hero3DStage() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
className="mt-8 flex items-center gap-6"
className="mt-10 flex items-center gap-6"
>
<a href="/dashboard">
<button className="px-5 py-2.5 bg-foreground text-background font-medium rounded-lg hover:bg-foreground/90 transition-colors text-sm">
Start building
<button className="px-8 py-3.5 bg-foreground text-background font-bold rounded-2xl hover:bg-foreground/90 hover:scale-105 transition-all text-base shadow-lg">
Start building ✨
</button>
</a>
<button className="text-secondary-foreground font-medium hover:text-foreground transition-colors flex items-center gap-2 text-sm">
<button className="text-secondary-foreground font-semibold hover:text-foreground transition-colors flex items-center gap-2 text-base">
<span className="text-muted-foreground">New:</span> Sprint agent for Slack
<span aria-hidden="true">→</span>
</button>
Expand Down
12 changes: 6 additions & 6 deletions apps/marketing/components/logo-cloud.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ const companies = [

export function LogoCloud() {
return (
<div id="customers" className="relative z-20 pb-24 pt-8 bg-background">
<div id="customers" className="relative z-20 pb-32 pt-12 bg-background">
<div className="w-full flex justify-center px-6">
<div className="w-full max-w-4xl text-center">
<div className="w-full max-w-6xl text-center">
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="text-lg text-secondary-foreground mb-2"
className="text-xl md:text-2xl text-secondary-foreground font-semibold mb-3"
>
Powering the world's best product teams.
</motion.p>
Expand All @@ -33,7 +33,7 @@ export function LogoCloud() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.1 }}
className="text-lg text-muted-foreground mb-16"
className="text-lg md:text-xl text-muted-foreground mb-16"
>
From next-gen startups to established enterprises.
</motion.p>
Expand All @@ -56,7 +56,7 @@ export function LogoCloud() {
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.4, delay: companyIndex * 0.05 }}
className="text-foreground font-semibold text-xl flex items-center gap-2"
className="text-foreground font-bold text-2xl flex items-center gap-3"
>
<Icon className="w-5 h-5 fill-current" />
{company.name}
Expand All @@ -67,7 +67,7 @@ export function LogoCloud() {

{/* Hover overlay button - Use semantic tokens */}
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
<div className="px-5 py-2.5 bg-secondary/80 backdrop-blur-sm border border-border rounded-full text-sm text-secondary-foreground flex items-center gap-2">
<div className="px-7 py-3.5 bg-secondary/80 backdrop-blur-sm border border-border rounded-2xl text-base font-semibold text-secondary-foreground flex items-center gap-2 shadow-lg">
Meet our customers
<span aria-hidden="true">›</span>
</div>
Expand Down
Loading
Loading