fix: minor fixes

status-im · Jun 20, 2023 · 50c37f1 · 50c37f1
1 parent de71471
commit 50c37f1
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 28 deletions.
diff --git a/apps/website/src/components/footer/footer-mobile.tsx b/apps/website/src/components/footer/footer-mobile.tsx
@@ -14,11 +14,11 @@ type Props = {
 export const FooterMobile = (props: Props) => {
   const { hasBorderTop } = props
 
-  const borderTopClassnames = hasBorderTop ? 'border-t' : 'border-t-0'
-
   return (
     <footer
-      className={`border-neutral-80 block border-dashed ${borderTopClassnames} pb-12 sm:hidden`}
+      className={`border-neutral-80 block border-dashed ${
+        hasBorderTop ? 'border-t' : 'border-t-0'
+      } pb-12 sm:hidden`}
     >
       <div className="">
         <div className="flex flex-col px-2 pt-6">

diff --git a/apps/website/src/components/wallet/hero-section.tsx b/apps/website/src/components/wallet/hero-section.tsx
@@ -6,7 +6,7 @@ import { ParalaxCircle } from './parallax-circle'
 const HeroSection = () => {
   return (
     <>
-      <div className="relative mx-40 mb-24 grid gap-8">
+      <div className="relative mb-16 grid px-5 lg:mb-24 lg:px-40">
         <ParalaxCircle initialLeft={-206} initialTop={-170} />
         <div className="relative flex flex-col items-center justify-center">
           <div className="inline-flex">
@@ -17,7 +17,7 @@ const HeroSection = () => {
               label="Wallet"
             />
           </div>
-          <h1 className="max-w-[600px] py-4 pb-5 text-center text-[88px] font-bold leading-[84px]">
+          <h1 className="max-w-[600px] py-4 pb-4 text-center text-[48px] font-bold leading-[50px] lg:pb-5 lg:text-[88px] lg:leading-[84px]">
             The future
             <br />
             is multi-chain
@@ -31,7 +31,7 @@ const HeroSection = () => {
         </div>
 
         <div className="relative flex justify-center">
-          <div className="border-neutral-80/20 mt-16 inline-flex rounded-[20px] border border-dashed p-2">
+          <div className="border-neutral-80/20 mt-6 inline-flex rounded-[20px] border border-dashed p-2 lg:mt-16">
             <Button
               size={40}
               icon={<DownloadIcon size={20} />}

diff --git a/apps/website/src/components/wallet/parallax-circle.tsx b/apps/website/src/components/wallet/parallax-circle.tsx
@@ -12,7 +12,7 @@ const ParalaxCircle = (props: ParalaxProps) => {
 
   return (
     <div
-      className=" bg-customisation-yellow-50 absolute z-[0] h-[676px] w-[676px] rounded-full opacity-[0.08] blur-[260px]"
+      className=" bg-customisation-yellow-50 absolute z-[0] h-[676px] w-[676px] rounded-full opacity-[0.10] blur-[260px]"
       style={{
         left: `${props.initialLeft}px`,
         top: `${top}px`,

diff --git a/apps/website/src/components/wallet/video-section.tsx b/apps/website/src/components/wallet/video-section.tsx
@@ -4,19 +4,11 @@ import { ParalaxCircle } from './parallax-circle'
 
 const VideoSection = () => {
   return (
-    <div className="relative">
+    <div className="relative flex flex-col md:flex-row">
       <ParalaxCircle initialLeft={-100} initialTop={-100} />
-      <div className="absolute right-[-5px] top-0 flex justify-center">
-        <video autoPlay loop muted playsInline>
-          <source
-            src="/images/wallet/vitalik.mp4"
-            type="video/mp4;codecs=hvc1"
-          />
-          <source src="/images/wallet/vitalik.webm" type="video/webm" />
-        </video>
-      </div>
-      <div className="relative flex flex-col pl-[164px] pt-[240px]">
-        <h1 className="text-[64px] font-bold leading-[68px]">
+
+      <div className="relative flex flex-col px-5 pt-24 lg:px-[164px] lg:pt-[240px]">
+        <h1 className="text-[40px] font-bold leading-[44px] lg:text-[64px] lg:leading-[68px]">
           Fully
           <br />
           Decentralized
@@ -25,7 +17,7 @@ const VideoSection = () => {
         </h1>
 
         <div className="flex max-w-[462px] flex-col pt-4">
-          <Text size={19}>
+          <Text size={27}>
             Status supports blockchain networks that are fully committed to
             decentralization.
           </Text>
@@ -68,6 +60,15 @@ const VideoSection = () => {
           </div>
         </div>
       </div>
+      <div className="relative right-[-5px] top-0 flex justify-center md:absolute">
+        <video autoPlay loop muted playsInline>
+          <source
+            src="/images/wallet/vitalik.mp4"
+            type="video/mp4;codecs=hvc1"
+          />
+          <source src="/images/wallet/vitalik.webm" type="video/webm" />
+        </video>
+      </div>
     </div>
   )
 }

diff --git a/apps/website/src/layouts/app-layout.tsx b/apps/website/src/layouts/app-layout.tsx
@@ -22,13 +22,13 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
     <>
       <FloatingMenuDesktop />
       <FloatingMenuMobile />
-      <div className="min-h-full bg-neutral-100">
+      <div className="min-h-full w-full bg-neutral-100">
         <NavDesktop />
         <NavMobile />
 
         {/* ROUNDED WHITE BG */}
-        <div className="flex justify-center">
-          <div className="bg-white-100 mx-1 min-h-[900px] w-full max-w-[1504px] rounded-3xl">
+        <div className="flex justify-center lg:p-1">
+          <div className="bg-white-100 min-h-[900px] w-full max-w-[1504px] rounded-3xl">
             {children}
           </div>
         </div>

diff --git a/apps/website/src/pages/features/wallet.tsx b/apps/website/src/pages/features/wallet.tsx
@@ -13,7 +13,7 @@ import type { Page } from 'next'
 const WalletPage: Page = () => {
   return (
     <>
-      <div className="overflow-hidden pt-32">
+      <div className="overflow-hidden pt-16 lg:pt-32">
         <HeroSection />
         <VideoSection />
         <div className="relative pt-[220px]">

diff --git a/apps/website/src/pages/index.tsx b/apps/website/src/pages/index.tsx
@@ -8,8 +8,8 @@ import type { Page } from 'next'
 const HomePage: Page = () => {
   return (
     <>
-      <div className="bg-white-100 mx-1 rounded-3xl py-32">
-        <div className="mx-40 mb-40 grid gap-8">
+      <div className="px-5 py-32 lg:px-40">
+        <div className="mb-40 grid gap-8 px-5 ">
           <div className="grid gap-6">
             <h1 className="text-7xl font-bold">
               Make the
@@ -23,7 +23,7 @@ const HomePage: Page = () => {
           </div>
 
           <div className="grid gap-4">
-            <div className="flex gap-3">
+            <div className="flex flex-col gap-3 lg:flex-col">
               <Button size={40} icon={<DownloadIcon size={20} />}>
                 Sign up for early access
               </Button>
@@ -80,7 +80,7 @@ type FeatureSectionProps = {
 const FeatureSection = ({ title, description }: FeatureSectionProps) => {
   return (
     <section className="px-10">
-      <div className="mb-24 flex justify-between">
+      <div className="mb-24 flex flex-col justify-between lg:flex-row">
         <h2 className="flex-1 whitespace-pre-line text-6xl font-bold">
           {title}
         </h2>