Merge pull request #1274 from blocknative/feature/documentation-images

Update graphics, links, organization and addition of customization page and link

docs/src/lib/components/FeaturesSection.svelte

@@ -8,9 +8,9 @@
 
   import FrameworksGraphic from './svg/frameworks-group.svelte'
   import NetworksGraphic from './svg/networks-group.svelte'
-  import WalletsGraphic from './svg/wallets-group.svelte'
   import NotifyGraphic from './svg/notify-group.svelte'
   import AccountCenterGraphic from './svg/account-center-group.svelte'
+  import WalletsGraphic from './svg/wallet-row.svg'
 
   import InstallCode from './install-code.md'
 </script>
@@ -81,10 +81,10 @@
     </div>
   </Container>
   <ScrollContainer>
-    <WalletsGraphic />
+    <img src={WalletsGraphic} alt="onboard connect wallets" style="margin: 0 auto; max-width: none;">
   </ScrollContainer>
   <Container>
-    <div class="flexbox" style:padding={'4rem 1rem'}>
+    <div class="flexbox">
       <TextBlock
         title={'Real-time transaction notifications'}
         subtitle={''}
@@ -95,12 +95,12 @@
           <Button href="/examples/connect-wallet" buttonStyle={'link'}>{'View Demo'}</Button>
         </Flexbox>
       </TextBlock>
-      <NotifyGraphic />
+      <div><NotifyGraphic /></div>
     </div>
   </Container>
   <Container>
-    <div class="flexbox" style:gap={'4rem'} style:padding={'2rem'}>
-      <AccountCenterGraphic />
+    <div class="flexbox">
+      <div><AccountCenterGraphic /></div>
       <div>
         <TextBlock
           title={'Account Center'}
@@ -132,10 +132,9 @@
   }
 
   .features-b {
-    padding: 2rem;
-    /* gap: 16px; */
     height: auto;
     /* min-height: 288px; */
+    padding: 2rem;
     background: linear-gradient(87.71deg, rgba(0, 0, 0, 0) 0%, rgba(0, 209, 255, 0.02) 100%),
       #060d20;
     border: 1px solid rgba(255, 255, 255, 0.05);
@@ -156,9 +155,6 @@
   }
 
   .features-c {
-    /* width: 1440px; */
-    /* height: 1698px; */
-    /* min-height: 1698px; */
     background: radial-gradient(
         93.49% 93.49% at 50% 93.49%,
         rgba(20, 29, 107, 0.25) 0%,
@@ -170,24 +166,20 @@
 
   .flexbox {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4rem;
+    flex-flow: column nowrap;
+    gap: 3rem;
     padding: 2rem;
   }
   .flexbox > div {
-    min-width: 50%;
-    max-width: 100%;
-    /* display: flex; */
+    width: 100%;
+    flex: 50%;
   }
 
   @media screen and (min-width: 640px) {
     .flexbox {
-      /* display: flex; */
-      flex-direction: row;
-      /* align-items: center; */
-      /* gap: 4rem; */
-      /* padding: 2rem; */
+      flex-flow: row nowrap;
+      gap: 4rem;
+      padding: 3rem;
     }
   }
 </style>

docs/src/lib/components/Footer.svelte

@@ -1,6 +1,6 @@
 <script>
   import Flexbox from './base/Flexbox.svelte'
-  import PoweredByBadge from './svg/PoweredByBadge.svelte'
+  import PoweredByBn from './svg/powered-by-blocknative.svg'
 
   import DiscordIcon from '~icons/ri/discord-fill'
   import GitHubIcon from '~icons/ri/github-fill'
@@ -43,7 +43,7 @@
       </a>
     </Flexbox>
     <a href="//www.blocknative.com/" target="_blank">
-      <PoweredByBadge />
+      <img src={PoweredByBn} alt="Powered by Blocknative">
       <span class="sr-only">Powered by Blocknative</span>
     </a>
   </Flexbox>

docs/src/lib/components/HeroSection.svelte

@@ -1,11 +1,10 @@
 <script>
-  import heroBg from './svg/hero-bg.svg'
-  import heroImg from './svg/hero-img.svg'
-
+  import Button from './base/Button.svelte'
+  import Flexbox from './base/Flexbox.svelte'
   import CodeBlock from './base/CodeBlock.svelte'
 
-  import Flexbox from './base/Flexbox.svelte'
-  import Button from './base/Button.svelte'
+  import heroBg from './svg/hero-bg.svg'
+  import heroImg from './svg/hero-img.svg'
 </script>
 
 <section style="background-image: url({heroBg});">
@@ -26,20 +25,16 @@
       <Button href="/docs" label={'View Docs'} />
     </Flexbox>
   </div>
-
-  <img src={heroImg} alt="" />
+  <img src={heroImg} alt="onboard connect wallet" />
 </section>
 
 <style>
   section {
     position: relative;
     max-width: 100%;
-    /* height: auto; */
-    /* width: 1440px; */
-    min-height: 1140px;
-    padding: 2rem;
-    padding-top: 80px;
-
+    display: flex;
+    flex-flow: column;
+    align-items: center;
     background: radial-gradient(
         50% 50% at 50% 50%,
         rgba(0, 216, 255, 0.02) 0%,
@@ -48,20 +43,15 @@
       #060d20;
     background-size: cover;
     background-repeat: no-repeat;
-
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-    /* justify-content: center; */
   }
 
   img {
-    position: absolute;
-    bottom: 0;
+    position: relative;
     display: block;
     margin: 0 auto;
+    padding: 0 1rem;
     width: 100%;
-    max-width: 1243px;
+    max-width: 1240px;
   }
 
   .textblock {
@@ -72,7 +62,7 @@
 
     width: 100%;
     max-width: 760px;
-    margin: 32px;
+    padding: 5rem 2rem 4rem;
   }
 
   .textblock > div {

docs/src/lib/components/NavBar.svelte

@@ -36,14 +36,4 @@
     display: flex;
     gap: 2rem;
   }
-  /* .link-list a { */
-  /* blue/400 */
-  /* color: #929BED; */
-  /* margin: 1rem; */
-  /* } */
-
-  svg {
-    /* color: inherit; */
-    display: block;
-  }
 </style>

docs/src/lib/components/TestimonialSection.svelte

@@ -1,13 +1,13 @@
 <script>
-  import TestimonialsGraphic from './svg/logos-group.svelte'
+  import TestimonialsGraphic from './svg/logos-group.svg'
 </script>
 
 <section>
   <h1 class="text">
     {"Who's using web3-onboard?"}
   </h1>
   <div>
-    <TestimonialsGraphic />
+    <img src={TestimonialsGraphic} alt="Web3-Onboard-users">
   </div>
 </section>
 

docs/src/lib/components/ThemingSection.svelte

@@ -6,7 +6,7 @@
   import Container from './Container.svelte'
 
   import ThemingCode from './theming-code.md'
-  import ThemeCarousel from './svg/themes-carousel.svelte'
+  import ThemingGraphic from './svg/themes-example-carousel.svg'
 </script>
 
 <section>
@@ -28,13 +28,12 @@
     </div>
   </Container>
   <ScrollContainer style={'padding: 0 2rem'}>
-    <ThemeCarousel />
+    <img class="carousel-img" src={ThemingGraphic} alt="onboard connect wallet themes" >
   </ScrollContainer>
 </section>
 
 <style>
   section {
-    /* min-height: 991px; */
     background: radial-gradient(
         137.29% 137.29% at 50% -37.29%,
         rgba(99, 112, 229, 0.5) 0%,
@@ -66,9 +65,24 @@
     flex: 50%;
   }
 
+  .carousel-img {
+    height: 9rem;
+    width: auto;
+    max-width: none;
+  }
+
+  @media screen and (min-width: 640px) {
+    .carousel-img {
+      height: 20rem;
+    }
+  }
+
   @media screen and (min-width: 1024px) {
     .flexbox {
       flex-direction: row;
     }
+    .carousel-img {
+      height: auto;
+    }
   }
 </style>

docs/src/lib/components/base/Button.svelte

@@ -40,7 +40,7 @@
 
     border: none;
     border-radius: 4px;
-    padding: 1rem 2rem;
+    padding: 1rem 2.5rem;
 
     /* text */
     font-family: 'Sofia Pro';

docs/src/lib/components/index.ts

@@ -1,3 +1,2 @@
 export * from './examples'
-export { default as NavBar } from './NavBar.svelte'
 export { default as ThemeCustomizer } from './ThemeCustomizer.svelte'