Merge pull request #17 from IMS-Network/dev-thefourcraft

Add HomepageIntro component and styles

docusaurus.config.ts

@@ -54,6 +54,15 @@ const config: Config = {
     ],
   ],
 
+  scripts: [ 
+    "https://cdn.enable.co.il/licenses/enable-L14970n18edgjtql-1022-44220/init.js",
+    {
+        src: 'https://analytics.ims-network.net/script.js',
+        async: true,
+        "data-website-id": "6d029622-f15b-4da6-bd7a-450d93edab77",
+    },
+],
+
   themeConfig: {
     // Replace with your project's social card
     image: 'img/icon.png',

src/components/HomepageIntro/index.tsx

@@ -0,0 +1,28 @@
+// HomepageIntro.tsx
+import React from 'react';
+import styles from './styles.module.css';
+
+const HomepageIntro: React.FC = () => {
+  return (
+    <div className={styles.homepageSectionIntro}>
+      <div className={styles.homepageContainer}>
+        <div className={styles.intro}>
+          <div className={styles.introSection}>
+            <h1 className={styles.introHeader}>
+              The complete reference for IOTA and Shimmer
+            </h1>
+            <p className={styles.introDescription}>
+              Build apps capable of taking millions of users on journeys they've never been on before. Simple. Scalable. Secure.
+            </p>
+            <div className={styles.introButtons}>
+              <a className={`${styles.introButton} ${styles.buttonOutline} ${styles.buttonPrimary}`} href="/get-started/introduction/">Introduction</a>
+              <a className={`${styles.introButton} ${styles.buttonPrimary}`} href="/build/welcome/">Start building</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HomepageIntro;

src/components/HomepageIntro/styles.module.css

@@ -0,0 +1,160 @@
+/* styles.module.css */
+.homepageSectionIntro {
+  background: linear-gradient(rgba(41, 56, 88, 0.3), rgba(19, 31, 55, 0.3));
+  border-bottom: 1px solid #293856;
+  box-sizing: border-box;
+  color: #d7e1f4;
+  display: flex;
+  font-family: Inter, sans-serif;
+  font-weight: 200;
+  justify-content: center;
+  letter-spacing: 0.75px;
+  line-height: 26.4px;
+  margin-bottom: 8rem;
+  scrollbar-color: rgb(67, 82, 112) rgba(0, 0, 0, 0);
+  scrollbar-width: auto;
+  word-wrap: break-word;
+}
+
+.homepageContainer {
+  align-items: center;
+  box-sizing: border-box;
+  color: #d7e1f4;
+  display: flex;
+  flex-direction: column;
+  font-family: Inter, sans-serif;
+  font-weight: 200;
+  letter-spacing: 0.75px;
+  line-height: 26.4px;
+  margin: 0px 8rem;
+  max-width: 1140px;
+  row-gap: 1rem;
+  scrollbar-color: rgb(67, 82, 112) rgba(0, 0, 0, 0);
+  scrollbar-width: auto;
+  width: 100%;
+  word-wrap: break-word;
+}
+
+.intro {
+  align-items: flex-end;
+  /* background: url("/assets/images/header-9c541e9777c8818d1d54cb6664d471dd.svg") 100% 100% / 45% no-repeat; */
+  box-sizing: border-box;
+  color: #d7e1f4;
+  display: flex;
+  font-family: Inter, sans-serif;
+  font-weight: 200;
+  justify-content: space-between;
+  letter-spacing: 0.75px;
+  line-height: 26.4px;
+  scrollbar-color: rgb(67, 82, 112) rgba(0, 0, 0, 0);
+  scrollbar-width: auto;
+  width: 100%;
+  word-wrap: break-word;
+}
+
+.introSection {
+  box-sizing: border-box;
+  color: #d7e1f4;
+  font-family: Inter, sans-serif;
+  font-weight: 200;
+  letter-spacing: 0.75px;
+  line-height: 26.4px;
+  margin: 6rem 0px;
+  max-width: 25rem;
+  scrollbar-color: rgb(67, 82, 112) rgba(0, 0, 0, 0);
+  scrollbar-width: auto;
+  word-wrap: break-word;
+}
+
+.introHeader {
+  box-sizing: border-box;
+  color: #f7f9fd;
+  font-family: "Metropolis Semi Bold", sans-serif;
+  font-size: 40px;
+  font-weight: 400;
+  letter-spacing: 0.75px;
+  line-height: 50px;
+  margin: 0px 0px 16px;
+  scrollbar-color: rgb(67, 82, 112) rgba(0, 0, 0, 0);
+  scrollbar-width: auto;
+  word-wrap: break-word;
+}
+
+.introDescription {
+  box-sizing: border-box;
+  color: #d7e1f4;
+  font-family: Inter, sans-serif;
+  font-weight: 200;
+  letter-spacing: 0.75px;
+  line-height: 26.4px;
+  margin: 0px 0px 20px;
+  scrollbar-color: rgb(67, 82, 112) rgba(0, 0, 0, 0);
+  scrollbar-width: auto;
+  word-wrap: break-word;
+}
+
+.introButtons {
+  box-sizing: border-box;
+  color: #d7e1f4;
+  display: flex;
+  flex-wrap: wrap;
+  font-family: Inter, sans-serif;
+  font-weight: 200;
+  gap: 1rem;
+  letter-spacing: 0.75px;
+  line-height: 26.4px;
+  scrollbar-color: rgb(67, 82, 112) rgba(0, 0, 0, 0);
+  scrollbar-width: auto;
+  word-wrap: break-word;
+}
+
+.introButton {
+  background-color: rgba(0, 0, 0, 0);
+  border: 1px solid #14cabf;
+  border-radius: 8px;
+  box-sizing: border-box;
+  color: #3391ff;
+  cursor: pointer;
+  display: inline-block;
+  flex: 1 1 0px;
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.75px;
+  line-height: 1.5;
+  padding: 12px 24px;
+  text-align: center;
+  text-decoration: none;
+  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.buttonOutline {
+background-color: transparent;
+color: #14cabf;
+border-color: #14cabf;
+}
+
+.buttonPrimary {
+background-color: #14cabf;
+color: #f7f9fd;
+border-color: #14cabf;
+}
+
+.buttonPrimary:hover,
+.buttonOutline:hover {
+color: #f7f9fd;
+background-color: rgba(20, 202, 191, 0.1);
+}
+
+@media (max-width: 996px) {
+.homepageContainer {
+  margin: 0px 2rem;
+}
+
+.intro {
+  background: none;
+}
+}

src/pages/index.tsx

@@ -4,6 +4,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
 import Heading from "@theme/Heading";
+import HomepageIntro from "@site/src/components/HomepageIntro";
 
 import styles from "./index.module.css";
 
@@ -37,8 +38,10 @@ export default function Home(): JSX.Element {
       description="Description will go into a meta tag in <head />"
     >
       <HomepageHeader />
+      <HomepageIntro />
       <main>
         <HomepageFeatures />
+
       </main>
     </Layout>
   );