Skip to content

Commit 3c4e69a

Browse files
brendan-defibrendan-defi
committed
mobile text size
1 parent be82937 commit 3c4e69a

File tree

6 files changed

+52
-22
lines changed

6 files changed

+52
-22
lines changed

‎apps/web/src/components/Developers/Customers/index.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,21 @@ import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/ty
66
import Image, { type StaticImageData } from 'next/image';
77
import 'apps/web/src/components/Developers/Customers/styles.css';
88

9-
const LOGO_WIDTH = 200; // width of each logo in pixels
10-
const LOGO_GAP = 40; // gap between logos in pixels
11-
const TOTAL_LOGOS = 10; // reduced number of logos per group for better performance
9+
const LOGO_WIDTH = 200; // pixels
10+
const LOGO_GAP = 40; // pixels
11+
const TOTAL_LOGOS = 10;
1212

1313
export function Customers() {
1414
const logos = Array(TOTAL_LOGOS).fill(null);
1515

1616
return (
1717
<section className="h-full w-full pt-32">
18-
<Title level={TitleLevel.Title1} as="h2" className="mb-16">
18+
<Title level={TitleLevel.Title1} as="h2" className="mb-16 hidden md:block">
19+
Powering the most consumer-friendly applications onchain.
20+
</Title>
21+
<Title level={TitleLevel.Title3} className="mb-8 md:hidden">
1922
Powering the most consumer-friendly applications onchain.
2023
</Title>
21-
22-
{/* Auto-scrolling Logos */}
2324
<figure
2425
className="relative flex h-28 items-center overflow-hidden"
2526
style={{
@@ -29,7 +30,7 @@ export function Customers() {
2930
}}
3031
>
3132
<div
32-
className="animate-scroll absolute left-0 flex animate-scroll"
33+
className="animate-scroll animate-scroll absolute left-0 flex"
3334
style={{
3435
gap: `${LOGO_GAP}px`,
3536
width: `calc((${LOGO_WIDTH}px + ${LOGO_GAP}px) * ${TOTAL_LOGOS})`,

‎apps/web/src/components/Developers/LiveDemo/index.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ export function LiveDemo() {
223223
return (
224224
<div id="demo" className="bg-black pb-32 pt-24">
225225
<div className="mx-auto max-w-4xl">
226-
<div className="bg-dark-palette-backgroundAlternate/50 mx-auto overflow-hidden rounded-xl border border-white/10">
226+
<div className="mx-auto overflow-hidden rounded-xl border border-white/10 bg-dark-palette-backgroundAlternate/50">
227227
<div className="flex h-[500px] items-center justify-center">
228228
<div className="text-white/50">Loading...</div>
229229
</div>
@@ -236,12 +236,22 @@ export function LiveDemo() {
236236
return (
237237
<section className="w-full">
238238
<style>{styles}</style>
239-
<div className="mb-9 flex flex-col gap-2 md:flex-row">
240-
<Title level={TitleLevel.Title1}>Try it out!</Title>
241-
<Title level={TitleLevel.Title1} className="text-dark-palette-foregroundMuted">
239+
<div className="mb-9 hidden flex-row gap-2 md:flex ">
240+
<Title level={TitleLevel.Title1} as="h2">
241+
Try it out!
242+
</Title>
243+
<Title level={TitleLevel.Title1} as="h2" className="text-dark-palette-foregroundMuted">
242244
Experience how easy it is to build on Base.
243245
</Title>
244246
</div>
247+
<div className="mb-9 flex flex-col gap-2 md:hidden">
248+
<Title level={TitleLevel.Title3}>
249+
Try it out!{' '}
250+
<span className="text-dark-palette-foregroundMuted">
251+
Experience how easy it is to build on Base.
252+
</span>
253+
</Title>
254+
</div>
245255
<div
246256
className={classNames(
247257
'relative rounded-xl border transition-colors',

‎apps/web/src/components/Developers/Testimonials/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export function Testimonials() {
5353
);
5454

5555
return (
56-
<section className="mt-16 h-[448px] md:h-full w-full">
56+
<section className="mt-16 h-[448px] w-full md:h-full">
5757
<div className="rounded-xl border border-palette-line/20 p-8">
5858
<div className="mb-8 flex space-x-6">
5959
{(['build', 'scale', 'monetize'] as const).map((tab) => (

‎apps/web/src/components/Developers/Tools/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,13 @@ type ToolCardProps = {
1919
export function Tools() {
2020
return (
2121
<section className="h-full w-full">
22-
<Title level={TitleLevel.Title1} as="h2" className="mb-9 mt-32">
22+
<Title level={TitleLevel.Title1} as="h2" className="mb-9 mt-32 hidden md:block">
2323
The easiest and most rewarding way to build world-class onchain products.
2424
</Title>
25-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
25+
<Title level={TitleLevel.Title3} className="mb-6 mt-32 md:hidden">
26+
The easiest and most rewarding way to build world-class onchain products.
27+
</Title>
28+
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
2629
<ToolCard
2730
title="AgentKit"
2831
description="Build and deploy AI agents that can interact with blockchain data and smart contracts."

‎apps/web/src/components/Developers/UseCases/index.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,27 @@ import { AnimatedGasless } from 'apps/web/src/components/Developers/UseCases/ass
1111
export function UseCases() {
1212
return (
1313
<section className="h-full w-full">
14-
<div className="flex flex-col md:flex-row gap-2">
14+
<div className="hidden flex-col gap-2 md:flex ">
1515
<Title level={TitleLevel.Title1} as="h2">
1616
Build. Scale. Monetize.
1717
</Title>
1818
<Title level={TitleLevel.Title1} as="h2" className="text-gray-50">
1919
Everything you need to launch onchain products.
2020
</Title>
2121
</div>
22-
<div className="mt-9 grid grid-cols-1 md:grid-cols-2 gap-9">
22+
<div className="flex flex-col gap-2 md:hidden">
23+
<Title level={TitleLevel.Title3}>
24+
Build. Scale. Monetize.{' '}
25+
<span className="text-gray-50">Everything you need to launch onchain products.</span>
26+
</Title>
27+
</div>
28+
<div className="mt-6 grid grid-cols-1 gap-9 md:mt-9 md:grid-cols-2">
2329
<UseCaseBlock
2430
title="Onboard your users"
2531
description="Create seamless onboarding experiences with smart wallerts and social authentication."
2632
href="https://vocs-migration-mvp-one.vercel.app/dev-tools/identity/smart-wallet/quick-start"
2733
>
28-
<div className="flex h-[320px] w-[285px] md:w-1/2 flex-col items-center justify-center">
34+
<div className="flex h-[320px] w-[285px] flex-col items-center justify-center md:w-1/2">
2935
<AnimatedOnboarding />
3036
</div>
3137
</UseCaseBlock>

‎apps/web/src/components/Developers/WhyBase/index.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,27 @@ type ValuePropProps = {
1515
export function WhyBase() {
1616
return (
1717
<section className="h-full w-full py-20">
18-
<div className="flex flex-col gap-9">
18+
<div className="flex flex-col gap-6 md:gap-9">
1919
<div className="flex flex-col gap-1 pr-4">
20-
<Title level={TitleLevel.Title1} as="h2">
21-
Built by Base with the Coinbase connection.
20+
<Title level={TitleLevel.Title1} as="h2" className="hidden md:block">
21+
Build on the fastest growing L2.
2222
</Title>
23-
<Title level={TitleLevel.Title1} as="h2" className="text-dark-palette-foregroundMuted">
23+
<Title
24+
level={TitleLevel.Title1}
25+
as="h2"
26+
className="hidden text-dark-palette-foregroundMuted md:block"
27+
>
2428
Grow faster with distribution through Base&apos;s social graph and integrations with
2529
Coinbase products.
2630
</Title>
31+
<Title level={TitleLevel.Title3} className="md:hidden">
32+
Build on the fastest growing L2.{' '}
33+
<span className="text-dark-palette-foregroundMuted">
34+
Grow faster with distribution through Base&apos;s social graph and integrations with
35+
Coinbase products.
36+
</span>
37+
</Title>
2738
</div>
28-
2939
<div className="flex flex-col gap-3">
3040
<ValueProp
3141
title="Distribution & Growth"

0 commit comments

Comments
 (0)