adjsut typos

AdVision-Group · Jul 8, 2023 · e4f43a7 · e4f43a7
1 parent b03dbfe
commit e4f43a7
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 141 deletions.
diff --git a/components/otc-section/otc-section.component.tsx b/components/otc-section/otc-section.component.tsx
@@ -81,7 +81,7 @@ const OTCSection = () => {
       whileInView="visible"
       viewport={{ once: true }}
     >
-      <H3 variants={headerVariants}>Over-the-counter trading</H3>
+      <H3 variants={headerVariants}>Over-the-counter trading.</H3>
       <P variants={pVariants}>
         Trade your favorite assets directly with other traders. No trusted third
         parties and no slippage. Set your price and let others fill your orders.

diff --git a/components/resources-section/resources-section.component.tsx b/components/resources-section/resources-section.component.tsx
@@ -0,0 +1,134 @@
+import styled from 'styled-components'
+import localFont from '@next/font/local'
+
+// import { Button } from "../button/button.component"
+import ResourcesArticle from '../resourcess-article/resourcess-article.component'
+
+import { IArticle } from '../../types/resources.types'
+
+// const headerFont = localFont({
+// 	src: [
+// 		{
+// 			path: "../../assets/fonts/mona-sans/WOFF-2/Mona-Sans-BoldWide.woff2",
+// 			weight: "700",
+// 			style: "bold",
+// 		},
+// 	],
+// })
+
+const ResourcessSection = () => {
+  const articles: IArticle[] = [
+    {
+      icon: {
+        src: '/assets/resourcess-section/tok-icon.svg',
+        alt: 'tokenomics icon',
+      },
+      label: 'knowledge',
+      heading: 'hydra<sup>DX</sup> tokenomics',
+      cta: {
+        label: 'open',
+        href: 'https://docs.hydradx.io/tokenomics',
+      },
+    },
+    {
+      icon: {
+        src: '/assets/resourcess-section/press-kit-icon.svg',
+        alt: 'press kit icon',
+      },
+      label: 'resources',
+      heading: 'press kit resources',
+      cta: {
+        label: 'open',
+        href: 'https://github.com/galacticcouncil/HydraDX-assets/tree/main/images',
+      },
+    },
+    {
+      icon: {
+        src: '/assets/resourcess-section/github-icon.svg',
+        alt: 'github icon',
+      },
+      label: 'chain',
+      heading: 'Follow our Newsletter',
+      cta: {
+        label: 'open',
+        href: 'https://hydradx.substack.com/',
+      },
+    },
+  ]
+
+  return (
+    <Section>
+      <H2>
+        Hydra<sup>DX</sup> Resources
+      </H2>
+
+      <Flex>
+        {articles.map((article, index) => (
+          <ResourcesArticle key={index} article={article} />
+        ))}
+      </Flex>
+    </Section>
+  )
+}
+
+export default ResourcessSection
+
+const Section = styled.section`
+  max-width: 110rem;
+  margin: 0 auto 4.1rem;
+
+  @media all and (min-width: ${({ theme }) => theme.breakpoints.sm}) {
+    @media all and (min-width: ${({ theme }) => theme.breakpoints.md}) {
+      margin: 0 auto 8.1rem;
+      @media all and (min-width: ${({ theme }) => theme.breakpoints.lg}) {
+      }
+    }
+  }
+`
+
+const H2 = styled.h2`
+  font-size: 3.4rem;
+  line-height: 130%;
+
+  text-align: center;
+  letter-spacing: 0.02em;
+
+  color: #ffffff;
+
+  margin-bottom: 4.4rem;
+
+  font-family: 'MonaSans';
+  font-weight: 700;
+  font-style: bold;
+
+  sup {
+    vertical-align: top;
+    font-size: 2.2rem;
+    position: relative;
+    top: -0.5rem;
+  }
+
+  @media all and (min-width: ${({ theme }) => theme.breakpoints.sm}) {
+    @media all and (min-width: ${({ theme }) => theme.breakpoints.md}) {
+      margin-bottom: 8.3rem;
+      font-size: 5.2rem;
+
+      sup {
+        vertical-align: top;
+        font-size: 3.2rem;
+        position: relative;
+        top: -1rem;
+      }
+      @media all and (min-width: ${({ theme }) => theme.breakpoints.lg}) {
+      }
+    }
+  }
+`
+
+const Flex = styled.div`
+  /* border: 1px solid green; */
+  display: flex;
+  justify-content: center;
+  gap: 4.5rem;
+  flex-wrap: wrap;
+`
diff --git a/...ss-section/resourcess-section.stories.tsx → ...ces-section/resources-section.stories.tsx b/...ss-section/resourcess-section.stories.tsx → ...ces-section/resources-section.stories.tsx
@@ -1,10 +1,10 @@
-import { Story, Meta } from "@storybook/react"
+import { Story, Meta } from '@storybook/react'
 
-import ResourcessSection from "./resourcess-section.component"
+import ResourcessSection from './resources-section.component'
 
 const meta: Meta = {
-	title: "Sections/Resourcess",
-	component: ResourcessSection,
+  title: 'Sections/Resourcess',
+  component: ResourcessSection,
 }
 
 export default meta

diff --git a/components/resourcess-section/resourcess-section.component.tsx b/components/resourcess-section/resourcess-section.component.tsx
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -10,7 +10,7 @@ import OmnipoolSection from '../components/omnipool-section/omnipool-section.com
 import ProtocolSection from '../components/protocol-section/protocol-section.component'
 import RoadmapSection from '../components/roadmap-section/roadmap-section.component'
 import JoinTheNetworkSection from '../components/join-the-network-section/join-the-network-section.component'
-import ResourcessSection from '../components/resourcess-section/resourcess-section.component'
+import ResourcesSection from '../components/resources-section/resources-section.component'
 import FollowUsSection from '../components/follow-us-section/follow-us-section.component'
 import OTCSection from '../components/otc-section/otc-section.component'
 
@@ -66,7 +66,7 @@ export default function Home() {
       <ProtocolSection />
       <RoadmapSection />
       <JoinTheNetworkSection />
-      <ResourcessSection />
+      <ResourcesSection />
       <FollowUsSection />
     </>
   )