mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-02-14 15:17:26 +00:00
Code 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; imgLeft?: boolean;
}) { }) {
return ( return (
<div className="p-6 glass grid grid-cols-12 gap-10 items-center"> <div className="p-6 glass grid grid-cols-1 md:grid-cols-12 gap-10 items-center">
{imgLeft ? ( <div className="col-span-5">
<> <p className="text-3xl font-semibold !mb-3">{title}</p>
<img <p className="text-gray-300">{description}</p>
src={imgSrc} </div>
alt="Feature Image" <img
className="mr-3 rounded-lg col-span-7 border border-neutral-800" src={imgSrc}
/> alt="Feature Image"
<div className="col-span-5"> className={`rounded-lg col-span-7 border border-neutral-800 ${
<p className="text-3xl font-semibold !mb-3">{title}</p> imgLeft ? "order-first" : "order-last"
<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> </div>
); );
} }

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

@@ -61,7 +61,7 @@ const Home: React.FC = () => {
</section> </section>
<section className="mt-15"> <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"> <div className="flex flex-col gap-5">
<FeatureBox <FeatureBox
title="Passwordless Authentication" title="Passwordless Authentication"