responsive updates to the homepage

mobxjs · Dec 28, 2023 · 57a54d0 · 57a54d0
1 parent 99a12a8
commit 57a54d0
Show file tree

Hide file tree

Showing 3 changed files with 293 additions and 106 deletions.
diff --git a/docs/src/components/Sponsor.tsx b/docs/src/components/Sponsor.tsx
@@ -12,27 +12,58 @@ const sponsors = [
   {
     logo: require('../images/publicis-sapient-sponsor.png').default,
     url: 'https://publicis.sapient.com',
+    active: false,
   },
   {
     logo: require('../images/wunderdog-sponsor.png').default,
     url: 'https://wunderdog.fi',
+    active: false,
   },
   {
     logo: 'https://www.netlify.com/img/global/badges/netlify-color-bg.svg',
     url: 'https://www.netlify.com',
+    active: true,
   },
 ];
 export const SponsorList = () => {
   return (
-    <ul style={{ listStyle: 'none', padding: 0 }}>
-      {sponsors.map((s) => (
-        <li
-          style={{ display: 'inline-block', marginRight: 40, marginTop: 20 }}
-          key={s.url}
+    <>
+      <ul
+        className={'list-none flex flex-row items-center gap-8 sm:gap-16 p-0'}
+      >
+        <a
+          href={'https://opencollective.com/mobx#sponsor'}
+          className={
+            'bg-gray-100 hover:bg-blue-100 border-gray-300 border border-solid rounded-lg items-center flex flex-col px-4 hover:no-underline'
+          }
         >
-          <Sponsor logo={s.logo} url={s.url} />
-        </li>
-      ))}
-    </ul>
+          <div className={'text-5xl'}>+</div>
+          <div className={'text-lg sm:text-xl'}>Become a sponsor</div>
+        </a>
+
+        {sponsors
+          .filter((x) => x.active)
+          .map((s) => (
+            <li className={'inline-block'} key={s.url}>
+              <Sponsor logo={s.logo} url={s.url} />
+            </li>
+          ))}
+      </ul>
+
+      <h2 className={'text-xl sm:text-2xl text-gray-500 mt-16 mb-8'}>
+        Past Sponsors
+      </h2>
+      <ul
+        className={'list-none flex flex-row items-center gap-8 sm:gap-16 p-0'}
+      >
+        {sponsors
+          .filter((x) => !x.active)
+          .map((s) => (
+            <li className={'inline-block opacity-40'} key={s.url}>
+              <Sponsor logo={s.logo} url={s.url} />
+            </li>
+          ))}
+      </ul>
+    </>
   );
 };
diff --git a/docs/src/components/Testimonial.tsx b/docs/src/components/Testimonial.tsx
@@ -18,14 +18,14 @@ export const Profile: FunctionComponent<{
   style?: CSSProperties;
 }> = ({ photo, author, title, twitter, size = 64, style }) => {
   return (
-    <div className={'flex flex-row'}>
+    <div className={'flex flex-col lg:flex-row gap-4'}>
       <img
         src={photo}
         width={size}
         height={size}
         className={'rounded-full border-solid border-2 border-blue-300'}
       />
-      <div className={'flex flex-col flex-1 ml-8'}>
+      <div className={'flex flex-col flex-1'}>
         <a href={twitter} className={'text-xl text-blue-300 mb-2'}>
           {author}
         </a>
@@ -43,7 +43,11 @@ const Testimonial: FunctionComponent<Props> = ({
   twitter,
 }) => {
   return (
-    <div className={'flex flex-col shadow-sm shadow-white rounded-xl p-8'}>
+    <div
+      className={
+        'flex flex-col border-gray-500 border-solid border rounded-xl p-4 sm:p-8'
+      }
+    >
       <div className={'text-xl mb-8'}>{message}</div>
       <Profile
         photo={photoUrl}
@@ -57,7 +61,9 @@ const Testimonial: FunctionComponent<Props> = ({
 
 export const TestimonialList: FunctionComponent = () => {
   return (
-    <div className={'grid grid-cols-3 gap-8'}>
+    <div
+      className={'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-16'}
+    >
       {testimonials.map((item) => (
         <Testimonial {...item} key={item.author} />
       ))}