Merge pull request #31 from Deerwalk-Developers-Community/dev

Dev

src/components/Stars.tsx

@@ -4,11 +4,12 @@ const Stars = ({ className }: { className?: string }) => {
   return (
     <svg
       width="1920"
+      preserveAspectRatio="none"
       height="1016"
       viewBox="0 0 1920 1016"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${className}  min-h-[100vh] bg-cover h-full object-cover absolute inset-0`}
+      className={`${className}  min-h-[100vh] bg-cover lg:w-full h-full object-cover absolute inset-0`}
     >
       <g opacity="0.1">
         <path

src/modules/faq/components/FaqList.tsx

@@ -20,7 +20,7 @@ const FaqList: React.FC<FaqListProp> = ({ faqData }) => {
     <Accordion
       type="single"
       collapsible
-      className="md:w-[60%]  text-white disabled:underline"
+      className="md:w-[80%]  text-white disabled:underline"
     >
       {faqData.map((faq, index) => (
         <AccordionItem key={index} value={`item-${index}`}>

src/modules/faq/page.tsx

@@ -36,13 +36,13 @@ const Page = () => {
   return (
     <div className="relative flex flex-col justify-center font-bold bg-neutral-950 min-h-screen overflow-hidden pb-10 pt-0">
       <Stars className="absolute inset-0 w-fit h-full  min-h-[100vh] object-cover z-0" />{" "}
-      <div className="relative flex flex-col w-full min-h-[1016px] max-md:min-h-screen max-md:px-5 max-md:max-w-full z-10">
+      <div className="relative flex flex-col w-full lg:min-h-[1016px] max-md:min-h-screen max-md:px-5 max-md:max-w-full z-10">
         {" "}
         <Header level="3" logo={false} />
-        <main className="flex  flex-col relative gap-5 lg:gap-10 items-center lg:items-start justify-start lg:justify-center self-center mt-16 ml-4 w-full max-w-[1654px] max-md:mt-10 max-md:max-w-full p-10 pt-0">
+        <main className="flex  flex-col relative gap-5 lg:gap-10 items-center lg:items-start justify-start lg:justify-center self-center mt-5 ml-4 w-full max-w-[1654px] max-md:mt-10 max-md:max-w-full p-10 pt-0">
           <div className="flex flex-row items-center justify-center gap-3 lg:gap-5  md:gap-2">
             <Arrow className="object-contain shrink-0 mt-20 max-w-full aspect-[1.96] w-[116px] max-md:mt-10 max-md:w-[80px]" />
-            <h1 className="grow shrink mt-24 text-4xl lg:text-6xl text-white w-[293px] max-md:mt-10 max-md:text-3xl max-md:w-full ">
+            <h1 className="grow shrink mt-20 text-4xl lg:text-6xl text-white w-[293px] max-md:mt-10 max-md:text-3xl max-md:w-full ">
               FAQ
             </h1>
           </div>

src/modules/hero/page.tsx

@@ -7,7 +7,7 @@ import Alien from "./assets/Aliens";
 const Page = () => {
   return (
     <div className="relative flex flex-col justify-center font-bold bg-neutral-950  overflow-hidden p-0 m-0">
-      <Stars className="absolute inset-0 w-fit lg:h-full object-cover z-0" />
+      <Stars className="absolute inset-0 min-h-[100vh] w-fit lg:h-full object-cover z-0" />
       <Alien className="absolute top-0 right-96 w-[400px] h-[400px] lg:w-[600px] lg:h-[600px] min-h-[50vh] object-cover z-[1] transform translate-y-[20vh] translate-x-[10vw] hidden xl:block" />
       <div className="relative flex flex-col w-full max-md:min-h-screen max-md:px-5 max-md:max-w-full z-10 p-0 m-0">
         <Header logo={true} />

src/modules/intro/page.tsx

@@ -7,12 +7,12 @@ import Threearrows from "./assets/threearrow";
 
 const HacktoberfestPage: React.FC = () => {
   return (
-    <div className="relative flex flex-col justify-center font-bold bg-neutral-950 min-h-screen overflow-hidden">
-      <Stars className="absolute inset-0 w-fit h-full  min-h-[100vh] object-cover z-0" />{" "}
-      <div className="relative flex flex-col w-full min-h-[1016px] max-md:min-h-screen max-md:px-5 max-md:max-w-full z-10">
+    <div className="relative flex flex-col justify-center font-bold bg-neutral-950 overflow-hidden">
+      <Stars className="absolute inset-0 w-fit h-full  min-h-[100dvh] object-cover z-0" />{" "}
+      <div className="relative flex flex-col w-full lg:min-h-[1016px] max-md:min-h-screen max-md:px-5 max-md:max-w-full z-10">
         {" "}
         <Header level="2" logo={false} />
-        <main className="flex lg:flex-col flex-col relative lg:gap-10 items-center lg:items-start justify-start lg:justify-center self-center mt-16 ml-4 w-full max-w-[1654px] max-md:mt-10 max-md:max-w-full p-10">
+        <main className="flex lg:flex-col flex-col relative lg:gap-10 items-center lg:items-start justify-start lg:justify-center self-center mt-5 lg:mt-16 ml-4 w-full max-w-[1654px] p-10">
           <div className="w-full flex flex-row pl-0 gap-96 lg:gap-96 items-center justify-between">
             <div className="flex flex-row items-center justify-center">
               <Arrow className="w-16 lg:w-24 " />
@@ -24,7 +24,6 @@ const HacktoberfestPage: React.FC = () => {
             <div>
               <Threearrows className="hidden xl:block " />
             </div>
-
           </div>
           <IntroductionSection />
         </main>

src/modules/participatingSection/components/ParticipationInfo.tsx

@@ -3,13 +3,14 @@ import Window from "../assets/Window";
 
 const ParticipationInfo: React.FC = () => {
   return (
-    <section className="relative grid place-items-center min-h-[837px] px-5 py-16 text-white w-screen">
-      <div className="absolute inset-0 w-full h-full">
-        <Window className="w-full h-full lg:block hidden" />
+    <section className="relative grid 2lg:place-items-center mx-auto 2lg:min-h-[837px] px-3 py-8 2lg:px-5 2lg:py-16 text-white w-full">
+      <div className="absolute inset-0 2lg:w-full 2lg:h-full h-0 w-0">
+        {/* Show the window only from 2lg breakpoint onwards */}
+        <Window className="2lg:w-full 2lg:h-full object-cover 2lg:block hidden" />
       </div>
 
-      <div className="relative z-10 max-w-3xl w-full p-4 md:p-8 text-left text-white lg:text-black space-y-6 leading-relaxed">
-        <h2 className="text-2xl md:text-3xl font-bold">
+      <div className="relative z-10 w-full max-w-full 2lg:max-w-3xl p-2 md:p-6 2lg:p-8 text-left 2lg:text-black 2lg:space-y-6 leading-relaxed">
+        <h2 className="text-lg md:text-xl= 2lg:text-3xl font-bold text-center 2lg:text-left">
           Here&apos;s what you need to know to participate and complete
           Hacktoberfest:
         </h2>
@@ -42,9 +43,9 @@ const ParticipationInfo: React.FC = () => {
             requests for them to count toward your total
           </li>
           <li>
-            You&apos;ll unlock a digital badge when you register for Hacktoberfest,
-            and level it up with each of your four pull/merge requests accepted
-            during Hacktoberfest
+            You&apos;ll unlock a digital badge when you register for
+            Hacktoberfest, and level it up with each of your four pull/merge
+            requests accepted during Hacktoberfest
           </li>
         </ul>
       </div>

src/modules/participatingSection/page.tsx

@@ -8,11 +8,11 @@ const HacktoberfestPage: React.FC = () => {
   return (
     <div className="relative flex flex-col justify-center font-bold bg-neutral-950 min-h-screen overflow-hidden">
       <Stars className="absolute inset-0 w-fit h-full  min-h-[100vh] object-cover z-0" />{" "}
-      <div className="relative flex flex-col w-full min-h-[1016px] max-md:min-h-screen max-md:px-5 max-md:max-w-full z-10">
+      <div className="relative flex flex-col w-full min-h-dvh max-md:min-h-screen max-md:px-5 max-md:max-w-full z-10">
         {" "}
-        <Header level="2" logo={false}/>
+        <Header level="2" logo={false} />
         <main className="flex lg:flex-row flex-col relative lg:gap-10 items-center lg:items-start justify-start lg:justify-center self-center mt-16 ml-4 w-full max-w-[1654px] max-md:mt-10 max-md:max-w-full p-10 pb-0">
-          <div className="flex flex-row gap-3 lg:gap-5 items-center justify-center  md:gap-2">
+          <div className="flex flex-row gap-3 lg:gap-5 items-center justify-center  md:gap-2 mr-10">
             <Arrow className="object-contain shrink-0 mt-20 max-w-full aspect-[1.96] w-[116px] max-md:mt-10 max-md:w-[80px]" />
             <h1 className="grow shrink lg:text-4xl mt-24 text-3xl text-white w-[293px] max-md:mt-10 max-md:text-3xl max-md:w-full ">
               Participating in <br /> Hacktoberfest

src/modules/resourceForBeginner/components/BeginnerResource.tsx

@@ -4,83 +4,144 @@ import Arrow from "@/components/Arrow";
 const BeginnerResource: React.FC = () => {
   return (
     <div className="flex flex-col items-center justify-center w-screen px-4 lg:px-20 sm:gap-8">
-
       <div className="flex flex-col lg:flex-row w-full lg:justify-between items-center justify-center gap-16  md:pr-[73px] sm:pr-[73px]">
-
         <div className="flex flex-row items-center lg:flex-row gap-3 lg:gap-5">
           <Arrow className="shrink-0 w-16 lg:w-24" />
           <h1 className="text-white text-3xl lg:text-5xl font-bold leading-tight text-center lg:text-left">
             Resource for <br /> Beginners
           </h1>
         </div>
 
-
         <div className="flex flex-col gap-1">
           <h2 className="text-[#FFBDDE] text-xl lg:text-4xl font-semibold">
             Intro to open source 👾
           </h2>
           <ul className="text-[#43fc5a] underline text-lg pl-10 lg:text-4xl space-y-2 mt-4 list-disc marker:text-[#FFEDA6]">
             <li>
-              <a href="https://www.digitalocean.com/community/tutorial-series/an-introduction-to-open-source"  target="_blank">Introduction to GitHub and Open-Source Projects</a>
+              <a
+                href="https://www.digitalocean.com/community/tutorial-series/an-introduction-to-open-source"
+                target="_blank"
+              >
+                Introduction to GitHub and Open-Source Projects
+              </a>
             </li>
             <li>
-              <a href="https://opensource.guide/how-to-contribute/"  target="_blank">How to Contribute to Open Source</a>
+              <a
+                href="https://opensource.guide/how-to-contribute/"
+                target="_blank"
+              >
+                How to Contribute to Open Source
+              </a>
             </li>
             <li>
-              <a href="https://www.digitalocean.com/community/tutorials/what-is-open-source"  target="_blank">What is Open Source</a>
+              <a
+                href="https://www.digitalocean.com/community/tutorials/what-is-open-source"
+                target="_blank"
+              >
+                What is Open Source
+              </a>
             </li>
             <li>
-              <a href="https://www.digitalocean.com/community/cheatsheets/how-to-use-git-a-reference-guide"  target="_blank">How to use Git</a>
+              <a
+                href="https://www.digitalocean.com/community/cheatsheets/how-to-use-git-a-reference-guide"
+                target="_blank"
+              >
+                How to use Git
+              </a>
             </li>
           </ul>
         </div>
       </div>
 
-
       <div className="w-full my-8 hidden lg:block">
         <hr className="border-t-2 border-dashed border-[#FFF2E4]" />
         <br />
         <hr className="border-t-2 border-dashed border-[#FFF2E4]" />
       </div>
 
-
       <div className="flex flex-col items-start lg:flex-row justify-between gap-10">
-
         <div className="flex flex-col gap-4 lg:border-r-2 border-dashed border-[#FFF2E4] w-fit">
           <h2 className="text-[#FFBDDE] text-xl lg:text-4xl font-semibold">
             Start Contributing
           </h2>
           <ul className="text-[#43fc5a] text-lg pl-10 lg:text-4xl space-y-2 list-disc marker:text-[#FFEDA6]">
             <li>
-            <span className="text-[#FFEDA6] font-thin">[GitHub]</span><a className="underline" href="https://github.com/topics/hacktoberfest"  target="_blank">Participating Hacktoberfest projects</a>
+              <span className="text-[#FFEDA6] font-thin">[GitHub]</span>
+              <a
+                className="underline"
+                href="https://github.com/topics/hacktoberfest"
+                target="_blank"
+              >
+                Participating Hacktoberfest projects
+              </a>
             </li>
             <li>
-            <span className="text-[#FFEDA6] font-thin">[GitLab]</span><a className="underline" href="https://gitlab.com/explore/projects/topics/hacktoberfest"  target="_blank">Participating Hacktoberfest projects</a>
+              <span className="text-[#FFEDA6] font-thin">[GitLab]</span>
+              <a
+                className="underline"
+                href="https://gitlab.com/explore/projects/topics/hacktoberfest"
+                target="_blank"
+              >
+                Participating Hacktoberfest projects
+              </a>
             </li>
             <li>
-            <span className="text-[#FFEDA6] font-thin">[GitHub]</span><a className="underline" href="https://goodfirstissue.dev/"  target="_blank">Explore projects with issues on good firstissue.dev</a>
+              <span className="text-[#FFEDA6] font-thin">[GitHub]</span>
+              <a
+                className="underline"
+                href="https://goodfirstissue.dev/"
+                target="_blank"
+              >
+                Explore projects with issues on good firstissue.dev
+              </a>
             </li>
           </ul>
         </div>
 
-
         <div className="flex flex-col gap-4 lg:w-fit md:w-[495px] sm:w-[495px] h-fit">
           <h2 className="text-[#FFBDDE] text-xl lg:text-4xl font-semibold">
             Sharpen Your Skills
           </h2>
           <ul className="text-[#43fc5a] text-lg lg:text-4xl pl-10 space-y-2 list-disc marker:text-[#FFEDA6] ">
             <li>
-              <span className="text-[#FFEDA6] font-thin">[GitHub]</span><a href="https://training.github.com/" className="underline" target="_blank">GitHub Training Manual</a>
+              <span className="text-[#FFEDA6] font-thin">[GitHub]</span>
+              <a
+                href="https://training.github.com/"
+                className="underline"
+                target="_blank"
+              >
+                GitHub Training Manual
+              </a>
             </li>
             <li>
-            <span className="text-[#FFEDA6] font-thin">[General]</span><a href="https://github.blog/developer-skills/github/how-to-write-the-perfect-pull-request/" className="underline"  target="_blank">How to write the perfect pull request</a>
+              <span className="text-[#FFEDA6] font-thin">[General]</span>
+              <a
+                href="https://github.blog/developer-skills/github/how-to-write-the-perfect-pull-request/"
+                className="underline"
+                target="_blank"
+              >
+                How to write the perfect pull request
+              </a>
             </li>
             <li>
-            <span className="text-[#FFEDA6] font-thin">[General]</span><a href="https://dev.to/chrissiemhrk/git-commit-message-5e21" className="underline"  target="_blank">How to write a good commit message</a>
+              <span className="text-[#FFEDA6] font-thin">[General]</span>
+              <a
+                href="https://dev.to/chrissiemhrk/git-commit-message-5e21"
+                className="underline"
+                target="_blank"
+              >
+                How to write a good commit message
+              </a>
             </li>
             <li>
-            <span className="text-[#FFEDA6] font-thin">[General]</span>
-              <a href="https://about.gitlab.com/blog/2022/02/07/first-time-open-source-contributor-5-things-to-get-you-started/" className="underline"  target="_blank">5 things for your first time contributing</a>
+              <span className="text-[#FFEDA6] font-thin">[General]</span>
+              <a
+                href="https://about.gitlab.com/blog/2022/02/07/first-time-open-source-contributor-5-things-to-get-you-started/"
+                className="underline"
+                target="_blank"
+              >
+                5 things for your first time contributing
+              </a>
             </li>
           </ul>
         </div>

src/modules/resourceForBeginner/page.tsx

@@ -7,11 +7,11 @@ import Stars from "../../components/Stars";
 const HacktoberfestPage: React.FC = () => {
   return (
     <div className="relative flex flex-col justify-center font-bold bg-neutral-950 min-h-screen overflow-hidden pt-0 pb-0">
-      <Stars className="absolute inset-0 w-fit h-full  min-h-[100vh] object-cover z-0" />{" "}
-      <div className="relative flex flex-col w-full min-h-[1016px] max-md:min-h-screen max-md:px-5 max-md:max-w-full z-10">
+      <Stars className="absolute inset-0 w-fit h-full  min-h-dvh object-cover z-0" />{" "}
+      <div className="relative flex flex-col w-full lg:min-h-[1016px] max-md:min-h-screen max-md:px-5 max-md:max-w-full z-10">
         {" "}
         <Header level="2" logo={false} />
-        <main className="flex lg:flex-row flex-col relative lg:gap-10 items-center lg:items-start justify-start lg:justify-center self-center mt-16 ml-4 w-full max-w-[1654px] max-md:mt-10 max-md:max-w-full p-10">
+        <main className="flex lg:flex-row flex-col relative lg:gap-10 items-center lg:items-start justify-start lg:justify-center self-center mt-5 lg:mt-9 ml-4 w-full max-w-[1654px] md:mt-5 max-md:max-w-full p-10">
           <BeginnerResource />
         </main>
       </div>

tailwind.config.ts

@@ -10,6 +10,9 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      screens: {
+        '2lg': '1100px', // Custom breakpoint for 1100px
+      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",