Mobile layout

amannn · Dec 25, 2023 · 548ba17 · 548ba17
1 parent 3f56419
commit 548ba17
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/docs/components/FeaturePanel.tsx b/docs/components/FeaturePanel.tsx
@@ -6,13 +6,13 @@ type Props = {
 
 export default function FeaturePanel({code, description, title}: Props) {
   return (
-    <div className="-mx-4 flex flex-col overflow-hidden border-slate-200 lg:mx-0">
+    <div className="flex flex-col overflow-hidden border-slate-200">
       {code && (
         <div className="grow rounded-sm bg-white dark:bg-slate-800">
-          <pre className="-ml-4 overflow-x-auto !p-4 lg:!p-6">{code}</pre>
+          <pre className="-ml-4 overflow-x-auto !p-4 md:!p-6">{code}</pre>
         </div>
       )}
-      <div className="p-4 lg:p-6">
+      <div className="p-4 md:p-6">
         <h3 className="font-semibold text-slate-900 dark:text-white">
           {title}
         </h3>

diff --git a/docs/components/UserTestimonial.tsx b/docs/components/UserTestimonial.tsx
@@ -34,8 +34,8 @@ export default function UserTestimonial({
     <div
       className={clsx(
         className,
-        'relative -mx-4 flex overflow-hidden rounded-sm p-4 lg:mx-0 lg:p-6',
-        featured ? 'bg-white pt-24 dark:bg-slate-800 lg:col-span-2' : 'lg:pt-24'
+        'relative flex overflow-hidden rounded-sm p-6 pt-24',
+        featured && 'bg-white dark:bg-slate-800 md:col-span-2'
       )}
     >
       {bgUrlBright && <BgImage className="dark:hidden" src={bgUrlBright} />}

diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
@@ -62,7 +62,7 @@ import UserTestimonial from 'components/UserTestimonial';
   </div>
 </Section>
 <Section title="Trusted by the Next.js community" description="Powering localized web experiences from marketing sites to e-commerce portals and sophisticated apps, next-intl ensures your users will be as happy as the developers building them.">
-  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-20">
+  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-20">
     <UserTestimonial
       featured
       userName="Kieran McHugh"
@@ -83,7 +83,7 @@ import UserTestimonial from 'components/UserTestimonial';
       portraitUrl="/user-cali-castle.png"
       href="https://zolplay.com"
       linkTitle="Zolplay"
-      linkSubtitle="Software development company"
+      linkSubtitle="Multilingual team from China"
     />
     <UserTestimonial
       userName="Colin Sidoti"
@@ -108,7 +108,7 @@ import UserTestimonial from 'components/UserTestimonial';
       bgUrlDark="/testimonial-bg-watershed-dark.png"
     />
     <UserTestimonial
-      className="lg:-mt-16"
+      className="md:-mt-16"
       userName="Alvar Lagerlöf"
       position="Senior Frontend Developer at Motatos"
       quote="It's a great tool. We're using it now for our App Router rollout."
@@ -118,7 +118,7 @@ import UserTestimonial from 'components/UserTestimonial';
       linkSubtitle="Grocery e-commerce"
     />
     <UserTestimonial
-      className="lg:-mt-16"
+      className="md:-mt-16"
       userName="Jökull Solberg"
       position="CTO of Trip to Japan"
       quote="Amazing work on this library, launching our site today."
@@ -128,12 +128,12 @@ import UserTestimonial from 'components/UserTestimonial';
       linkSubtitle="Booking platform"
     />
   </div>
-  <div className="mt-10 lg:mt-24 text-sm lg:ml-6 text-slate-600 dark:text-slate-400">
+  <div className="mt-24 text-sm ml-6 text-slate-600 dark:text-slate-400">
     Using next-intl too? <Link target="_blank" href="https://github.com/amannn/next-intl/issues/138">Let us know!</Link>
   </div>
 </Section>
-<div className="pb-20 lg:pb-40 text-center">
-  <div className="py-20 lg:py-40">
+<div className="pb-40 text-center">
+  <div className="py-40">
     <LinkButton href="/docs/getting-started">Get started with next-intl</LinkButton>
     <div className="flex gap-6 mt-8 justify-center">
       <Link href="/docs/usage">Usage guide</Link>