fix: new home landing (#115)

consolelabs · Nov 9, 2023 · 0acb1b9 · 0acb1b9 · vercel · Nov 9, 2023
1 parent ef8f838
commit 0acb1b9
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 65 deletions.
diff --git a/apps/mochi-web/app/layout/footer.tsx b/apps/mochi-web/app/layout/footer.tsx
@@ -65,11 +65,11 @@ export const Footer = () => {
               </a>
             </div>
           </div>
-          <div className="flex flex-col justify-center items-end ml-auto">
+          <div className="flex flex-col justify-center items-center mx-auto md:items-end md:mr-0 md:ml-auto">
             <div className="mb-6 text-xs font-normal text-right text-footer-body">
               Copyright © {year} Mochi, All rights reserved
             </div>
-            <div className="flex gap-4 justify-end items-center">
+            <div className="flex gap-2 items-center">
               <a
                 href={SOCIAL_LINKS.CONSOLE}
                 target="_blank"

diff --git a/apps/mochi-web/components/Feed/index.tsx b/apps/mochi-web/components/Feed/index.tsx
@@ -101,7 +101,7 @@ export default function Feed({ className = '' }: Props) {
         className="overflow-auto px-8"
       >
         <div style={{ minWidth: 1440 }}>
-          <div className="flex sticky top-0 z-20 flex-1 bg-feed-bg">
+          <div className="flex sticky top-0 z-10 flex-1 bg-feed-bg">
             {[
               'issued by',
               '',
@@ -136,7 +136,7 @@ export default function Feed({ className = '' }: Props) {
                 }
               }}
               className={clsx(
-                'flex absolute left-1/2 top-full z-20 gap-x-1 items-center py-1 px-2 mt-2 rounded-full transition -translate-x-1/2 bg-white-pure hover:bg-neutral-300',
+                'flex absolute left-[calc((100vw-4rem)/2)] top-full z-20 gap-x-1 items-center py-1 px-2 mt-2 rounded-full transition -translate-x-1/2 bg-white-pure hover:bg-neutral-300',
                 {
                   'opacity-0': !isShowTopFade,
                   'opacity-100 translate-y-2': isShowTopFade,
@@ -152,7 +152,7 @@ export default function Feed({ className = '' }: Props) {
             </button>
           </div>
 
-          <div className="flex relative z-10 flex-col flex-1 min-h-0">
+          <div className="flex relative flex-col flex-1 min-h-0">
             <AnimatePresence>
               {loading
                 ? Array(10)

diff --git a/apps/mochi-web/components/MochiWidget/index.tsx b/apps/mochi-web/components/MochiWidget/index.tsx
@@ -50,7 +50,8 @@ export default function MochiWidget() {
     <div
       style={{
         height: 640,
-        width: 440,
+        maxWidth: 440,
+        minWidth: 340,
       }}
       className="overflow-hidden p-3 flex relative z-10 flex-col rounded-2xl border border-[#e5e4e3] shadow-xl bg-white-pure"
     >

diff --git a/apps/mochi-web/components/landing/GridFeatures.tsx b/apps/mochi-web/components/landing/GridFeatures.tsx
@@ -20,15 +20,17 @@ export function GridFeatures({ title, data, className }: Props) {
       ) : (
         title
       )}
-      <div className="grid grid-cols-3 auto-rows-auto gap-5">
+      <div className="flex flex-col gap-5 md:grid md:grid-cols-3 md:auto-rows-auto">
         {data.map((d) => {
           return (
-            <div key={d.id} className="flex flex-col p-6">
-              {d.icon}
-              <span className="mt-5 font-medium text-[22px] text-neutral-900">
-                {d.title}
-              </span>
-              <span className="mt-1 text-base font-thin text-neutral-700 line-clamp-4">
+            <div key={d.id} className="flex flex-col p-4 md:p-6">
+              <div className="flex flex-row gap-x-3 items-center md:flex-col md:items-start">
+                {d.icon}
+                <span className="text-lg font-medium md:mt-5 text-neutral-900 md:text-[22px]">
+                  {d.title}
+                </span>
+              </div>
+              <span className="mt-3 text-base font-thin md:mt-1 text-neutral-700 line-clamp-4">
                 {d.body}
               </span>
             </div>

diff --git a/apps/mochi-web/components/landing/LivePlatforms.tsx b/apps/mochi-web/components/landing/LivePlatforms.tsx
@@ -11,15 +11,15 @@ export function LivePlatforms({ className = '' }: { className?: string }) {
   return (
     <div className={clsx('flex flex-col', className)}>
       <span className="text-sm font-medium">Mochi is live on</span>
-      <ul className="flex flex-wrap gap-3 mt-2">
+      <ul className="flex flex-col gap-2 mt-2 md:flex-row">
         {[
           {
             text: (
               <span className="text-sm font-medium transition group-hover:text-blue-700 text-neutral-900">
                 Web
               </span>
             ),
-            icon: <IconMonitor className="w-4 h-4" />,
+            icon: <IconMonitor className="flex-shrink-0 w-4 h-4" />,
             href: '#',
           },
           {
@@ -29,7 +29,9 @@ export function LivePlatforms({ className = '' }: { className?: string }) {
                 <span className="text-[15px] leading-[15px]">Discord</span>
               </div>
             ),
-            icon: <IconDiscordColored className="-ml-1.5 w-6 h-6" />,
+            icon: (
+              <IconDiscordColored className="flex-shrink-0 -ml-1.5 w-6 h-6" />
+            ),
             href: '#',
           },
           {
@@ -39,13 +41,15 @@ export function LivePlatforms({ className = '' }: { className?: string }) {
                 <span className="text-[15px] leading-[15px]">Telegram</span>
               </div>
             ),
-            icon: <IconTelegramColored className="-ml-1.5 w-6 h-6" />,
+            icon: (
+              <IconTelegramColored className="flex-shrink-0 -ml-1.5 w-6 h-6" />
+            ),
             href: '#',
           },
         ].map(({ text, href, icon }, i) => (
           <li key={`mochi-is-live-on-${i}`} className="flex">
             <Link
-              className="flex gap-x-1 items-center py-2 px-4 rounded-lg border transition hover:text-blue-700 hover:bg-blue-100 hover:border-blue-300 group border-neutral-300 bg-white-pure"
+              className="flex flex-1 gap-x-1.5 justify-center items-center py-2 px-4 rounded-lg border transition md:flex-initial hover:text-blue-700 hover:bg-blue-100 hover:border-blue-300 group border-neutral-300 bg-white-pure"
               href={href}
             >
               {icon}

diff --git a/apps/mochi-web/components/stats.tsx b/apps/mochi-web/components/stats.tsx
@@ -18,11 +18,15 @@ function Spotlight({
   subtitle: string
 }) {
   return (
-    <div className="flex gap-x-5 items-center">
+    <div className="flex flex-col gap-y-2 items-center md:flex-row md:gap-x-5">
       {icon}
-      <p className="flex flex-col">
-        <span className="text-lg leading-8">{title}</span>
-        <span className="text-sm leading-5 text-neutral-600">{subtitle}</span>
+      <p className="flex flex-col items-center">
+        <span className="text-sm leading-5 md:text-lg md:leading-8">
+          {title}
+        </span>
+        <span className="text-xs leading-4 md:text-sm md:leading-5 text-neutral-600">
+          {subtitle}
+        </span>
       </p>
     </div>
   )
@@ -34,7 +38,7 @@ export default function Stats() {
   )
 
   return (
-    <div className="flex justify-between items-center my-10 landing-block">
+    <div className="flex justify-between items-center my-5 mt-10 md:my-10 landing-block">
       <Spotlight
         icon={<IconHeartColored className="w-8 h-8" />}
         title={`${data?.tips_given ?? 1602}+`}

diff --git a/apps/mochi-web/pages/index.tsx b/apps/mochi-web/pages/index.tsx
@@ -77,37 +77,38 @@ export default function Index() {
   return (
     <Layout>
       <SEO />
-      <div className="flex justify-center py-8 px-4 my-auto w-full md:p-10">
-        <div className="flex flex-col-reverse gap-x-10 gap-y-10 justify-center max-w-5xl md:flex-row">
-          <div className="flex flex-col flex-1 justify-center">
-            <p className="text-3xl md:text-4xl">
-              Send <span style={{ color: currencyColor }} ref={currency} />
-              <br />
-              to anyone on
-              <br />
-              <span style={{ color: platformColor }} ref={platform} />
-            </p>
-            <span className="mt-5 font-thin">
-              Use Mochi to send and receive any amount of crypto, directly on
-              your favorite Discord servers or Telegram groups, without having a
-              wallet or having to pay a single cent in fees.
-            </span>
+      <div className="grid grid-cols-1 auto-rows-min gap-5 py-8 px-4 m-auto w-full max-w-5xl md:grid-rows-2 md:p-10 md:grid-cols-min">
+        <div className="flex flex-col md:justify-end">
+          <p className="text-3xl md:text-4xl">
+            Send <span style={{ color: currencyColor }} ref={currency} />
+            <br />
+            to anyone on
+            <br />
+            <span style={{ color: platformColor }} ref={platform} />
+          </p>
+          <span className="mt-5 font-thin">
+            Use Mochi to send and receive any amount of crypto, directly on your
+            favorite Discord servers or Telegram groups, without having a wallet
+            or having to pay a single cent in fees.
+          </span>
+        </div>
 
-            <LivePlatforms className="mt-10" />
-            <SoonAvailablePlatforms className="mt-5" />
-            <Alert className="mt-5" appearance="info" size="sm">
-              <span>
-                To integrate and run the Mochi bot, embedded devices, or
-                leverage the userbase,{' '}
-                <a href="#" className="inline-block underline">
-                  check our Docs
-                </a>
-              </span>
-            </Alert>
-          </div>
-          <div className="flex relative flex-1">
-            <MochiWidget />
-          </div>
+        <div className="flex justify-center md:col-start-2 md:row-span-2">
+          <MochiWidget />
+        </div>
+
+        <div className="flex flex-col mt-5 md:mt-2">
+          <LivePlatforms />
+          <SoonAvailablePlatforms className="mt-5" />
+          <Alert className="mt-5" appearance="info" size="sm">
+            <span>
+              To integrate and run the Mochi bot, embedded devices, or leverage
+              the userbase,{' '}
+              <a href="#" className="inline-block underline">
+                check our Docs
+              </a>
+            </span>
+          </Alert>
         </div>
       </div>
       <Stats />
@@ -163,55 +164,61 @@ export default function Index() {
             id: 'support-on-chain-and-hybrid',
             title: 'Support On-chain & Hybrid',
             body: 'Lorem ipsum dolor sit amet consectetur. Laoreet risus sagittis laoreet mi. Diam mauris praesent cursus adipiscing. Et aliquam tellus purus odio sapien id arcu egestas. Commodo venenatis aliquet nunc commodo.',
-            icon: <IconBlocksColored className="w-12 h-12" />,
+            icon: <IconBlocksColored className="w-8 h-8 md:w-12 md:h-12" />,
           },
           {
             id: 'self-custodial',
             title: 'Self-custodial',
             body: 'Lorem ipsum dolor sit amet consectetur. Laoreet risus sagittis laoreet mi. Diam mauris praesent cursus adipiscing. Et aliquam tellus purus odio sapien id arcu egestas. Commodo venenatis aliquet nunc commodo.',
-            icon: <IconHandKeyColored className="w-12 h-12" />,
+            icon: <IconHandKeyColored className="w-8 h-8 md:w-12 md:h-12" />,
           },
           {
             id: 'invisible-wallets',
             title: 'Invisible Wallets',
             body: 'Lorem ipsum dolor sit amet consectetur. Laoreet risus sagittis laoreet mi. Diam mauris praesent cursus adipiscing. Et aliquam tellus purus odio sapien id arcu egestas. Commodo venenatis aliquet nunc commodo.',
-            icon: <IconWalletPasswordColored className="w-12 h-12" />,
+            icon: (
+              <IconWalletPasswordColored className="w-8 h-8 md:w-12 md:h-12" />
+            ),
           },
           {
             id: 'multi-auth-method',
             title: 'Multi Auth Method',
             body: 'Lorem ipsum dolor sit amet consectetur. Laoreet risus sagittis laoreet mi. Diam mauris praesent cursus adipiscing. Et aliquam tellus purus odio sapien id arcu egestas. Commodo venenatis aliquet nunc commodo.',
-            icon: <IconLayersColored className="w-12 h-12" />,
+            icon: <IconLayersColored className="w-8 h-8 md:w-12 md:h-12" />,
           },
           {
             id: 'account-abstraction',
             title: 'Account Abstraction',
             body: 'Lorem ipsum dolor sit amet consectetur. Laoreet risus sagittis laoreet mi. Diam mauris praesent cursus adipiscing. Et aliquam tellus purus odio sapien id arcu egestas. Commodo venenatis aliquet nunc commodo.',
-            icon: <IconPasswordLockColored className="w-12 h-12" />,
+            icon: (
+              <IconPasswordLockColored className="w-8 h-8 md:w-12 md:h-12" />
+            ),
           },
           {
             id: '?',
             title: '?',
             body: 'Lorem ipsum dolor sit amet consectetur. Laoreet risus sagittis laoreet mi. Diam mauris praesent cursus adipiscing. Et aliquam tellus purus odio sapien id arcu egestas. Commodo venenatis aliquet nunc commodo.',
-            icon: <IconPasswordLockColored className="w-12 h-12" />,
+            icon: (
+              <IconPasswordLockColored className="w-8 h-8 md:w-12 md:h-12" />
+            ),
           },
         ]}
       />
       <Divider />
       <SupportedPlatforms />
-      <div className="flex justify-center my-36 landing-block">
+      <div className="flex justify-center mb-8 md:my-36 landing-block">
         <div className="flex flex-col-reverse gap-y-10 w-full max-w-5xl md:flex-row">
           <div className="flex flex-col flex-1 gap-y-1">
-            <p className="text-4xl text-neutral-900">
+            <p className="text-3xl md:text-4xl text-neutral-900">
               Simple, intuitive commands
             </p>
-            <span className="mt-2 text-lg font-thin text-neutral-700">
+            <span className="mt-2 text-base font-thin md:text-lg text-neutral-700">
               Mochi has a single, extensible command for tipping, airdropping on
               users.
             </span>
             <LivePlatforms className="mt-3" />
           </div>
-          <div className="flex flex-1 gap-2 justify-center items-center">
+          <div className="hidden flex-1 gap-2 justify-center items-center md:flex">
             <Button className="!px-10">Login</Button>
             <Button color="info" variant="outline">
               View features

diff --git a/packages/icons/src/svg/telegram-colored.svg b/packages/icons/src/svg/telegram-colored.svg