Merge pull request #62 from Octalogic-Tech/patch/ui-improvements-part…

…-III

Improved about page and contact page.

src/app/about/page.tsx

@@ -4,7 +4,6 @@ import Image from "next/image";
 import PillButton from "@/components/pill-button/pill-button";
 import HorizontalRule from "@/components/horizontal-rule/horizontal-rule";
 import Heading from "@/components/heading/heading";
-import Paragraph from "@/components/paragraph/paragraph";
 
 import { host } from "@/config/vars";
 
@@ -17,52 +16,52 @@ export const metadata: Metadata = {
 
 const About = () => {
   return (
-    <>
-      <div className="sm:mx-4 sm:my-8 md:mx-16 md:my-12 lg:ml-28 lg:mr-28 xl:mt-21 xl:mb-21">
-        <Heading size="large" className="max-w-7xl mx-auto sm:text-center md:text-left ">
+    <div className="max-w-[86rem] mx-auto">
+      <div className="mx-8 my-8 md:mx-16 md:my-12 xl:mt-21 xl:mb-21">
+        <Heading size="large" className="mx-auto text-center md:text-left ">
           We Innovate To Make A Difference
         </Heading>
-        <div className="flex max-w-7xl mx-0 my-8 sm:flex sm:flex-col-reverse md:flex md:flex-row">
+        <div className="flex mx-0 my-8 flex-col-reverse md:flex-row">
           <div className="flex-none md:w-3/5 ">
-            <Paragraph className={`max-w-3xl sm:text-2xl md:text-xl  xl:text-2xl`}>
+            <p className={`text-[16px] text-[#212529]`}>
               Founded by classmates straight out of Uni, Octalogic Tech is home to all kinds of
               crazy from weird taste in music to conversations that would put a loony bin to shame,
               you&apos;ll find it all here.
-            </Paragraph>
-            <Paragraph className={`max-w-3xl  sm:text-2xl md:text-xl  xl:text-2xl `}>
+            </p>
+            <p className={`text-[16px] text-[#212529]`}>
               When we say this is like our 2nd home we literally mean it having ditched 9-5 ers and
               opted for all-nighters instead. But at the end of the day, we love what we do and we
               are good at it.
-            </Paragraph>
-            <Paragraph className={`max-w-3xl mt-8 sm:text-2xl md:text-xl lg:mb-12 xl:text-2xl`}>
+            </p>
+            <p className={`mt-8 text-[16px] text-[#212529]`}>
               Be it a Mobile app, a Web app, a Website, a Desktop application or digital marketing,
               we got you covered and May The Force Be With you
-            </Paragraph>
-            <Paragraph className={`mt-5 max-w-3xl text-base sm:text-xl`}>
+            </p>
+            <p className={`mt-5 text-[14px] text-[#212529]`}>
               P.S The image is completely irrelevant. We just really like Star Wars
-            </Paragraph>
+            </p>
           </div>
-          <div className="relative w-full sm:mt-0 sm:mb-0 sm:pt-[100%] md:mt-8 md:mb-24 md:pt-72 lg:mb-96 lg:pt-0 xl:mb-0">
+          <div className="relative w-full mt-0 pt-[100%] md:mt-8 md:pt-72 lg:pt-0 ">
             <Image
               src="/images/may_the_force_bgdm.svg"
               alt="Octalogic Tech"
               fill
               priority
-              sizes="(min-width: 0px) 100vw"
+              // sizes="(min-width: 0px) 100vw"
             />
           </div>
         </div>
       </div>
-      <div className="sm:mt-12 md:mt-0">
-        <Heading size="large" className="text-center ">
+      <div className="mt-[10rem]">
+        <Heading size="large" className="text-center">
           Let&apos;s craft brilliance together!
         </Heading>
         <div className="mt-12 text-center">
           <PillButton title={"Get In Touch"} href={"/contact"} />
         </div>
       </div>
       <HorizontalRule />
-    </>
+    </div>
   );
 };
 

src/app/contact/page.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Metadata } from "next";
 
-import Paragraph from "@/components/paragraph/paragraph";
 import Heading from "@/components/heading/heading";
 import { ContactForm } from "@/components/contact-form/contact-form";
 
@@ -18,19 +17,19 @@ export const metadata: Metadata = {
 function ContactPage() {
   return (
     <div>
-      <Heading size="large" className="mb-4 mt-16 text-center ">
+      <Heading size="large" className="mb-4 mt-[4.25rem] text-center text-[#26a69a]">
         Let&apos;s have a conversation
       </Heading>
-      <Paragraph className="text-xl text-center opacity-80 mb-4 leading-6">
+      <p className="text-[16px] text-center opacity-80 mb-4 leading-6 text-[#212529]">
         [email protected] &nbsp; | &nbsp; +91 7030518285
-      </Paragraph>
-      <Paragraph className="text-xl text-center opacity-80 mb-4 leading-6">
+      </p>
+      <p className="text-[16px] text-center opacity-80 mb-4 leading-6 text-[#212529]">
         3rd Floor, Sunivas Building, Near Taj Vivanta, St. Inez, Goa
-      </Paragraph>
-      <Paragraph className="w-3/5 text-center text-base mx-auto mb-4 leading-6 opacity-95 mt-6">
+      </p>
+      <p className="w-3/5 text-[16px] text-center text-base mx-auto mb-4 leading-6 opacity-95 mt-6 text-[#212529]">
         Send us a message and we&apos;ll get in touch with you shortly to better understand your
         needs and brainstorm possible solutions.
-      </Paragraph>
+      </p>
       <ContactForm apiUrl={apiUrl} />
       <div className="w-full pt-[43.478%] bg-no-repeat bg-cover bg-center bg-[url('/images/contact_background.svg')]"></div>
     </div>