Skip to content

fix: make statistics section responsive on mobile #315

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
gauravk-io wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: make statistics section responsive on mobile #315

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
20 changes: 10 additions & 10 deletions apps/web/src/components/landing-sections/Brands.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,17 @@ const Brands = () => {
: "0+";

return (
<div id="Stats" className="flex flex-col">
<div id="Stats" className="flex flex-col overflow-hidden">
<Header title="Statistics" />
<div className="border-b border flex items-center w-full">
<div className="relative [box-shadow:0_0_100px_-10px_#14111C_inset] flex items-center justify-center bg-surface-primary w-full border-r border flex-col p-10 md:text-5xl">
<div className="border-b flex flex-row items-center w-full">
<div className="relative [box-shadow:0_0_100px_-10px_#14111C_inset] flex items-center justify-center bg-surface-primary w-1/2 border-r flex-col px-2 py-8 md:p-10 md:text-5xl">
{queryLoading ? (
<span className="md:text-8xl md:text-[80px] text-2xl sm:text-5xl text-[clamp(1.5rem,10vw,6rem)] font-mono tracking-tighter font-medium text-purple-400 animate-pulse">
<span className="md:text-8xl md:text-[80px] text-xl sm:text-5xl text-[clamp(1rem,8vw,6rem)] font-mono tracking-tighter font-medium text-purple-400 animate-pulse">
Loading...
</span>
) : (
<span
className="md:text-8xl md:text-[80px] text-2xl sm:text-5xl relative pointer-events-none text-center bg-gradient-to-b from-brand-purple to-[#341e7b] to-80% bg-clip-text text-transparent text-[clamp(1.5rem,10vw,6rem)] overflow-hidden font-mono tracking-tighter font-medium"
className="md:text-8xl md:text-[80px] text-xl sm:text-5xl relative pointer-events-none text-center bg-gradient-to-b from-brand-purple to-[#341e7b] to-80% bg-clip-text text-transparent text-[clamp(1rem,8vw,6rem)] overflow-hidden font-mono tracking-tighter font-medium"
style={{
textShadow: "0 0 40px rgba(145, 89, 226, 0.5)",
}}
Expand All @@ -44,17 +44,17 @@ const Brands = () => {
)}
<span
style={{ "--text": "Opensox" } as any}
className=" relative pointer-events-none text-center before:bg-gradient-to-b before:from-brand-purple before:to-[#321D76] before:to-80% before:bg-clip-text before:text-transparent before:content-['Queries'] after:absolute after:inset-0 after:bg-purple-600 after:bg-clip-text after:text-transparent after:mix-blend-lighten after:content-['Queries'] after:[text-shadow:0_1px_0_black] overflow-hidden font-mono tracking-tighter font-medium text-3xl md:text-5xl"
className=" relative pointer-events-none text-center before:bg-gradient-to-b before:from-brand-purple before:to-[#321D76] before:to-80% before:bg-clip-text before:text-transparent before:content-['Queries'] after:absolute after:inset-0 after:bg-purple-600 after:bg-clip-text after:text-transparent after:mix-blend-lighten after:content-['Queries'] after:[text-shadow:0_1px_0_black] overflow-hidden font-mono tracking-tighter font-medium text-lg sm:text-3xl md:text-5xl"
></span>
</div>
<div className="relative flex [box-shadow:0_0_0px_-10px_#14111C_inset] items-center justify-center bg-surface-primary w-full border flex-col p-10 md:text-5xl">
<div className="relative flex [box-shadow:0_0_0px_-10px_#14111C_inset] items-center justify-center bg-surface-primary w-1/2 flex-col px-2 py-8 md:p-10 md:text-5xl">
{userLoading ? (
<span className="md:text-8xl md:text-[80px] text-2xl sm:text-5xl text-[clamp(1.5rem,10vw,6rem)] font-mono tracking-tighter font-medium text-purple-400 animate-pulse">
<span className="md:text-8xl md:text-[80px] text-xl sm:text-5xl text-[clamp(1rem,8vw,6rem)] font-mono tracking-tighter font-medium text-purple-400 animate-pulse">
Loading...
</span>
) : (
<span
className="md:text-8xl md:text-[80px] text-2xl sm:text-5xl relative pointer-events-none text-center bg-gradient-to-b from-brand-purple to-[#341e7b] to-80% bg-clip-text text-transparent text-[clamp(1.5rem,10vw,6rem)] overflow-hidden font-mono tracking-tighter font-medium"
className="md:text-8xl md:text-[80px] text-xl sm:text-5xl relative pointer-events-none text-center bg-gradient-to-b from-brand-purple to-[#341e7b] to-80% bg-clip-text text-transparent text-[clamp(1rem,8vw,6rem)] overflow-hidden font-mono tracking-tighter font-medium"
style={{
textShadow: "0 0 40px rgba(145, 89, 226, 0.5)",
}}
Expand All @@ -64,7 +64,7 @@ const Brands = () => {
)}
<span
style={{ "--text": "Opensox" } as any}
className=" relative pointer-events-none text-center before:bg-gradient-to-b before:from-brand-purple before:to-[#321D76] before:to-80% before:bg-clip-text before:text-transparent before:content-['Users'] after:absolute after:inset-0 after:bg-purple-600 after:bg-clip-text after:text-transparent after:mix-blend-lighten after:content-['Users'] after:[text-shadow:0_1px_0_black] overflow-hidden font-mono tracking-tighter font-medium text-3xl md:text-5xl"
className=" relative pointer-events-none text-center before:bg-gradient-to-b before:from-brand-purple before:to-[#321D76] before:to-80% before:bg-clip-text before:text-transparent before:content-['Users'] after:absolute after:inset-0 after:bg-purple-600 after:bg-clip-text after:text-transparent after:mix-blend-lighten after:content-['Users'] after:[text-shadow:0_1px_0_black] overflow-hidden font-mono tracking-tighter font-medium text-lg sm:text-3xl md:text-5xl"
></span>
</div>
</div>
Expand Down