Skip to content

[codex] Polish landing page design #661

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

Open
riderx wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[codex] Polish landing page design #661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8ceba00
Polish landing page design
riderx May 10, 2026
02ebad2
Hide decorative review icons
riderx May 10, 2026
3c108bd
Tighten landing copy and spacing
riderx May 10, 2026
a04ad65
Add focus rings to blog filters
riderx May 10, 2026
dbc2695
Merge remote-tracking branch 'origin/main' into codex/landing-design-…
riderx May 10, 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
Binary file added .github/pr-screenshots/landing-design-polish.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions apps/shared/copy/messages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -948,7 +948,7 @@ const messages = {
disclaimer_last_updated: 'Last updated: January 28, 2022',
disclaimer_text: 'The information contained on the Service is for general information purposes only.',
disclaimer_title: 'Disclaimer',
discover_ready_plugins: "Discover ready-to-use plugins that extend your Capacitor app's capabilities",
discover_ready_plugins: 'Add native features without rebuilding from scratch.',
do_you_have_purchasing_power_parity_pricing: 'Do you have Purchasing Power Parity (PPP) pricing?',
do_you_offer_annual_billing_and_ach_payment_options: 'Do you offer annual billing and ACH payment options?',
do_you_offer_discounts_for_students_non_profits_or_startups: 'Do you offer discounts for students, non-profits, or startups?',
Expand Down Expand Up @@ -1343,12 +1343,12 @@ const messages = {
'Build as usual, upload changed JavaScript and assets with the CLI or API, and target the channels that should receive them. Start automatic in 5 minutes or go manual for advanced release logic.',
home_global_infrastructure_desc: 'Powered by serverless edge computing and distributed databases across 300+ cities and 13,000+ networks for ultra-fast global delivery.',
home_global_network_label: 'Global Network',
home_hero_outcome_compliance_desc: 'Update JavaScript, CSS, copy, configuration, and assets while native code keeps going through normal App Store and Play review.',
home_hero_outcome_compliance_title: 'Keep store review for native changes',
home_hero_outcome_observe_desc: 'Track device status, adoption, failures, and bundle history so support and engineering can explain every release.',
home_hero_outcome_compliance_desc: 'Update JS, CSS, copy, config, and assets. Native code stays in store review.',
home_hero_outcome_compliance_title: 'Native changes stay in review',
home_hero_outcome_observe_desc: 'Track adoption, failures, devices, and bundle history for every release.',
home_hero_outcome_observe_title: 'Prove what shipped',
home_hero_outcome_recover_desc: 'Push urgent fixes without waiting days for review, then roll back fast if a rollout does not behave as expected.',
home_hero_outcome_recover_title: 'Recover production faster',
home_hero_outcome_recover_desc: 'Ship urgent fixes now. Roll back bad releases fast.',
home_hero_outcome_recover_title: 'Fix production fast',
home_important_update_badge: 'Important Update',
home_latency_from_users: 'From 95% of users',
home_locations_active: '300+ Locations Active',
Expand Down Expand Up @@ -2174,7 +2174,7 @@ const messages = {
problem_chat_still_pending: 'Still pending...',
problem_chat_whats_status: 'whats the app status?',
problem_solution_badge: 'PROBLEM → SOLUTION',
problem_solution_subtitle: "When a web-layer bug is already in users' hands, your team needs a web-style release path that still respects native store rules.",
problem_solution_subtitle: 'Web bug live? Ship a compliant fix path without waiting on native review.',
problem_solution_title: 'App Store review delays',
problem_solution_velocity: 'production fixes',
product_managers: 'Product Managers',
Expand Down
18 changes: 11 additions & 7 deletions apps/web/src/components/Blog.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,12 @@ const props = Astro.props as {
const cannLink = getRelativeLocaleUrl(Astro.locals.locale, `blog/${props.link}`)
---

<a href={cannLink} aria-label={props.title} class="block pb-8 bg-gray-700 rounded-lg transition-transform duration-200 hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900">
<div>
<a
href={cannLink}
aria-label={props.title}
class="group block h-full overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04] pb-6 transition-all duration-200 hover:-translate-y-0.5 hover:border-white/20 hover:bg-white/[0.06] focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900 focus:outline-none"
>
<div class="flex h-full flex-col">
<div class="relative p-2">
<img
width="1536"
Expand All @@ -24,18 +28,18 @@ const cannLink = getRelativeLocaleUrl(Astro.locals.locale, `blog/${props.link}`)
src={props.image}
alt={props.title}
loading={props.loading || 'lazy'}
class="object-contain w-full h-full text-transparent bg-center bg-no-repeat bg-cover rounded-lg border border-gray-600 z-2 aspect-video bg-linear-to-br from-gray-600/50 to-gray-700/50"
class="z-2 aspect-video h-full w-full rounded-xl border border-white/10 bg-linear-to-br from-gray-700/50 to-gray-800/50 bg-cover bg-center bg-no-repeat object-cover text-transparent"
/>
<div class="absolute top-4 left-4 pointer-events-none">
<span class="py-2 px-4 text-xs font-semibold tracking-widest text-gray-900 uppercase bg-white rounded-full shadow-lg">
<div class="pointer-events-none absolute top-4 left-4">
<span class="rounded-full bg-white px-3 py-1.5 text-[11px] leading-4 font-semibold tracking-wide text-gray-900 uppercase shadow-lg">
{props.tag}
</span>
</div>
</div>
<span class="block px-5 mt-3 text-sm font-semibold tracking-widest text-gray-300 uppercase">
<span class="mt-3 block px-5 text-xs leading-5 font-semibold tracking-wide text-gray-400 uppercase">
{formatTime(props.date)}
</span>
<p class="px-5 mt-3 text-2xl font-semibold text-gray-100">
<p class="mt-2 line-clamp-3 px-5 text-lg leading-7 font-semibold text-gray-100 transition-colors group-hover:text-white sm:text-xl">
{props.title}
</p>
</div>
Expand Down
22 changes: 12 additions & 10 deletions apps/web/src/components/BlogListing.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,31 +23,33 @@ if (Astro.locals.runtimeConfig.public.blog_description) content['description'] =
---

<Layout {content}>
<div class="flex w-full flex-col items-center py-8">
<div class="relative w-full max-w-7xl px-8 sm:px-10 lg:px-12">
<h1 class="text-3xl leading-tight font-bold text-white sm:text-4xl lg:text-5xl">{m.latest_from_the_blog({}, { locale: Astro.locals.locale })}</h1>
<h2 class="mt-2 text-base leading-relaxed text-gray-50">
{config.public.blog_description}
</h2>
<div class="mt-8 flex flex-wrap gap-2">
<div class="flex w-full flex-col items-center py-8 sm:py-10">
<div class="relative w-full max-w-7xl px-6 sm:px-10 lg:px-12">
<div class="max-w-2xl">
<h1 class="text-3xl leading-tight font-bold text-white sm:text-4xl lg:text-5xl">{m.latest_from_the_blog({}, { locale: Astro.locals.locale })}</h1>
<h2 class="mt-3 text-base leading-7 text-gray-300">
{config.public.blog_description}
</h2>
</div>
<div class="mt-6 flex flex-wrap gap-2.5">
<a
href={getRelativeLocaleUrl(Astro.locals.locale, `blog`)}
class="rounded-md border border-gray-400 px-3 py-2 text-xs font-medium transition-colors duration-300 ease-in-out hover:border-transparent hover:bg-gray-500 hover:text-white"
class="rounded-full border border-white/15 bg-white/[0.04] px-3 py-1.5 text-sm font-medium text-gray-200 transition-colors duration-200 hover:border-white/25 hover:bg-white/[0.08] hover:text-white focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950 focus-visible:outline-none"
>
All
</a>
{
uniqueTags.map((val) => (
<a
href={getRelativeLocaleUrl(Astro.locals.locale, `blog/category/${slugify(val)}`)}
class="rounded-md border border-gray-400 px-3 py-2 text-xs font-medium transition-colors duration-300 ease-in-out hover:border-transparent hover:bg-gray-500 hover:text-white"
class="rounded-full border border-white/15 bg-white/[0.04] px-3 py-1.5 text-sm font-medium text-gray-300 transition-colors duration-200 hover:border-white/25 hover:bg-white/[0.08] hover:text-white focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950 focus-visible:outline-none"
>
Comment thread
riderx marked this conversation as resolved.
{val}
</a>
))
}
</div>
<div class="mt-8 grid w-full grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
<div class="mt-8 grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{
posts.map((j, i) => (
<Blog tag={j.data.tag} link={j.data.slug} title={j.data.title} date={j.data.created_at} image={j.data.head_image} loading={i < 3 ? 'eager' : 'lazy'} />
Expand Down
46 changes: 23 additions & 23 deletions apps/web/src/components/Hero.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const ctaSubtext = `${m.days_free_trial({}, { locale: Astro.locals.locale })}. $

<section>
<div class="relative overflow-hidden">
<div class="relative mx-auto max-w-7xl pb-8 md:pb-32">
<div class="relative mx-auto max-w-7xl pb-4 md:pb-14">
<!-- Background Grid of Squares -->
<div class="pointer-events-none absolute inset-0 flex w-full flex-col justify-center gap-4 blur-sm select-none sm:blur-none">
<!-- Row 0 -->
Expand Down Expand Up @@ -185,11 +185,11 @@ const ctaSubtext = `${m.days_free_trial({}, { locale: Astro.locals.locale })}. $
<br />
<span class="text-azure-500">CapacitorJS app</span>
</h1>
<p class="font-inter mx-auto mt-6 max-w-2xl text-lg leading-8 text-gray-400 sm:text-xl">
<p class="font-inter mx-auto mt-5 max-w-xl text-lg leading-8 text-gray-400 sm:text-xl">
{m.hero_subtitle_part1({}, { locale: Astro.locals.locale })}
{m.hero_subtitle_part2({}, { locale: Astro.locals.locale })}<br />{m.hero_subtitle_line2({}, { locale: Astro.locals.locale })}
</p>
<div class="mt-10 flex flex-col items-center gap-4">
<div class="mt-8 flex flex-col items-center gap-3">
<div class="flex flex-col items-center gap-4 sm:flex-row">
<div class="group relative inline-flex">
<div
Expand Down Expand Up @@ -217,56 +217,56 @@ const ctaSubtext = `${m.days_free_trial({}, { locale: Astro.locals.locale })}. $
</div>
</div>
<!-- Features Bar -->
<div class="bg-linear-to-b from-gray-900 to-[#1a1a1a] py-6 sm:py-16 lg:py-20">
<div class="bg-linear-to-b from-gray-900 to-[#1a1a1a] py-4 sm:py-8 lg:py-10">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Single Horizontal Bar with Features and Stats -->
<div class="mx-auto max-w-6xl">
<div class="rounded-3xl border border-white/10 bg-linear-to-br from-[#1a1d24]/50 to-[#14161b]/50 backdrop-blur-sm">
<div class="my-6 grid grid-cols-1 items-start gap-12 md:grid-cols-3">
<div class="rounded-2xl border border-white/10 bg-linear-to-br from-[#1a1d24]/70 to-[#14161b]/60 p-4 shadow-[0_20px_70px_rgba(2,6,23,0.28)] backdrop-blur-sm sm:p-5 lg:p-6">
<div class="grid grid-cols-1 items-start gap-5 md:grid-cols-3 lg:gap-6">
<!-- Production Recovery -->
<div class="flex flex-col items-center gap-4 text-center">
<div class="shrink-0">
<div class="flex h-8 w-8 items-center justify-center rounded-2xl">
<svg class="h-8 w-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<div class="flex h-11 w-11 items-center justify-center rounded-xl border border-white/10 bg-white/[0.04]">
<svg class="h-6 w-6 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
</svg>
</div>
</div>
<div>
<h2 class="mb-2 text-lg font-semibold text-white">{m.home_hero_outcome_recover_title({}, { locale: Astro.locals.locale })}</h2>
<p class="text-sm leading-relaxed text-gray-400">{m.home_hero_outcome_recover_desc({}, { locale: Astro.locals.locale })}</p>
<div class="mx-auto max-w-72">
<h2 class="mb-1.5 text-base leading-6 font-semibold text-white sm:text-lg">{m.home_hero_outcome_recover_title({}, { locale: Astro.locals.locale })}</h2>
<p class="text-sm leading-5 text-gray-400">{m.home_hero_outcome_recover_desc({}, { locale: Astro.locals.locale })}</p>
</div>
</div>

<!-- Store Review Fit -->
<div class="flex flex-col items-center gap-4 text-center">
<div class="shrink-0">
<div class="flex h-8 w-8 items-center justify-center rounded-2xl">
<div class="flex h-11 w-11 items-center justify-center rounded-xl border border-white/10 bg-white/[0.04]">
<div class="flex gap-2">
<svg class="h-6 w-6 text-gray-400" fill="currentColor" viewBox="0 0 384 512" aria-hidden="true" focusable="false">
<svg class="h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 384 512" aria-hidden="true" focusable="false">
<path
d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
></path>
</svg>
<svg class="h-6 w-6 text-gray-400" fill="currentColor" viewBox="0 0 488 512" aria-hidden="true" focusable="false">
<svg class="h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 488 512" aria-hidden="true" focusable="false">
<path
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
></path>
</svg>
</div>
</div>
</div>
<div>
<h2 class="mb-2 text-lg font-semibold text-white">{m.home_hero_outcome_compliance_title({}, { locale: Astro.locals.locale })}</h2>
<p class="text-sm leading-relaxed text-gray-400">{m.home_hero_outcome_compliance_desc({}, { locale: Astro.locals.locale })}</p>
<div class="mx-auto max-w-72">
<h2 class="mb-1.5 text-base leading-6 font-semibold text-white sm:text-lg">{m.home_hero_outcome_compliance_title({}, { locale: Astro.locals.locale })}</h2>
<p class="text-sm leading-5 text-gray-400">{m.home_hero_outcome_compliance_desc({}, { locale: Astro.locals.locale })}</p>
</div>
</div>

<!-- Release Proof -->
<div class="flex flex-col items-center gap-4 text-center">
<div class="shrink-0">
<div class="flex h-8 w-8 items-center justify-center rounded-2xl">
<svg class="h-8 w-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<div class="flex h-11 w-11 items-center justify-center rounded-xl border border-white/10 bg-white/[0.04]">
<svg class="h-6 w-6 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path
stroke-linecap="round"
stroke-linejoin="round"
Expand All @@ -276,16 +276,16 @@ const ctaSubtext = `${m.days_free_trial({}, { locale: Astro.locals.locale })}. $
</svg>
</div>
</div>
<div>
<h2 class="mb-2 text-lg font-semibold text-white">{m.home_hero_outcome_observe_title({}, { locale: Astro.locals.locale })}</h2>
<p class="text-sm leading-relaxed text-gray-400">{m.home_hero_outcome_observe_desc({}, { locale: Astro.locals.locale })}</p>
<div class="mx-auto max-w-72">
<h2 class="mb-1.5 text-base leading-6 font-semibold text-white sm:text-lg">{m.home_hero_outcome_observe_title({}, { locale: Astro.locals.locale })}</h2>
<p class="text-sm leading-5 text-gray-400">{m.home_hero_outcome_observe_desc({}, { locale: Astro.locals.locale })}</p>
</div>
</div>
</div>
</div>

<!-- Stats Bar -->
<div class="pt-8">
<div class="pt-6">
<div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-6 text-sm">
<!-- Trusted by Companies -->
<div class="flex items-center gap-3">
Expand Down
Loading
Loading