starred/pocket-id-pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2025-12-09 14:52:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve mobile layout of landing page

Browse Source
This commit is contained in:
Elias Schneider
2025-02-06 16:57:16 +01:00
parent 98add37390
commit 7c04bda5b7
2 changed files with 13 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
docs/src/components/feature-box.tsx
View File

@@ -10,32 +10,18 @@ export default function FeatureBox({
imgLeft?: boolean;
}) {
return (
<div className="p-6 glass grid grid-cols-12 gap-10 items-center">
{imgLeft ? (
<>
<img
src={imgSrc}
alt="Feature Image"
className="mr-3 rounded-lg col-span-7 border border-neutral-800"
/>
<div className="col-span-5">
<p className="text-3xl font-semibold !mb-3">{title}</p>
<p className="text-gray-300 mt-2">{description}</p>
</div>
</>
) : (
<>
<div className="col-span-5">
<p className="text-3xl font-semibold !mb-3">{title}</p>
<p className="text-gray-300">{description}</p>
</div>
<img
src={imgSrc}
alt="Feature Image"
className="ml-3 rounded-lg col-span-7 border border-neutral-800"
/>
</>
)}
<div className="p-6 glass grid grid-cols-1 md:grid-cols-12 gap-10 items-center">
<div className="col-span-5">
<p className="text-3xl font-semibold !mb-3">{title}</p>
<p className="text-gray-300">{description}</p>
</div>
<img
src={imgSrc}
alt="Feature Image"
className={`rounded-lg col-span-7 border border-neutral-800 ${
imgLeft ? "order-first" : "order-last"
}`}
/>
</div>
);
}

2
docs/src/pages/index.tsx
View File

@@ -61,7 +61,7 @@ const Home: React.FC = () => {
</section>
<section className="mt-15">
<h2 className="text-2xl sm:text-3xl font-bold">Features</h2>
<h2 className="!text-3xl font-bold">Features</h2>
<div className="flex flex-col gap-5">
<FeatureBox
title="Passwordless Authentication"