Feat: Make website responsive (keep-starknet-strange#90)

* feat: mobile responsiveness for website

* fix: bug is styling

website/src/App.tsx

@@ -16,12 +16,12 @@ function App() {
       <HeroSection />
       <About />
       <DescriptionSection />
-      <div className="flex flex-col gap-y-[140px]">
+      <div className="flex flex-col desktop:gap-y-[80px] gap-y-[50px] mt-[50px] desktop:mt-[180px]">
         <ContributeSection />
         <DownloadSection />
         <Faq />
-        <Footer />
       </div>
+      <Footer />
     </div>
   );
 }

website/src/components/About.tsx

@@ -1,9 +1,9 @@
 import { motion } from "framer-motion";
 const About: React.FC = () => {
   return (
-    <div className="bg-black py-[140px] text-center text-white text-[32px] leading-[50px] font-normal z-[50] relative px-[171px]">
+    <div className="bg-black py-[40px] tab:py-[140px] text-center text-white text-base tab:text-[32px] leading-[32px] desktop:leading-[50px] font-normal z-[50] relative px-6 desktop:px-[171px]">
       <motion.p
-        animate={{ x: 100 }}
+        animate={{ x: [-100, 0] }}
         transition={{ ease: "easeOut", duration: 1 }}
         className="gradient-text"
         initial={{ opacity: 0 }}

website/src/components/ContributeSection.tsx

@@ -4,7 +4,7 @@ import gotTo from "../assets/go-to.svg";
 import { motion } from "framer-motion";
 const ContributeSection: React.FC = () => {
   return (
-    <div className="pt-[84px]  text-white pb-[180px] bg-contributeBg">
+    <div className="desktop:pt-[84px] pt-[40px] pb-[50px] desktop:pb-[180px] bg-contributeBg bg-contain tab:bg-cover bg-center bg-no-repeat text-white h-auto desktop:h-[654px]">
       <motion.div
         animate={{ x: [-1200, 0] }}
         transition={{
@@ -14,14 +14,18 @@ const ContributeSection: React.FC = () => {
         whileInView={{ opacity: 1 }}
         className="flex flex-col items-center"
       >
-        <img src={githubLogo} className="mb-4" alt="" />
-        <h3 className="text-[48px] font-bold mb-[18px]">
+        <img
+          src={githubLogo}
+          className="mb-4 desktop:h-[150px] desktop:w-[150px] h-[80px] w-[80px]"
+          alt=""
+        />
+        <h3 className="text-base desktop:text-[48px] font-bold mb-[21px] desktop:leading-[56px]">
           Contribute to Joyboy{" "}
         </h3>
-        <p className="text-[24px] mb-10">
+        <p className="desktop:text-[24px] text-sm mb-10 w-[80%] desktop:w-[623px]  text-center">
           Joyboy is available on iOS and Android. It's free and open source.
         </p>
-        <button className="py-[15px] px-[42px] bg-white rounded-[5px] flex gap-x-[10px] items-center text-black">
+        <button className="py-[15px] desktop:px-[42px] px-[24px] bg-white rounded-[5px] flex gap-x-[10px] items-center text-black">
           <img src={githubLogoDark} alt="" />
           See all issues on Github
           <img src={gotTo} alt="" />