gdsc-nits-org · Atreya45 · Feb 27, 2024
diff --git 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
@@ -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"
+  }
+}
diff --git a/components/footer-with-links-list.js 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
@@ -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
@@ -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;