diff --git a/apps/marketing/app/globals.css b/apps/marketing/app/globals.css index 2a2a53483..04b457bfe 100644 --- a/apps/marketing/app/globals.css +++ b/apps/marketing/app/globals.css @@ -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); @@ -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); @@ -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); @@ -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 */ diff --git a/apps/marketing/app/layout.tsx b/apps/marketing/app/layout.tsx index 3edafb467..a113b0a4c 100644 --- a/apps/marketing/app/layout.tsx +++ b/apps/marketing/app/layout.tsx @@ -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", @@ -63,7 +60,7 @@ export default function RootLayout({ }>) { return ( - + {children} diff --git a/apps/marketing/components/ai-section.tsx b/apps/marketing/components/ai-section.tsx index 0c14deabe..06ad1d7ba 100644 --- a/apps/marketing/components/ai-section.tsx +++ b/apps/marketing/components/ai-section.tsx @@ -14,7 +14,7 @@ const agents = [ export function AISection() { return ( -
+
-
+
{/* Section label - Use semantic tokens */} AI-assisted product development @@ -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" > Sprint for Agents. Choose from a variety of AI agents and start delegating work, from code generation to other technical @@ -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 @@ -214,16 +212,16 @@ export function AISection() {
{/* Left column - Use semantic tokens */}
-

+

Self-driving product operations

-

+

Streamline your product development workflows with AI assistance for routine, manual tasks.

{/* Triage Intelligence Card - Use semantic tokens */} -
+
-

Sprint MCP

-

+

Sprint MCP

+

Connect Sprint to your favorite tools including Cursor, Claude, ChatGPT, and more.

{/* MCP Code Snippet - Use semantic tokens for code syntax */} -
+

{"//mcp.sprint.app/sse"}

diff --git a/apps/marketing/components/cta-section.tsx b/apps/marketing/components/cta-section.tsx index 9a1a99c11..d0491edba 100644 --- a/apps/marketing/components/cta-section.tsx +++ b/apps/marketing/components/cta-section.tsx @@ -2,21 +2,21 @@ import Link from "next/link"; export function CTASection() { return ( -

-
-
-

+
+
+
+

Plan the present. Build the future.

-
- - Get started + Get started ✨
diff --git a/apps/marketing/components/feature-cards-section.tsx b/apps/marketing/components/feature-cards-section.tsx index 1a0f0fb49..e731e701f 100644 --- a/apps/marketing/components/feature-cards-section.tsx +++ b/apps/marketing/components/feature-cards-section.tsx @@ -74,7 +74,7 @@ const featureCards = [ export function FeatureCardsSection() { return ( -
+
-
+
{/* Header row */}
Made for modern product teams @@ -108,7 +106,7 @@ export function FeatureCardsSection() { transition={{ duration: 0.6, delay: 0.1 }} className="max-w-md" > -

+

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.{" "} @@ -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", }} > @@ -150,12 +148,10 @@ export function FeatureCardsSection() {

-

- {card.title} -

-
+

{card.title}

+
diff --git a/apps/marketing/components/footer.tsx b/apps/marketing/components/footer.tsx index b7b61ae83..067ea3796 100644 --- a/apps/marketing/components/footer.tsx +++ b/apps/marketing/components/footer.tsx @@ -3,10 +3,10 @@ import { LINKS } from "./links"; export function Footer() { return ( -