Merge pull request #93 from gormurad/develop

Develop

Author: NavidMitchell

website/components/Header.vue

@@ -22,7 +22,7 @@ watch(isMenuOpen, (val) => {
     class="bg-[#101010] text-[#EDEEF2] shadow-md sticky top-0 left-0 z-50 py-5"
   >
     <BaseContainer>
-      <nav class="mx-auto flex justify-between items-center xl:px-[88px] px-5">
+      <nav class="mx-auto flex justify-between items-center px-5 xl:px-0">
         <NuxtLink
           to="/"
           class="text-lg font-bold"

website/components/home/FeaturesComponent.vue

@@ -44,31 +44,27 @@ const features = [
 <template>
   <BaseContainer>
     <section class="xl:pt-[120px] pt-[52px] xl:px-0 px-5 dark:bg-[#101010]">
-      <h1 class="font-[BauhausNanoDisplayRegular] xl:text-[40px] text-[30px] mb-[48px] text-center text-[#101010] dark:text-[#EDEEF2]">
+      <h1
+        class="font-[BauhausNanoDisplayRegular] xl:text-[40px] text-[30px] mb-[48px] text-center text-[#101010] dark:text-[#EDEEF2]">
         Powerhouse Tools for Developers
       </h1>
-
       <div class="grid grid-cols-1 md:grid-cols-2 gap-[43px] xl:pb-[70px] pb-[52px] mx-auto">
-        <Card v-for="(f, i) in features" :key="i" class="border border-[#EDEEF2] dark:border-[#2B2A32] bg-transparent xl:p-8 p-5 rounded-3xl">
-          <template #content>
-            <div class="flex xl:gap-7 gap-4">
-              <img
-                v-if="isMounted"
-                :src="`/website/icons/${colorMode.value === 'dark' ? f.icon : f.iconLight}`"
-                :alt="f.title"
-                class="xl:w-[56px] xl:h-[56px] w-[52px] h-[52px]"
-              />
-              <div class="flex flex-col">
-                <h3 class="xl:text-xl text-[19px] dark:text-[#EDEEF2] text-[#101010] mb-3 font-[BauhausNanoDisplayMedium]">
-                  {{ f.title }}
-                </h3>
-                <p class="dark:text-[#BBBBBF] text-[#2B2A32] xl:text-lg text-[17px] font-[InterRegular]">
-                  {{ f.details }}
-                </p>
-              </div>
+        <div v-for="(f, i) in features" :key="i"
+          class="border border-[#EDEEF2] dark:border-[#2B2A32] bg-transparent xl:p-8 p-5 rounded-3xl">
+          <div class="flex xl:gap-7 gap-4">
+            <img v-if="isMounted" :src="`/website/icons/${colorMode.value === 'dark' ? f.icon : f.iconLight}`"
+              :alt="f.title" class="xl:w-[56px] xl:h-[56px] w-[52px] h-[52px]" />
+            <div class="flex flex-col">
+              <h3
+                class="xl:text-xl text-[19px] dark:text-[#EDEEF2] text-[#101010] mb-3 font-[BauhausNanoDisplayMedium]">
+                {{ f.title }}
+              </h3>
+              <p class="dark:text-[#BBBBBF] text-[#2B2A32] xl:text-lg text-[17px] font-[InterRegular]">
+                {{ f.details }}
+              </p>
             </div>
-          </template>
-        </Card>
+          </div>
+        </div>
       </div>
     </section>
   </BaseContainer>

website/components/home/HeroComponent.vue

@@ -3,13 +3,14 @@
     <div v-if="!isMounted" class="fixed inset-0 flex items-center justify-center bg-black text-white z-50 transition-opacity duration-300">
       <ProgressSpinner class="w-10 h-10 text-white" strokeWidth="4" animationDuration="1s" />
     </div>
-    <div v-if="isMounted" class="w-full bg-cover bg-center bg-no-repeat py-1 transition-opacity duration-500 ease-in" :style="{
+    <div v-if="isMounted" class="w-full bg-cover flex items-center justify-between bg-center bg-no-repeat py-1 transition-opacity duration-500 ease-in xl:pb-10" :style="{
       backgroundImage: `url(/images/${colorMode.value === 'dark' ? 'mask.svg' : 'mask-light.svg'})`,
       backgroundColor: colorMode.value === 'dark' ? '#000000' : '#FFFFFF'
     }">
+    <div class="w-full bg-cover max-w-[1700px] mx-auto flex items-center justify-between xl:flex-row flex-col-reverse bg-center bg-no-repeat py-1 transition-opacity duration-500 ease-in">
       <BaseContainer>
-        <div class="w-full flex justify-between items-center xl:px-0 px-5 xl:flex-row flex-col-reverse">
-          <Card class="max-w-full xl:max-w-[550px] mt-0 xl:mt-16 mb-[54px] xl:mb-0 text-white shadow-none border-none bg-transparent">
+        <div class="w-full flex justify-between items-center xl:px-0 pr-5 !pl-[30px]">
+          <Card class="max-w-full xl:max-w-[550px] mt-0 mb-[54px] xl:mb-0 text-white shadow-none border-none bg-transparent">
             <template #content>
               <p class="flex flex-col xl:mb-10 mb-3">
                 <span class="xl:text-[68px] text-4xl text-center xl:text-left font-[BauhausNanoDisplayRegular] leading-[110%] dark:text-[#EDEEF2] text-[#101010]">
@@ -26,11 +27,12 @@
               </div>
             </template>
           </Card>
-          <div class="mb-11 xl:mb-0">
-            <img src="/public/images/rectangle-cut.png" alt="Hero Section Image" class="max-w-[800px] w-full" />
-          </div>
         </div>
       </BaseContainer>
+      <div class="mb-11 xl:mb-0">
+        <img src="/public/images/rectangle-cut.png" alt="Hero Section Image" class="max-w-[800px] w-full" />
+      </div>
+    </div>
     </div>
   </div>
 </template>