Merge pull request #26 from intelowlproject/develop

v0.1.2

Author: mlodic

components/Footer.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 export default function Footer() {
   return (
-    <footer className="relative z-50 bg-[#17171D] md:pt-32 pt-16 md:mt-32 pb-10 lg:pt-[120px] lg:pb-20 md:rounded-t-[75px] rounded-t-[40px]">
-      <div className="container mx-auto w-5/6">
-        <div className="-mx-4 flex flex-wrap justify-">
+    <footer className="relative z-50 bg-[#17171D] md:pt-32 pt-16 md:mt-10 pb-10 lg:pt-[120px] lg:pb-20 md:rounded-t-[75px] rounded-t-[40px]  ">
+      <div className="container mx-auto w-[90vw]">
+        <div className="-mx-4 flex flex-wrap justify-around">
           <div className="w-full px-4 sm:w-2/3 lg:w-6/12">
             <div className="mb-10 w-full">
               <a href="/" className="mb-6 inline-block max-w-[160px]">
@@ -26,19 +26,19 @@ export default function Footer() {
               </a>
             </div>
           </div>
-          <div className="w-full px-4 sm:w-1/2 lg:w-6/12">
-            <div className="mb-10 w-full text-white" id="contributors">
+          <div className="px-2 xl:w-[50vh] md:w-[65vh] lg:w-[50vh]">
+            <div className="mb-10 text-white" id="contributors">
               <h4 className="text-dark mb-9 text-xl font-semibold">
                 Maintainers
               </h4>
-              <ul>
-                <li>
+              <ul className="flex flex-col">
+                <li className="flex w-full">
                   <a
                     href="https://twitter.com/matte_lodi"
-                    className="text-body-color font-semibold hover:text-primary mb-2 inline-block text-md leading-loose"
+                    className="text-body-color font-semibold hover:text-primary mb-2 text-md leading-loose"
                   >
                     Matteo Lodi{" "}
-                    <span className="ml-12 font-small text-sm opacity-90 font-SpaceGrotesk">
+                    <span className="font-small text-sm opacity-90 font-SpaceGrotesk sm:ml-[24px] md:ml-[48px] ml-3">
                       Author and Principal Maintainer{" "}
                     </span>
                   </a>

components/Slider.tsx

@@ -18,7 +18,7 @@ export default function Slider(props: sliderProps) {
   return (
     <>
       {isTestimonial ? (
-        <div id="testimonials-element" className="w-[90%]">
+        <div id="testimonials-element" className="w-[100%]">
           <div className="mx-auto max-w-screen-xl py-16 sm:px-6 lg:px-8">
             <Swiper
               spaceBetween={25}

components/sections/FAQSection.tsx

@@ -12,7 +12,7 @@ export default function FAQSection() {
   };
 
   return (
-    <div className="w-5/6 md:w-full max-w-screen-xs lg:max-w-screen-md xl:max-w-screen-lg mt-5 space-y-5">
+    <div className="w-5/6 md:w-full max-w-screen-xs lg:max-w-screen-md xl:max-w-screen-lg mt-5 space-y-5 md:px-7">
       {FAQData.map((FAQ, index) => {
         return (
           <div key={index} className="w-full border-b-2 border-gray-500 pb-6">

components/sections/FeatureSection.tsx

@@ -2,7 +2,7 @@ import { FeaturesData } from "../../constants/featuresdata";
 export default function FeatureSection() {
   return (
     <div id="">
-      <div className="mx-auto max-w-screen-lg px-8 py-16 sm:px-6 ">
+      <div className="mx-auto max-w-screen-lg lg:px-8 lg:py-16 sm:px-6 sm:py-3 md:py-5 ">
         <div className="[column-fill:_balance] sm:columns-2 sm:gap-6 lg:columns-2 lg:gap-8">
           {FeaturesData.map((feature, index) => {
             if (feature.color === "darker") {

components/sections/HeroSection.tsx

@@ -19,7 +19,7 @@ export default function HeroSection(props: HeroSectionProps) {
       {isMobile ? (
         <div
           id="hero-section"
-          className="flex flex-col w-screen justify-items-end space-y-5 items-end mt-32 pb-24"
+          className="flex flex-col w-screen justify-items-end space-y-5 items-end mt-32 lg:pb-24 sm:pb-4"
         >
           <div className="bg-inherit w-full flex flex-col items-center justify-center px-5">
             <h1 className="text-white text-center text-3xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">

components/sections/VideoSection.tsx

@@ -2,12 +2,12 @@
 export default function VideoSection() {
   return (
     <>
-      <div className="flex flex-col ">
+      <div className="flex flex-col">
         <div
           id="text"
-          className="flex flex-col w-full md:h-2/5 items-center justify-center -mt-12"
+          className="flex flex-col w-full md:h-2/5 items-center justify-center sm:mt-20 md:mt-32"
         >
-          <h2 className="w-4/5 text-center text-xl text-white md:text-5xl xl:text-6xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">
+          <h2 className="w-4/5 text-center text-xl text-white md:text-5xl xl:text-6xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold">
             Your <span className="text-[#00ADEF]">Open Source </span> Solution for your day-to-day activities.
           </h2>
           <h3 className="text-center md:w-2/3 mx-6 text-white text-lg md:text-2xl lg:text-2xl xl:text-3xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-light opacity-70 mt-2">
@@ -16,9 +16,9 @@ export default function VideoSection() {
           </h3>
         </div>
       </div>
-      <div id="video" className="flex flex-col justify-center items-center md:w-screen md:h-3/5 rounded-3xl mt-12 pb-24" style={{alignItems:'center', justifyContent: 'center'}}>
+      <div id="video" className="flex flex-col justify-center items-center md:w-screen md:h-3/5 rounded-3xl mt-12 sm: pb-2 xl:mt-[-2rem]" style={{alignItems:'center', justifyContent: 'center'}}>
         <iframe
-            className="md:w-[70%] md:h-[100%] lg:h-[150%] rounded-3xl"
+            className="md:w-[70%] md:h-[100%] lg:h-[150%] lg:w-[60%] xl:h[150%] xl:w-1/2 rounded-3xl md:mb-16"
             src="https://www.youtube.com/embed/pHnh3qTzSeM">
         </iframe>
       </div>

package-lock.json

@@ -79,25 +79,25 @@ export default function Home() {
         </div>
         <section
           id="video-section"
-          className="flex flex-col items-center justify-center md:h-screen md:w-screen md:mt-52 mt-14 lg:mt-64"
+          className="flex flex-col items-center justify-center md:w-screen md:mt-5 mt-14 xl:mt-24 lg:mt-6 lg:h-[100vh] md:h-[90vh] xl:h-[100vh]"
         >
           <VideoSection />
         </section>
         <section
           id="feature-section"
-          className=" w-screen flex flex-col mt-14 md:mt-0 items-center justify-start xl:mt-14 mb-24"
+          className=" w-screen flex flex-col mt-14 md:mt-0 items-center justify-start xl:mt-14 xl:mb-16 sm: mb-8 sm:mt-8"
         >
           <h2 className="text-center text-2xl text-white md:text-5xl xl:text-6xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">
             What do we provide?
           </h2>
-          <h3 className="text-center md:w-2/3 mx-6 text-white text-lg md:text-2xl lg:text-2xl xl:text-3xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-light opacity-70 mt-2">
+          <h3 className="text-center md:w-2/3 mx-6 text-white text-lg md:text-2xl lg:text-2xl xl:text-3xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-light opacity-70 py-3">
             this is what we provide, compared to others.
           </h3>
           <FeatureSection />
         </section>
         <section
           id="testimonials-section"
-          className="md:h-screen w-screen flex flex-col items-center justify-start xl:mt-16"
+          className="md:mb-5 w-screen flex flex-col items-center justify-start xl:mt-5"
         >
           <h2 className="text-center text-2xl text-white md:text-5xl xl:text-6xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">
             Testimonials
@@ -109,19 +109,19 @@ export default function Home() {
         </section>
         <section
           id="faq-section"
-          className="flex flex-col items-center justify-start w-screen pb-32"
+          className="flex flex-col items-center justify-start w-screen lg:pb-20 sm:pb-8"
         >
           <h2 className="text-center text-3xl text-white md:text-5xl xl:text-6xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">
             FAQs
           </h2>
-          <h3 className="text-center md:w-2/3 mx-6 text-white text-lg md:text-2xl lg:text-2xl xl:text-3xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-light opacity-70 mt-2 mb-14 ">
+          <h3 className="text-center md:w-2/3 mx-6 text-white text-lg md:text-2xl lg:text-2xl xl:text-3xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-light opacity-70 mt-2  mb-5 ">
             Don&apos;t worry! We are here to help. In case you don&apos;t find the answer that you are looking for, feel free to contact us
           </h3>
           <FAQSection />
         </section>
         <section
           id="sponsor-section"
-          className="h-screen md:w-screen flex flex-col items-center justify-start mt-16"
+          className="md:w-screen flex flex-col items-center justify-start mt-16"
         >
           <h2 className="text-center text-4xl text-white lg:text-5xl xl:text-6xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">
             Our Sponsors