diff --git a/.gitignore b/.gitignore
index 8f322f0..6038927 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
@@ -33,3 +34,41 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+=======
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+>>>>>>> Incoming
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..5d0470f
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,21 @@
+{
+  "detectedConfig": {
+    "typescript": false,
+    "naming": "Pascal Case",
+    "unit": "px",
+    "framework": "nextjs",
+    "styling": "'Inline Styles"
+  },
+  "locofyConfig": {
+    "project": "ResourceHub",
+    "id": "65dc284e8c2ae4a3e14c22c8",
+    "framework": "react-nextjs",
+    "typescript": false,
+    "styling": "CSS Modules",
+    "unit": "rem",
+    "naming": "Kebab Case",
+    "path": "public/",
+    "componentsPath": "e:\\Res_Hub\\resource-hub\\components",
+    "screensPath": "e:\\Res_Hub\\resource-hub\\pages"
+  }
+}
\ No newline at end of file
diff --git a/components/footer-with-links-list.js b/components/footer-with-links-list.js
new file mode 100644
index 0000000..c30fc1a
--- /dev/null
+++ b/components/footer-with-links-list.js
@@ -0,0 +1,23 @@
+import { memo } from "react";
+import styles from "./footer-with-links-list.module.css";
+
+const FooterWithLinksList = memo(() => {
+  return (
+    <section className={styles.footerWithLinksList}>
+      <div className={styles.productResourcesList}>
+        <div className={styles.sectionHeading2SendParent}>
+          <div
+            className={styles.sectionHeading}
+          >{`Resources based on your `}</div>
+          <i className={styles.sectionHeading1}>interests</i>
+        </div>
+        <h2 className={styles.loremIpsumDolor}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </h2>
+      </div>
+    </section>
+  );
+});
+
+export default FooterWithLinksList;
diff --git a/components/footer-with-links-list.module.css b/components/footer-with-links-list.module.css
new file mode 100644
index 0000000..182c159
--- /dev/null
+++ b/components/footer-with-links-list.module.css
@@ -0,0 +1,100 @@
+.sectionHeading {
+  height: 3.28rem;
+  flex: 1;
+  position: relative;
+  line-height: 3.28rem;
+  font-weight: 800;
+  display: inline-block;
+  min-width: 22.28rem;
+  max-width: 100%;
+}
+.sectionHeading1 {
+  height: 3.28rem;
+  width: 13.89rem;
+  position: relative;
+  line-height: 3.28rem;
+  display: flex;
+  font-weight: 800;
+  background: linear-gradient(135deg, #ff9a23, #ff3e59);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  align-items: center;
+  flex-shrink: 0;
+}
+.sectionHeading2SendParent {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-9xs);
+  max-width: 100%;
+}
+.loremIpsumDolor {
+  margin: 0;
+  width: 40.68rem;
+  height: 3rem;
+  position: relative;
+  font-size: var(--font-size-3xl);
+  line-height: 1.83rem;
+  font-weight: 300;
+  font-family: inherit;
+  color: var(--color-lightgray-100);
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  max-width: 100%;
+}
+.productResourcesList {
+  width: 48.39rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-9xl);
+  max-width: 100%;
+}
+.footerWithLinksList {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0rem 0rem var(--padding-6xl) 0rem;
+  box-sizing: border-box;
+  max-width: 100%;
+  text-align: left;
+  font-size: var(--font-size-29xl-8);
+  color: var(--color-gray-100);
+  font-family: var(--font-inter);
+}
+
+@media screen and (max-width: 750px) {
+  .sectionHeading {
+    font-size: var(--font-size-20xl);
+    line-height: 2.83rem;
+    min-width: 100%;
+  }
+
+  .sectionHeading1 {
+    font-size: var(--font-size-20xl);
+    line-height: 2.83rem;
+  }
+}
+@media screen and (max-width: 450px) {
+  .sectionHeading {
+    font-size: var(--font-size-10xl);
+    line-height: 2.11rem;
+  }
+
+  .sectionHeading1 {
+    font-size: var(--font-size-10xl);
+    line-height: 2.11rem;
+  }
+
+  .loremIpsumDolor {
+    font-size: var(--font-size-lg);
+    line-height: 1.44rem;
+  }
+}
diff --git a/components/footer.js b/components/footer.js
new file mode 100644
index 0000000..e425643
--- /dev/null
+++ b/components/footer.js
@@ -0,0 +1,91 @@
+import { memo } from "react";
+import styles from "./footer.module.css";
+
+const Footer = memo(() => {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.footerContent}>
+        <div className={styles.buttonFrameParent}>
+          <div className={styles.buttonFrame}>
+            <div className={styles.heading3}>Do you also love email?</div>
+            <div className={styles.formJoin}>
+              <div className={styles.dontMissOutContainer}>
+                <p className={styles.dontMissOut}>
+                  Don’t miss out on !important tips, our short and
+                </p>
+                <p className={styles.dontMissOut}>sweet weekly email.</p>
+              </div>
+              <div className={styles.form}>
+                <div className={styles.yourEmail}>Your email</div>
+                <button className={styles.button}>
+                  <div className={styles.join}>Join</div>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className={styles.archivesList}>
+            <div className={styles.heading31}>Product</div>
+            <div className={styles.listItem}>Code Editor</div>
+            <div className={styles.listItem1}>{`Approvals & Feedback`}</div>
+            <div className={styles.listItem2}>Email Design Systems</div>
+            <div className={styles.listItem3}>Analytics</div>
+            <div className={styles.listItem4}>{`Previews & Testing`}</div>
+            <div className={styles.listItem5}>Archives</div>
+            <div className={styles.listItem6}>For Teams</div>
+            <div className={styles.listItem7}>Pricing</div>
+          </div>
+        </div>
+        <div className={styles.footerLinks}>
+          <div className={styles.googleDeveloperStudent}>
+            Google Developer Student Club
+          </div>
+          <div className={styles.linkTerms}>Terms and Conditions</div>
+          <div className={styles.linkPrivacy}>Privacy</div>
+        </div>
+      </div>
+      <div className={styles.documentationGuidesLessonsS}>
+        <div className={styles.resourcesList}>
+          <div className={styles.heading32}>Resources</div>
+          <div className={styles.listItem8}>Documentation</div>
+          <div className={styles.listItem9}>Guides</div>
+          <div className={styles.listItem10}>Lessons</div>
+          <div className={styles.listItem11}>Customers</div>
+          <div className={styles.listItem12}>Sessions</div>
+          <div className={styles.listItem13}>Support</div>
+          <div className={styles.listItem14}>Changelog</div>
+          <div className={styles.listItem15}>Status</div>
+        </div>
+        <div className={styles.resourcesList}>
+          <div className={styles.heading33}>Company</div>
+          <div className={styles.listItem16}>About</div>
+          <div className={styles.listItem17}>Blog</div>
+          <div className={styles.listItem18}>Climate</div>
+          <div className={styles.listItem19}>Contact</div>
+        </div>
+      </div>
+      <div className={styles.linklist}>
+        <div className={styles.docsandguidesWrapper}>
+          <div className={styles.docsandguides}>
+            <div className={styles.heading34}>Team</div>
+            <div className={styles.listItem20}>Core members</div>
+            <div className={styles.listItem21}>Members</div>
+          </div>
+        </div>
+        <div className={styles.sVGlinkslist}>
+          <div className={styles.linkHelloparcelio}>Follow us on</div>
+          <img
+            className={styles.linkSvg}
+            loading="eager"
+            alt=""
+            src="/link--svg.svg"
+          />
+          <img className={styles.linkSvg} alt="" src="/link--svg-1.svg" />
+          <img className={styles.linkSvg} alt="" src="/link--svg-2.svg" />
+          <img className={styles.linkSvg} alt="" src="/link--svg-3.svg" />
+        </div>
+      </div>
+    </footer>
+  );
+});
+
+export default Footer;
diff --git a/components/footer.module.css b/components/footer.module.css
new file mode 100644
index 0000000..2f16b6e
--- /dev/null
+++ b/components/footer.module.css
@@ -0,0 +1,498 @@
+.heading3 {
+  width: 9.99rem;
+  height: 1.33rem;
+  position: relative;
+  line-height: 1.33rem;
+  font-weight: 600;
+  display: inline-block;
+}
+.dontMissOut {
+  margin: 0;
+}
+.dontMissOutContainer {
+  width: 17.33rem;
+  height: 2.06rem;
+  position: relative;
+  line-height: 1.11rem;
+  display: inline-block;
+}
+.yourEmail {
+  height: 1.11rem;
+  width: 4.44rem;
+  position: relative;
+  font-weight: 500;
+  display: inline-block;
+}
+.join {
+  height: 1.11rem;
+  width: 1.87rem;
+  position: relative;
+  font-size: var(--font-size-base);
+  letter-spacing: 0.16px;
+  line-height: 0.89rem;
+  font-weight: 600;
+  font-family: var(--font-inter);
+  color: var(--color-gray-100);
+  text-align: center;
+  display: inline-block;
+}
+.button {
+  cursor: pointer;
+  border: none;
+  padding: var(--padding-smi) var(--padding-4xl) var(--padding-smi)
+    var(--padding-5xl);
+  background-color: transparent;
+  border-radius: var(--br-5xs);
+  background: linear-gradient(135deg, #389bff, #198cff);
+  box-shadow:
+    0px 1px 3px rgba(0, 0, 0, 0.1),
+    0px 1px 2px rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.form {
+  align-self: stretch;
+  border-radius: var(--br-xs);
+  border: 1px solid var(--color-darkslategray-200);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--padding-8xs) var(--padding-8xs) var(--padding-8xs)
+    var(--padding-2xl);
+  gap: var(--gap-xl);
+  font-size: var(--font-size-base);
+  color: var(--color-lightslategray);
+}
+.formJoin {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-lg);
+  font-size: var(--font-size-sm);
+}
+.buttonFrame {
+  width: 19.56rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-smi);
+  min-width: 19.56rem;
+  max-width: 100%;
+}
+.heading31 {
+  width: 3.42rem;
+  height: 1.33rem;
+  position: relative;
+  font-size: var(--font-size-base);
+  line-height: 1.33rem;
+  font-weight: 600;
+  color: var(--color-gray-100);
+  display: inline-block;
+}
+.listItem {
+  width: 4.06rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem1 {
+  width: 7.61rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem2 {
+  width: 7.51rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem3 {
+  width: 3.13rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem4 {
+  width: 6.47rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem5 {
+  width: 2.95rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem6 {
+  width: 3.56rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem7 {
+  width: 2.36rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.archivesList {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-xs);
+  min-width: 7.61rem;
+  font-size: var(--font-size-smi);
+  color: var(--color-lightgray-100);
+}
+.buttonFrameParent {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--gap-xl);
+  max-width: 100%;
+}
+.googleDeveloperStudent {
+  height: 0.89rem;
+  width: 10.97rem;
+  position: relative;
+  line-height: 0.89rem;
+  font-weight: 500;
+  color: var(--color-gray-100);
+  display: inline-block;
+}
+.linkTerms {
+  height: 0.89rem;
+  width: 7.47rem;
+  position: relative;
+  line-height: 0.89rem;
+  display: inline-block;
+}
+.linkPrivacy {
+  height: 0.89rem;
+  width: 2.52rem;
+  position: relative;
+  line-height: 0.89rem;
+  display: inline-block;
+}
+.footerLinks {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-5xl);
+  max-width: 100%;
+  font-size: var(--font-size-smi);
+  color: var(--color-lightsteelblue);
+}
+.footerContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0rem var(--padding-5xs) 0rem 0rem;
+  box-sizing: border-box;
+  gap: var(--gap-61xl);
+  min-width: 21.39rem;
+  max-width: 100%;
+  font-size: var(--font-size-base);
+  color: var(--color-aliceblue-100);
+}
+.heading32 {
+  width: 4.54rem;
+  height: 1.33rem;
+  position: relative;
+  font-size: var(--font-size-base);
+  line-height: 1.33rem;
+  font-weight: 600;
+  color: var(--color-gray-100);
+  display: inline-block;
+}
+.listItem8 {
+  width: 5.22rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem9 {
+  width: 2.39rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem10 {
+  width: 2.83rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem11 {
+  width: 3.72rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem12 {
+  width: 3.06rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem13 {
+  width: 2.77rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem14 {
+  width: 3.7rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem15 {
+  width: 2.21rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.resourcesList {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-xs);
+}
+.heading33 {
+  width: 4.12rem;
+  height: 1.33rem;
+  position: relative;
+  font-size: var(--font-size-base);
+  line-height: 1.33rem;
+  font-weight: 600;
+  color: var(--color-gray-100);
+  display: inline-block;
+}
+.listItem16 {
+  width: 2.07rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem17 {
+  width: 1.53rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem18 {
+  width: 2.6rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem19 {
+  width: 2.73rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.documentationGuidesLessonsS {
+  width: 11.61rem;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--gap-xl);
+}
+.heading34 {
+  width: 4.27rem;
+  height: 1.33rem;
+  position: relative;
+  font-size: var(--font-size-base);
+  line-height: 1.33rem;
+  font-weight: 600;
+  color: var(--color-gray-100);
+  display: flex;
+  align-items: center;
+}
+.listItem20 {
+  width: 5.59rem;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.listItem21 {
+  align-self: stretch;
+  height: 0.99rem;
+  position: relative;
+  line-height: 0.99rem;
+  display: inline-block;
+}
+.docsandguides {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-xs);
+}
+.docsandguidesWrapper {
+  width: 8.28rem;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0rem var(--padding-4xs) 0rem var(--padding-5xs);
+  box-sizing: border-box;
+}
+.linkHelloparcelio {
+  height: 0.89rem;
+  flex: 1;
+  position: relative;
+  line-height: 0.89rem;
+  display: inline-block;
+  min-width: 3.28rem;
+}
+.linkSvg {
+  height: 1.11rem;
+  width: 1.11rem;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+  min-height: 1.11rem;
+}
+.sVGlinkslist {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-xl);
+}
+.linklist {
+  width: 14.11rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-239xl);
+}
+.footer {
+  align-self: stretch;
+  border-top: 1px solid var(--color-gray-200);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: var(--padding-14xl) var(--padding-379xl) var(--padding-lgi)
+    var(--padding-381xl);
+  gap: var(--gap-14xl);
+  max-width: 100%;
+  text-align: left;
+  font-size: var(--font-size-smi);
+  color: var(--color-lightgray-100);
+  font-family: var(--font-inter);
+}
+
+@media screen and (max-width: 1225px) {
+  .buttonFrame {
+    min-width: 100%;
+  }
+
+  .footerContent {
+    min-width: 100%;
+  }
+}
+@media screen and (max-width: 1050px) {
+  .buttonFrame {
+    flex: 1;
+  }
+
+  .archivesList {
+    flex: 1;
+  }
+
+  .buttonFrameParent {
+    flex-wrap: wrap;
+  }
+
+  .footer {
+    padding-left: var(--padding-181xl);
+    padding-right: var(--padding-180xl);
+    box-sizing: border-box;
+  }
+}
+@media screen and (max-width: 750px) {
+  .footerLinks {
+    flex-wrap: wrap;
+  }
+
+  .footerContent {
+    gap: var(--gap-21xl);
+  }
+
+  .footer {
+    gap: var(--gap-base);
+    padding-left: var(--padding-81xl);
+    padding-right: var(--padding-80xl);
+    box-sizing: border-box;
+  }
+}
+@media screen and (max-width: 450px) {
+  .form {
+    flex-wrap: wrap;
+  }
+
+  .footerContent {
+    gap: var(--gap-xl);
+  }
+
+  .sVGlinkslist {
+    flex-wrap: wrap;
+  }
+
+  .linklist {
+    gap: var(--gap-110xl);
+  }
+
+  .footer {
+    padding-top: var(--padding-2xl);
+    padding-bottom: var(--padding-xl);
+    box-sizing: border-box;
+  }
+}
diff --git a/components/frame-set-header-buttons.js b/components/frame-set-header-buttons.js
new file mode 100644
index 0000000..44f3b55
--- /dev/null
+++ b/components/frame-set-header-buttons.js
@@ -0,0 +1,57 @@
+import { memo } from "react";
+import styles from "./frame-set-header-buttons.module.css";
+
+const FrameSetHeaderButtons = memo(() => {
+  return (
+    <section className={styles.frameSetHeaderButtons}>
+      <div className={styles.containerHeadingSendTests}>
+        <textarea
+          className={styles.headingSend}
+          placeholder="Image"
+          rows={8}
+          cols={11}
+        />
+        <div className={styles.loremipsum}>
+          <img
+            className={styles.linkIcon}
+            loading="eager"
+            alt=""
+            src="/link@2x.png"
+          />
+          <div className={styles.linkRitesh}>Virat Kohli</div>
+        </div>
+      </div>
+      <div className={styles.sectionHeadingSend}>
+        <div className={styles.framedivindexpageStyledDivrd}>
+          <div className={styles.headingDoyoualsoloveemail}>
+            <h1 className={styles.titleOfThe}>Title of the Resource</h1>
+          </div>
+          <div className={styles.frameApprovalsFeedback}>
+            <h2 className={styles.loremIpsumDolor}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.eiusmod
+              tempor incididunt ut labore et dolore magna aliqua.
+            </h2>
+          </div>
+          <div className={styles.listItemLinkArchives}>
+            <div className={styles.pricing}>
+              <button className={styles.link}>
+                <div className={styles.tag}>tag</div>
+              </button>
+              <button className={styles.link}>
+                <div className={styles.tag}>tag</div>
+              </button>
+              <button className={styles.link}>
+                <div className={styles.tag}>tag</div>
+              </button>
+            </div>
+            <div className={styles.linkFeb}>Feb 11, 2024</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+});
+
+export default FrameSetHeaderButtons;
diff --git a/components/frame-set-header-buttons.module.css b/components/frame-set-header-buttons.module.css
new file mode 100644
index 0000000..4cfced7
--- /dev/null
+++ b/components/frame-set-header-buttons.module.css
@@ -0,0 +1,227 @@
+.headingSend {
+  border: none;
+  background-color: var(--color-white);
+  height: 8.83rem;
+  width: auto;
+  outline: none;
+  align-self: stretch;
+  border-radius: var(--br-xs);
+  overflow: hidden;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-28xl) var(--padding-41xl);
+  box-sizing: border-box;
+  font-family: var(--font-inter);
+  font-size: var(--font-size-13xl);
+  color: var(--color-black);
+}
+.linkIcon {
+  height: 2.22rem;
+  width: 2.22rem;
+  position: relative;
+  border-radius: var(--br-9980xl);
+  overflow: hidden;
+  flex-shrink: 0;
+  object-fit: cover;
+}
+.linkRitesh {
+  height: 0.94rem;
+  flex: 1;
+  position: relative;
+  line-height: 1.11rem;
+  font-weight: 600;
+  display: inline-block;
+  flex-shrink: 0;
+}
+.loremipsum {
+  width: 7.89rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-xs);
+}
+.containerHeadingSendTests {
+  width: 11.89rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-mid);
+}
+.titleOfThe {
+  margin: 0;
+  height: 3.56rem;
+  width: 18.39rem;
+  position: relative;
+  font-size: inherit;
+  line-height: 3.53rem;
+  font-weight: 700;
+  font-family: inherit;
+  display: inline-block;
+}
+.headingDoyoualsoloveemail {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0rem var(--padding-8xs);
+  box-sizing: border-box;
+  max-width: 100%;
+  font-family: var(--font-poppins);
+}
+.loremIpsumDolor {
+  margin: 0;
+  height: 5.5rem;
+  flex: 1;
+  position: relative;
+  font-size: inherit;
+  line-height: 1.83rem;
+  font-weight: 300;
+  font-family: inherit;
+  display: inline-block;
+  max-width: 100%;
+}
+.frameApprovalsFeedback {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0rem var(--padding-12xs) 0rem var(--padding-8xs);
+  box-sizing: border-box;
+  max-width: 100%;
+  font-size: var(--font-size-3xl);
+  color: var(--color-lightgray-100);
+}
+.tag {
+  height: 0.83rem;
+  width: 1.22rem;
+  position: relative;
+  font-size: var(--font-size-xs);
+  line-height: 0.89rem;
+  font-weight: 500;
+  font-family: var(--font-inter);
+  color: var(--color-white);
+  text-align: left;
+  display: inline-block;
+}
+.link {
+  cursor: pointer;
+  border: none;
+  padding: var(--padding-9xs) var(--padding-lg) var(--padding-8xs)
+    var(--padding-mid);
+  background-color: var(--color-darkslategray-100);
+  border-radius: var(--br-9980xl);
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.link:hover {
+  background-color: var(--color-dimgray);
+}
+.pricing {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-lgi);
+}
+.linkFeb {
+  height: 1.11rem;
+  width: 4.64rem;
+  position: relative;
+  line-height: 1.11rem;
+  display: inline-block;
+}
+.listItemLinkArchives {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-xl);
+  font-size: var(--font-size-sm);
+  color: var(--color-aliceblue-200);
+}
+.framedivindexpageStyledDivrd {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--gap-mini);
+  max-width: 100%;
+}
+.sectionHeadingSend {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0rem 0rem var(--padding-5xs);
+  box-sizing: border-box;
+  min-width: 41.33rem;
+  max-width: 100%;
+  font-size: var(--font-size-13xl);
+  color: var(--color-white);
+}
+.frameSetHeaderButtons {
+  align-self: stretch;
+  border-radius: var(--br-11xl);
+  background-color: var(--color-gray-300);
+  border: 1px solid var(--color-lightgray-200);
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: flex-start;
+  padding: var(--padding-12xl) var(--padding-35xl) var(--padding-3xl)
+    var(--padding-22xl);
+  gap: var(--gap-4xl);
+  max-width: 100%;
+  text-align: left;
+  font-size: var(--font-size-sm);
+  color: var(--color-aliceblue-200);
+  font-family: var(--font-inter);
+}
+
+@media screen and (max-width: 1225px) {
+  .frameSetHeaderButtons {
+    padding-right: var(--padding-8xl);
+    box-sizing: border-box;
+  }
+}
+@media screen and (max-width: 1050px) {
+  .sectionHeadingSend {
+    min-width: 100%;
+  }
+}
+@media screen and (max-width: 750px) {
+  .titleOfThe {
+    font-size: var(--font-size-7xl);
+    line-height: 2.83rem;
+  }
+}
+@media screen and (max-width: 450px) {
+  .titleOfThe {
+    font-size: var(--font-size-lgi);
+    line-height: 2.11rem;
+  }
+
+  .loremIpsumDolor {
+    font-size: var(--font-size-lg);
+    line-height: 1.44rem;
+  }
+
+  .listItemLinkArchives {
+    flex-wrap: wrap;
+  }
+}
diff --git a/components/main-section.js b/components/main-section.js
new file mode 100644
index 0000000..053083c
--- /dev/null
+++ b/components/main-section.js
@@ -0,0 +1,58 @@
+import { memo, useState } from "react";
+import styles from "./main-section.module.css";
+
+const MainSection = memo(() => {
+  const [whatAreYouValue, setWhatAreYouValue] = useState("");
+  return (
+    <header className={styles.mainSection}>
+      <div className={styles.divnavigationStyleddiv2U4}>
+        <div className={styles.textNodeWrapper}>
+          <div className={styles.textNode}>
+            <img
+              className={styles.paragraphFrameIcon}
+              alt=""
+              src="/paragraph-frame.svg"
+            />
+            <img
+              className={styles.paragraphFrameIcon1}
+              alt=""
+              src="/vector-1.svg"
+            />
+            <img
+              className={styles.headingFrameIcon}
+              alt=""
+              src="/vector-2.svg"
+            />
+          </div>
+        </div>
+        <div className={styles.linkFrame}>
+          <div className={styles.rhub}>RHub</div>
+          <div className={styles.home}>Home</div>
+        </div>
+        <div className={styles.loremIpsum}>
+          <div className={styles.profile}>Profile</div>
+        </div>
+        <div className={styles.resourceFrame}>
+          <div className={styles.productHeading}>
+            <input
+              className={styles.whatAreYou}
+              placeholder="What are you looking for?"
+              type="text"
+              value={whatAreYouValue}
+              onChange={(event) => setWhatAreYouValue(event.target.value)}
+            />
+            <img className={styles.searchIcon} alt="" src="/search@2x.png" />
+          </div>
+        </div>
+        <div className={styles.privacyLink}>
+          <div className={styles.linkSign}>Sign in</div>
+        </div>
+        <button className={styles.itemLink}>
+          <div className={styles.signUp}>Sign up</div>
+        </button>
+      </div>
+    </header>
+  );
+});
+
+export default MainSection;
diff --git a/components/main-section.module.css b/components/main-section.module.css
new file mode 100644
index 0000000..791c1f9
--- /dev/null
+++ b/components/main-section.module.css
@@ -0,0 +1,241 @@
+.paragraphFrameIcon {
+  position: absolute;
+  top: 0.57rem;
+  left: 0.01rem;
+  width: 1.03rem;
+  height: 0.35rem;
+}
+.paragraphFrameIcon1 {
+  position: absolute;
+  top: 0.32rem;
+  left: 0.01rem;
+  width: 1.03rem;
+  height: 0.35rem;
+  z-index: 1;
+}
+.headingFrameIcon {
+  position: absolute;
+  top: 0.02rem;
+  left: 0.01rem;
+  width: 0.99rem;
+  height: 0.37rem;
+  z-index: 2;
+}
+.textNode {
+  width: 1.06rem;
+  height: 0.89rem;
+  position: relative;
+}
+.textNodeWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: var(--padding-11xs) 0rem 0rem;
+}
+.rhub {
+  height: 1.11rem;
+  width: 2.39rem;
+  position: relative;
+  line-height: 1.11rem;
+  font-weight: 600;
+  display: inline-block;
+  white-space: nowrap;
+}
+.home {
+  height: 0.94rem;
+  width: 3.22rem;
+  position: relative;
+  font-size: var(--font-size-sm);
+  line-height: 1.11rem;
+  font-weight: 600;
+  color: var(--color-aliceblue-100);
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.linkFrame {
+  width: 10.17rem;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 0rem var(--padding-mid) 0rem 0rem;
+  box-sizing: border-box;
+  gap: var(--gap-xl);
+  font-size: var(--font-size-base);
+  color: var(--color-white);
+}
+.profile {
+  width: 3.22rem;
+  height: 0.94rem;
+  position: relative;
+  line-height: 1.11rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+}
+.loremIpsum {
+  height: 1.11rem;
+  width: 19.06rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0rem 0rem 0rem;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+.whatAreYou {
+  border: none;
+  outline: none;
+  font-family: var(--font-inter);
+  font-size: var(--font-size-3xs);
+  background-color: transparent;
+  height: 0.94rem;
+  width: 7.33rem;
+  position: relative;
+  line-height: 1.11rem;
+  color: var(--color-lightgray-100);
+  text-align: left;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.searchIcon {
+  height: 1.11rem;
+  width: 1.11rem;
+  position: relative;
+  object-fit: cover;
+  min-height: 1.11rem;
+}
+.productHeading {
+  align-self: stretch;
+  border-radius: var(--br-6xl);
+  background-color: var(--color-gray-400);
+  border: 1px solid var(--color-dodgerblue);
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: var(--padding-10xs) var(--padding-7xs) var(--padding-9xs)
+    var(--padding-3xs);
+  gap: var(--gap-xl);
+}
+.resourceFrame {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0rem var(--padding-14xl) 0rem 0rem;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+.linkSign {
+  width: 2.56rem;
+  height: 0.94rem;
+  position: relative;
+  line-height: 1.11rem;
+  font-weight: 600;
+  display: inline-block;
+  white-space: nowrap;
+}
+.privacyLink {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0rem var(--padding-7xl) 0rem 0rem;
+}
+.signUp {
+  height: 0.94rem;
+  width: 3.06rem;
+  position: relative;
+  font-size: var(--font-size-sm);
+  line-height: 0.89rem;
+  font-weight: 500;
+  font-family: var(--font-inter);
+  color: var(--color-gray-100);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.itemLink {
+  cursor: pointer;
+  border: 1px solid var(--color-dodgerblue);
+  padding: var(--padding-5xs) var(--padding-mini) var(--padding-4xs)
+    var(--padding-xl);
+  background-color: var(--color-dodgerblue);
+  width: 5.11rem;
+  border-radius: var(--br-11xs);
+  box-shadow:
+    0px 1px 3px rgba(0, 0, 0, 0.1),
+    0px 1px 2px rgba(0, 0, 0, 0.06);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+.itemLink:hover {
+  background-color: var(--color-cornflowerblue);
+  border: 1px solid var(--color-cornflowerblue);
+  box-sizing: border-box;
+}
+.divnavigationStyleddiv2U4 {
+  flex: 1;
+  background-color: var(--color-gray-500);
+  backdrop-filter: blur(5px);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--padding-mid) var(--padding-397xl) var(--padding-mid)
+    var(--padding-384xl);
+  box-sizing: border-box;
+  gap: var(--gap-8xs);
+  max-width: 100%;
+}
+.mainSection {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0rem 0rem var(--padding-8xs);
+  box-sizing: border-box;
+  max-width: 100%;
+  text-align: left;
+  font-size: var(--font-size-sm);
+  color: var(--color-aliceblue-100);
+  font-family: var(--font-inter);
+}
+
+@media screen and (max-width: 1050px) {
+  .linkFrame {
+    display: none;
+  }
+
+  .divnavigationStyleddiv2U4 {
+    padding-left: var(--padding-182xl);
+    padding-right: var(--padding-189xl);
+    box-sizing: border-box;
+  }
+}
+@media screen and (max-width: 750px) {
+  .productHeading {
+    display: none;
+  }
+
+  .divnavigationStyleddiv2U4 {
+    padding-left: var(--padding-81xl);
+    padding-right: var(--padding-85xl);
+    box-sizing: border-box;
+  }
+}
diff --git a/next.config.js b/next.config.js
index 0660265..fe6c08e 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,8 +1,8 @@
-const withMDX = require('@next/mdx')()
+const withMDX = require("@next/mdx")();
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
+  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
   reactStrictMode: true,
-}
+};
 
-module.exports = withMDX(nextConfig)
+module.exports = withMDX(nextConfig);
diff --git a/package.json b/package.json
index efe0c54..306fc2f 100644
--- a/package.json
+++ b/package.json
@@ -2,9 +2,11 @@
   "name": "resource-hub",
   "version": "0.1.0",
   "private": true,
+
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+
     "start": "next start",
     "lint": "next lint",
     "pretty": "prettier --write .",
@@ -18,7 +20,8 @@
     "@types/mdx": "^2.0.11",
     "next": "14.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.2.1"
   },
   "devDependencies": {
     "eslint": "^8.56.0",
@@ -31,6 +34,8 @@
     "simple-git-hooks": "^2.9.0"
   },
   "simple-git-hooks": {
-    "pre-commit": "pnpm precommit"
+    "pre-commit": "pnpm precommit",
+    "lint": "next lint"
+
   }
 }
diff --git a/pages/_app.js b/pages/_app.js
index 30eca27..9f54386 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,5 +1,35 @@
-import '@/styles/globals.scss'
+<<<<<<< HEAD
+import "@/styles/globals.scss";
+=======
+import { Fragment } from "react";
+import Head from "next/head";
+import "./global.css";
 
+>>>>>>> Incoming
+
+<<<<<<< HEAD
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
+=======
+function MyApp({ Component, pageProps }) {
+  return (
+    <Fragment>
+      <Head>
+        <title>ResourceHub</title>
+        <meta
+          name="viewport"
+          content="minimum-scale=1, initial-scale=1, width=device-width"
+        />
+      </Head>
+      <Component {...pageProps} />
+    </Fragment>
+  );
+
+>>>>>>> Incoming
 }
+<<<<<<< HEAD
+=======
+
+export default MyApp;
+
+>>>>>>> Incoming
diff --git a/pages/global.css b/pages/global.css
new file mode 100644
index 0000000..5e4c94f
--- /dev/null
+++ b/pages/global.css
@@ -0,0 +1,122 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,800;1,800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Fugaz+One:wght@400&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
+html {
+  font-size: 18;
+}
+body {
+  margin: 0;
+  line-height: normal;
+}
+:root {
+  /* fonts */
+  --font-inter: Inter;
+  --font-poppins: Poppins;
+  --font-fugaz-one: "Fugaz One";
+
+  /* font sizes */
+  --font-size-smi: 0.72rem;
+  --font-size-base: 0.89rem;
+  --font-size-sm: 0.78rem;
+  --font-size-xs: 0.67rem;
+  --font-size-3xl: 1.22rem;
+  --font-size-lg: 1rem;
+  --font-size-13xl: 1.78rem;
+  --font-size-7xl: 1.44rem;
+  --font-size-lgi: 1.06rem;
+  --font-size-29xl-8: 2.71rem;
+  --font-size-20xl: 2.17rem;
+  --font-size-10xl: 1.61rem;
+  --font-size-21xl: 2.22rem;
+  --font-size-5xl: 1.33rem;
+  --font-size-3xs: 0.56rem;
+
+  /* Colors */
+  --color-gray-100: #fcfdff;
+  --color-gray-200: #20262f;
+  --color-gray-300: #161b22;
+  --color-gray-400: #0d1117;
+  --color-gray-500: rgba(13, 17, 23, 0.75);
+  --color-lightgray-100: #ccd7e4;
+  --color-lightgray-200: rgba(204, 215, 228, 0.4);
+  --color-lightsteelblue: #9dacbf;
+  --color-darkslategray-100: #3c4451;
+  --color-darkslategray-200: #2b323e;
+  --color-lightslategray: #7a8899;
+  --color-aliceblue-100: #e7eff9;
+  --color-aliceblue-200: #e6edf3;
+  --color-dimgray: #636b78;
+  --color-white: #fff;
+  --color-black: #000;
+  --color-dodgerblue: #198cff;
+  --color-cornflowerblue: #33a6ff;
+
+  /* Gaps */
+  --gap-21xl: 2.22rem;
+  --gap-14xl: 1.83rem;
+  --gap-base: 0.89rem;
+  --gap-239xl: 14.33rem;
+  --gap-110xl: 7.17rem;
+  --gap-xl: 1.11rem;
+  --gap-xs: 0.67rem;
+  --gap-61xl: 4.44rem;
+  --gap-5xl: 1.33rem;
+  --gap-smi: 0.72rem;
+  --gap-lg: 1rem;
+  --gap-4xl: 1.28rem;
+  --gap-mini: 0.83rem;
+  --gap-lgi: 1.06rem;
+  --gap-mid: 0.94rem;
+  --gap-9xl: 1.56rem;
+  --gap-9xs: 0.22rem;
+  --gap-8xs: 0.28rem;
+
+  /* Paddings */
+  --padding-12xs: 0.06rem;
+  --padding-14xl: 1.83rem;
+  --padding-379xl: 22.11rem;
+  --padding-lgi: 1.06rem;
+  --padding-381xl: 22.22rem;
+  --padding-81xl: 5.56rem;
+  --padding-80xl: 5.5rem;
+  --padding-181xl: 11.11rem;
+  --padding-180xl: 11.06rem;
+  --padding-2xl: 1.17rem;
+  --padding-xl: 1.11rem;
+  --padding-4xs: 0.5rem;
+  --padding-5xs: 0.44rem;
+  --padding-8xs: 0.28rem;
+  --padding-smi: 0.72rem;
+  --padding-4xl: 1.28rem;
+  --padding-5xl: 1.33rem;
+  --padding-12xl: 1.72rem;
+  --padding-35xl: 3rem;
+  --padding-3xl: 1.22rem;
+  --padding-22xl: 2.28rem;
+  --padding-8xl: 1.5rem;
+  --padding-9xs: 0.22rem;
+  --padding-lg: 1rem;
+  --padding-mid: 0.94rem;
+  --padding-28xl: 2.61rem;
+  --padding-41xl: 3.33rem;
+  --padding-6xl: 1.39rem;
+  --padding-397xl: 23.11rem;
+  --padding-384xl: 22.39rem;
+  --padding-85xl: 5.78rem;
+  --padding-182xl: 11.17rem;
+  --padding-189xl: 11.56rem;
+  --padding-mini: 0.83rem;
+  --padding-7xl: 1.44rem;
+  --padding-10xs: 0.17rem;
+  --padding-7xs: 0.33rem;
+  --padding-3xs: 0.56rem;
+  --padding-11xs: 0.11rem;
+
+  /* Border radiuses */
+  --br-xs: 12px;
+  --br-5xs: 8px;
+  --br-11xl: 30px;
+  --br-9980xl: 9999px;
+  --br-11xs: 2px;
+  --br-6xl: 25px;
+}
diff --git a/pages/index.js b/pages/index.js
index e0aa971..32865df 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,22 +1,56 @@
 import Head from "next/head";
-import { Poppins } from "next/font/google";
-import styles from "@/styles/Home.module.scss";
+import MainSection from "../components/main-section";
+import FooterWithLinksList from "../components/footer-with-links-list";
+import FrameSetHeaderButtons from "../components/frame-set-header-buttons";
+import Footer from "../components/footer";
+import styles from "./index.module.css";
 
-const poppins = Poppins({
-  subsets: ["latin"],
-  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
-});
-
-export default function Home() {
+const LandingPage = () => {
   return (
-    <>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className={`${styles.main} ${poppins.className}`}>Hello World</main>
-    </>
+    <div className={styles.landingPage}>
+      <MainSection />
+      <main className={styles.previewsTestingLink}>
+        <section className={styles.frameParent}>
+          <div className={styles.frameWithHeadingsParent}>
+            <div className={styles.frameWithHeadings}>
+              <h1 className={styles.heading1}>Resource Hub</h1>
+            </div>
+            <h2 className={styles.loremIpsumDolor}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.
+            </h2>
+          </div>
+          <div className={styles.form}>
+            <div className={styles.chidigoodplacecom}>chidi@goodplace.com</div>
+            <button className={styles.button}>
+              <div className={styles.getStarted}>Get started</div>
+            </button>
+          </div>
+        </section>
+        <section className={styles.lovedByDevelopersAndMarketParent}>
+          <div className={styles.lovedByDevelopers}>
+            Loved by developers and marketers alike
+          </div>
+          <div className={styles.divindexpageStyleddiv16Rd}>
+            <h1 className={styles.dummy}>DUMMY</h1>
+            <h1 className={styles.dummy}>DUMMY</h1>
+            <h1 className={styles.dummy}>DUMMY</h1>
+            <h1 className={styles.dummy}>DUMMY</h1>
+          </div>
+        </section>
+        <FooterWithLinksList />
+        <FrameSetHeaderButtons />
+        <FrameSetHeaderButtons />
+        <FrameSetHeaderButtons />
+        <FrameSetHeaderButtons />
+        <FrameSetHeaderButtons />
+        <FrameSetHeaderButtons />
+      </main>
+      <Footer />
+    </div>
   );
-}
+};
+
+export default LandingPage;
diff --git a/pages/index.module.css b/pages/index.module.css
new file mode 100644
index 0000000..2fca83f
--- /dev/null
+++ b/pages/index.module.css
@@ -0,0 +1,265 @@
+.heading1 {
+  margin: 0;
+  height: 4.83rem;
+  flex: 1;
+  position: relative;
+  font-size: inherit;
+  line-height: 4.8rem;
+  font-weight: 800;
+  font-family: inherit;
+  display: inline-block;
+  max-width: 100%;
+}
+.frameWithHeadings {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0rem var(--padding-6xl) 0rem var(--padding-4xl);
+  box-sizing: border-box;
+  max-width: 100%;
+}
+.loremIpsumDolor {
+  margin: 0;
+  align-self: stretch;
+  height: 3.28rem;
+  position: relative;
+  font-size: var(--font-size-3xl);
+  line-height: 1.83rem;
+  font-weight: 300;
+  font-family: inherit;
+  color: var(--color-lightgray-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.frameWithHeadingsParent {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 3.33rem;
+  max-width: 100%;
+}
+.chidigoodplacecom {
+  height: 1.11rem;
+  width: 9.47rem;
+  position: relative;
+  font-weight: 500;
+  display: inline-block;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.getStarted {
+  height: 1.11rem;
+  width: 5.17rem;
+  position: relative;
+  font-size: var(--font-size-base);
+  letter-spacing: 0.16px;
+  line-height: 0.89rem;
+  font-weight: 600;
+  font-family: var(--font-inter);
+  color: var(--color-gray-100);
+  text-align: center;
+  display: inline-block;
+}
+.button {
+  cursor: pointer;
+  border: none;
+  padding: var(--padding-smi) var(--padding-2xl) var(--padding-smi)
+    var(--padding-5xl);
+  background-color: transparent;
+  border-radius: var(--br-5xs);
+  background: linear-gradient(135deg, #389bff, #198cff);
+  box-shadow:
+    0px 1px 3px rgba(0, 0, 0, 0.1),
+    0px 1px 2px rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+.form {
+  width: 28.56rem;
+  border-radius: var(--br-xs);
+  border: 1px solid var(--color-darkslategray-200);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--padding-8xs) var(--padding-9xs) var(--padding-8xs)
+    var(--padding-2xl);
+  gap: var(--gap-xl);
+  max-width: 100%;
+  text-align: left;
+  font-size: var(--font-size-base);
+  color: var(--color-lightslategray);
+}
+.frameParent {
+  width: 55.06rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0rem 0rem 3.78rem;
+  box-sizing: border-box;
+  gap: 3.83rem;
+  max-width: 100%;
+  text-align: center;
+  font-size: 4rem;
+  color: var(--color-gray-100);
+  font-family: var(--font-inter);
+}
+.lovedByDevelopers {
+  width: 19.16rem;
+  height: 1.11rem;
+  position: relative;
+  letter-spacing: 0.35px;
+  line-height: 1.11rem;
+  text-transform: uppercase;
+  font-weight: 600;
+  display: inline-block;
+  max-width: 100%;
+}
+.dummy {
+  margin: 0;
+  height: 1.11rem;
+  width: 8.28rem;
+  position: relative;
+  font-size: inherit;
+  line-height: 1.11rem;
+  font-weight: 400;
+  font-family: inherit;
+  display: inline-block;
+}
+.divindexpageStyleddiv16Rd {
+  align-self: stretch;
+  border-top: 1px solid var(--color-gray-200);
+  border-bottom: 1px solid var(--color-gray-200);
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: var(--padding-8xl) var(--padding-6xl) 1.61rem 0.39rem;
+  opacity: 0.7;
+  gap: var(--gap-xl);
+  font-size: var(--font-size-21xl);
+  color: var(--color-white);
+  font-family: var(--font-fugaz-one);
+}
+.lovedByDevelopersAndMarketParent {
+  width: 62.22rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0rem 0rem 4rem;
+  box-sizing: border-box;
+  gap: var(--gap-base);
+  max-width: 100%;
+  text-align: center;
+  font-size: var(--font-size-sm);
+  color: var(--color-lightsteelblue);
+  font-family: var(--font-inter);
+}
+.previewsTestingLink {
+  width: 84.33rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0rem var(--padding-xl);
+  box-sizing: border-box;
+  gap: 4.61rem;
+  max-width: 100%;
+  flex-shrink: 0;
+}
+.landingPage {
+  width: 100%;
+  position: relative;
+  background-color: var(--color-gray-400);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0rem 0rem var(--padding-12xs);
+  box-sizing: border-box;
+  gap: 9rem;
+  letter-spacing: normal;
+}
+
+@media screen and (max-width: 1050px) {
+  .frameWithHeadingsParent {
+    gap: 1.67rem;
+  }
+
+  .frameParent {
+    gap: 1.89rem;
+  }
+
+  .landingPage {
+    gap: 4.5rem;
+  }
+}
+@media screen and (max-width: 750px) {
+  .heading1 {
+    font-size: 3.22rem;
+    line-height: 3.83rem;
+  }
+
+  .frameParent {
+    gap: var(--gap-mid);
+  }
+
+  .dummy {
+    font-size: var(--font-size-13xl);
+    line-height: 0.89rem;
+  }
+
+  .divindexpageStyleddiv16Rd {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .previewsTestingLink {
+    gap: 2.28rem;
+  }
+
+  .landingPage {
+    gap: var(--gap-21xl);
+  }
+}
+@media screen and (max-width: 450px) {
+  .heading1 {
+    font-size: 2.39rem;
+    line-height: 2.89rem;
+  }
+
+  .loremIpsumDolor {
+    font-size: var(--font-size-lg);
+    line-height: 1.44rem;
+  }
+
+  .form {
+    flex-wrap: wrap;
+  }
+
+  .frameParent {
+    padding-bottom: 2.44rem;
+    box-sizing: border-box;
+  }
+
+  .dummy {
+    font-size: var(--font-size-5xl);
+    line-height: 0.67rem;
+  }
+
+  .previewsTestingLink {
+    gap: 1.17rem;
+  }
+}
diff --git a/public/link--svg-1.svg b/public/link--svg-1.svg
new file mode 100644
index 0000000..f30415a
--- /dev/null
+++ b/public/link--svg-1.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 2.53711C5.39592 2.53711 1.66675 6.26628 1.66675 10.8704C1.6658 12.6198 2.21576 14.3251 3.2386 15.7443C4.26143 17.1636 5.7052 18.2247 7.36508 18.7771C7.78175 18.8496 7.93758 18.5996 7.93758 18.3804C7.93758 18.1829 7.92675 17.5271 7.92675 16.8288C5.83342 17.2146 5.29175 16.3188 5.12508 15.8496C5.03092 15.6096 4.62508 14.8704 4.27092 14.6721C3.97925 14.5163 3.56258 14.1304 4.26008 14.1204C4.91675 14.1096 5.38508 14.7246 5.54175 14.9746C6.29175 16.2346 7.49008 15.8804 7.96842 15.6621C8.04175 15.1204 8.26008 14.7563 8.50008 14.5479C6.64592 14.3396 4.70842 13.6204 4.70842 10.4329C4.70842 9.52628 5.03092 8.77711 5.56258 8.19295C5.47925 7.98461 5.18758 7.13045 5.64592 5.98461C5.64592 5.98461 6.34342 5.76628 7.93758 6.83961C8.61597 6.65133 9.31689 6.55657 10.0209 6.55795C10.7292 6.55795 11.4376 6.65128 12.1042 6.83878C13.6976 5.75545 14.3959 5.98545 14.3959 5.98545C14.8542 7.13128 14.5626 7.98545 14.4792 8.19378C15.0101 8.77711 15.3334 9.51628 15.3334 10.4329C15.3334 13.6313 13.3859 14.3396 11.5317 14.5479C11.8334 14.8079 12.0942 15.3079 12.0942 16.0896C12.0942 17.2038 12.0834 18.0996 12.0834 18.3813C12.0834 18.5996 12.2401 18.8596 12.6567 18.7763C14.3109 18.2178 15.7483 17.1546 16.7667 15.7364C17.785 14.3182 18.3329 12.6164 18.3334 10.8704C18.3334 6.26628 14.6042 2.53711 10.0001 2.53711Z" fill="#CCD7E4"/>
+</svg>
diff --git a/public/link--svg-2.svg b/public/link--svg-2.svg
new file mode 100644
index 0000000..a3699eb
--- /dev/null
+++ b/public/link--svg-2.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9526 6.28479C18.3334 7.76978 18.3334 10.8698 18.3334 10.8698C18.3334 10.8698 18.3334 13.9698 17.9526 15.4548C17.7409 16.2756 17.1217 16.9214 16.3376 17.1398C14.9134 17.5364 10.0001 17.5364 10.0001 17.5364C10.0001 17.5364 5.08925 17.5364 3.66258 17.1398C2.87508 16.9181 2.25675 16.2731 2.04758 15.4548C1.66675 13.9698 1.66675 10.8698 1.66675 10.8698C1.66675 10.8698 1.66675 7.76978 2.04758 6.28479C2.25925 5.46396 2.87841 4.81813 3.66258 4.59979C5.08925 4.20313 10.0001 4.20312 10.0001 4.20312C10.0001 4.20312 14.9134 4.20313 16.3376 4.59979C17.1251 4.82146 17.7434 5.46645 17.9526 6.28479ZM8.33342 13.7864L13.3334 10.8698L8.33342 7.95313V13.7864Z" fill="#CCD7E4"/>
+</svg>
diff --git a/public/link--svg-3.svg b/public/link--svg-3.svg
new file mode 100644
index 0000000..fb1caa2
--- /dev/null
+++ b/public/link--svg-3.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.2792 16.1526H13.0583V12.6718C13.0583 11.8418 13.0417 10.7734 11.9 10.7734C10.7425 10.7734 10.5658 11.6768 10.5658 12.6109V16.1526H8.34417V8.99512H10.4775V9.97012H10.5067C10.805 9.40845 11.53 8.81429 12.6133 8.81429C14.8633 8.81429 15.28 10.2959 15.28 12.2234L15.2792 16.1526ZM5.83583 8.01595C5.6663 8.01617 5.49838 7.98293 5.34172 7.91813C5.18506 7.85332 5.04272 7.75824 4.92288 7.63832C4.80304 7.5184 4.70804 7.376 4.64334 7.2193C4.57864 7.06259 4.5455 6.89466 4.54583 6.72512C4.546 6.46998 4.62182 6.22062 4.7637 6.00858C4.90558 5.79653 5.10716 5.63131 5.34294 5.53383C5.57872 5.43635 5.83811 5.41097 6.08832 5.4609C6.33852 5.51084 6.5683 5.63385 6.74859 5.81438C6.92888 5.9949 7.0516 6.22484 7.10121 6.4751C7.15082 6.72537 7.12511 6.98473 7.02732 7.22038C6.92953 7.45604 6.76406 7.6574 6.55183 7.79901C6.33959 7.94062 6.09097 8.01612 5.83583 8.01595ZM6.94917 16.1526H4.72167V8.99512H6.95L6.94917 16.1526ZM16.3917 3.37012H3.6075C2.99417 3.37012 2.5 3.85345 2.5 4.45095V17.2893C2.5 17.8868 2.995 18.3701 3.60667 18.3701H16.3883C17 18.3701 17.5 17.8868 17.5 17.2893V4.45095C17.5 3.85345 17 3.37012 16.3883 3.37012H16.3917Z" fill="#CCD7E4"/>
+</svg>
diff --git a/public/link--svg.svg b/public/link--svg.svg
new file mode 100644
index 0000000..ba67999
--- /dev/null
+++ b/public/link--svg.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.4683 5.58388C17.8321 5.86529 17.1574 6.05011 16.4666 6.13221C17.1947 5.69674 17.7397 5.01139 17.9999 4.20388C17.3166 4.61055 16.5674 4.89555 15.7866 5.04971C15.2621 4.48853 14.5669 4.11635 13.809 3.99103C13.0512 3.86572 12.2732 3.99429 11.596 4.35676C10.9187 4.71923 10.3802 5.29528 10.0642 5.99537C9.74812 6.69547 9.67221 7.48036 9.84825 8.22805C8.46251 8.15859 7.10686 7.79848 5.86933 7.1711C4.63179 6.54372 3.54003 5.66309 2.66492 4.58638C2.35516 5.11842 2.19238 5.72324 2.19326 6.33888C2.19326 7.54721 2.80826 8.61472 3.74326 9.23972C3.18993 9.2223 2.64878 9.07287 2.16492 8.80388V8.84721C2.16509 9.65197 2.44356 10.4319 2.95313 11.0547C3.46269 11.6776 4.17199 12.1051 4.96075 12.2647C4.4471 12.4039 3.90851 12.4244 3.38576 12.3247C3.60814 13.0174 4.04159 13.6232 4.62541 14.0573C5.20924 14.4914 5.9142 14.732 6.64159 14.7455C5.91866 15.3133 5.0909 15.733 4.20566 15.9807C3.32041 16.2283 2.39503 16.2991 1.48242 16.1889C3.0755 17.2134 4.93 17.7573 6.82409 17.7555C13.2349 17.7555 16.7408 12.4447 16.7408 7.83888C16.7408 7.68888 16.7366 7.53721 16.7299 7.38888C17.4123 6.89569 18.0013 6.28473 18.4691 5.58471L18.4683 5.58388Z" fill="#CCD7E4"/>
+</svg>
diff --git a/public/link@2x.png b/public/link@2x.png
new file mode 100644
index 0000000..805e0ef
Binary files /dev/null and b/public/link@2x.png differ
diff --git a/public/paragraph-frame.svg b/public/paragraph-frame.svg
new file mode 100644
index 0000000..7a50824
--- /dev/null
+++ b/public/paragraph-frame.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="7" viewBox="0 0 19 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.397 0.977785L6.29201 2.05779C6.02123 2.09492 5.74564 2.074 5.48357 1.99642C5.22149 1.91883 4.97894 1.78635 4.77201 1.60779L3.09501 0.154785L0.325012 0.523786C0.107012 0.552786 0.0190119 0.828786 0.182012 0.969786L5.27001 5.37779C5.53001 5.60279 5.87401 5.70479 6.22001 5.65879L17.676 4.13278C17.898 4.10278 17.983 3.81679 17.81 3.67979L14.397 0.977785ZM18.283 3.07479C18.975 3.62179 18.637 4.76878 17.748 4.88678L6.29201 6.41279L17.749 4.88678C18.637 4.76878 18.975 3.62179 18.283 3.07479Z" fill="#198CFF"/>
+</svg>
diff --git a/public/search@2x.png b/public/search@2x.png
new file mode 100644
index 0000000..5de962e
Binary files /dev/null and b/public/search@2x.png differ
diff --git a/public/vector-1.svg b/public/vector-1.svg
new file mode 100644
index 0000000..96a2f03
--- /dev/null
+++ b/public/vector-1.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="8" viewBox="0 0 19 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.397 1.6228L6.29201 2.7018C6.02123 2.73894 5.74564 2.71802 5.48357 2.64044C5.22149 2.56285 4.97894 2.43037 4.77201 2.2518L3.09501 0.799805L0.325012 1.1688C0.107012 1.1968 0.0190119 1.4738 0.182012 1.6148L5.27001 6.0228C5.53001 6.2478 5.87401 6.3498 6.22001 6.3028L17.676 4.7778C17.898 4.7478 17.983 4.4618 17.81 4.3248L14.397 1.6228ZM18.283 3.7198C18.975 4.2668 18.637 5.4138 17.748 5.5318L6.29201 7.0568L17.749 5.5318C18.637 5.4138 18.975 4.2668 18.283 3.7188V3.7198Z" fill="#389BFF"/>
+</svg>
diff --git a/public/vector-2.svg b/public/vector-2.svg
new file mode 100644
index 0000000..964402a
--- /dev/null
+++ b/public/vector-2.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="7" viewBox="0 0 18 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.324006 1.81011L11.368 0.340106C11.697 0.296106 12.024 0.385107 12.28 0.588107L17.811 4.96811C17.986 5.10611 17.901 5.39511 17.676 5.42511L6.22001 6.95011C6.05047 6.9735 5.8779 6.96054 5.71376 6.91209C5.54961 6.86364 5.39767 6.78081 5.26801 6.66911L0.181006 2.26111C0.0160061 2.11911 0.105006 1.83911 0.324006 1.81011Z" fill="#56ABFF"/>
+</svg>