changed margins in Home and PianoRoll page, corrected paddings in Lin…

…ksSection
Nospoko · Apr 9, 2024 · cf542c3 · cf542c3
1 parent d100605
commit cf542c3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 15 deletions.
diff --git a/algrtm/src/app/contactUs/page.js b/algrtm/src/app/contactUs/page.js
@@ -7,8 +7,8 @@ import React from "react";
 
 const ContactUs = () => {
   return (
-    <section className="flex flex-col items-start mt-[2.75rem] md:mt-[4rem] lg:mt-[4.94rem]">
-      <div className="md:flex flex-row flex-column items-start gap-[2.75rem] md:gap-[4rem] mx-[1rem] md:mx-[2.75rem] xl:mx-[12.5rem]">
+    <section className="flex flex-col items-start mt-[2.75rem] md:mt-[4rem] xl:mt-[4.94rem]">
+      <div className="md:flex flex-row flex-column items-center gap-[2.75rem] md:gap-[4rem] mx-[1rem] md:mx-[2.75rem] xl:mx-[12.5rem] px-4">
         <ContactDescription />
         <ContactFormContainer />
       </div>

diff --git a/algrtm/src/app/page.js b/algrtm/src/app/page.js
@@ -7,16 +7,18 @@ import RoundedRectangle from "@/components/shared/RoundedRectangle";
 export default function Home() {
   return (
     <main className="flex flex-col items-center justify-center">
-      <DevelopSection />
-      <AlgorithmicMusicSection />
-      <RoundedTextComponent
-        backgroundColor="neutralLight-neutral90"
-        textTitleColor="neutralLight-neutral10"
-        textParagraph1Color="neutralLight-neutral10"
-        textParagraph2Color="neutralLight-neutral20"
-        gap="8"
-        version="version1"
-      />
+      <div className="w-full flex flex-col items-center justify-center px-4 md:mx-[2.75rem]">
+        <DevelopSection />
+        <AlgorithmicMusicSection />
+        <RoundedTextComponent
+          backgroundColor="neutralLight-neutral90"
+          textTitleColor="neutralLight-neutral10"
+          textParagraph1Color="neutralLight-neutral10"
+          textParagraph2Color="neutralLight-neutral20"
+          gap="8"
+          version="version1"
+        />
+      </div>
       <RoundedRectangle />
       <SolutionsSection version="version1" />
     </main>

diff --git a/algrtm/src/components/LinksSection.js b/algrtm/src/components/LinksSection.js
@@ -8,7 +8,7 @@ import externalLinks from "@/data/externalLinks";
 const LinksSection = () => {
   return (
     <section className=" bg-neutralLight-neutral10 w-full border-t-2 border-neutralLight-neutral20 flex flex-col md:flex-row justify-center items-center ">
-      <div className=" flex flex-col justify-between bg-neutralLight-neutral10 mx-[1rem] my-[4rem] md:mx-[2.75rem] md:mt-[4rem] md:mb-[7.75rem] lg:mx-[12.5rem] lg:mt-16 lg:mb-[7.75rem] gap-[3rem] md:gap-16">
+      <div className=" w-full flex flex-col justify-between bg-neutralLight-neutral10 px-[1rem] py-[4rem] md:mx-[2.75rem] md:mt-[4rem] md:mb-[7.75rem] lg:mx-[12.5rem] lg:mt-16 lg:mb-[7.75rem] gap-[3rem] md:gap-16">
         <div className=" flex flex-col justify-between md:gap-auto md:flex-row xl:gap-[11.125rem] bg-neutralLight-neutral10 w-full">
           <div className=" flex flex-col gap-6 ">
             <div className=" flex w-full justify-start h5">

diff --git a/algrtm/src/components/Navbar.js b/algrtm/src/components/Navbar.js
@@ -23,7 +23,7 @@ export default function Navbar() {
         </Link>
       </div>
 
-      <div className="flex w-full flex-wrap items-center justify-end gap-y-1 md:w-[initial] md:flex-nowrap gap-[1.5rem] ">
+      <div className="flex w-full flex-wrap items-center justify-end gap-y-1 md:w-[initial] md:flex-nowrap gap-[1.5rem]">
         <div className="hidden md:flex items-center justify-center gap-x-2">
           <Link
             className="flex w-full items-center justify-center transition md:p3SB lg:p3 p-2.5 animation"
@@ -68,7 +68,13 @@ export default function Navbar() {
           className=" flex md:hidden items-center justify-center cursor-pointer"
           onClick={handleNav}
         >
-          <Image src="/menu.svg" width={24} height={24} alt="Hamburger icon" />
+          <Image
+            src="/menu.svg"
+            width={24}
+            height={24}
+            alt="Hamburger icon"
+            className="mr-[1rem]"
+          />
         </div>
         <div
           className={