feat: add landing page

app/page.tsx

@@ -1,11 +1,13 @@
 
 import Header from '@components/Header'
+import Landing from '@components/Landing'
 import React from 'react'
 
 const Home = () => {
   return (
     <section className="home">
       <Header />
+      <Landing />
     </section>
   )
 }

components/Landing.tsx

@@ -0,0 +1,22 @@
+
+import Image from 'next/image';
+import Moonbami from '@public/assets/images/moonbami.jpeg';
+import Galaxy_Background from '@public/assets/images/vector-galaxy-background.jpg';
+
+const Landing = () => {
+  return (
+    <section id="profile" className="profile-section h-[55rem] flex flex-wrap justify-center items-center gap-x-[25rem] py-0 px-[100px]">
+      <Image className="absolute right-0 z-[-1] w-full h-full object-cover opacity-30" src={ Galaxy_Background } alt="Gradient galaxy background"/>
+      <div className="description text-white">
+        <h1 className="text-8xl font-bold tracking-[-0.96px] pb-8">Hey there!</h1>
+        <p className="w-[37.5rem] text-xl font-normal leading-7 ">My name is <strong className="landing-strong">Moonbami</strong>, and I am currently pursuing a career for being a <strong className="landing-strong">full-stack web developer</strong>. I am still a novice, but I am making <strong className="landing-strong">progress and learning</strong> on a daily basis.</p>
+      </div>
+      <div className="display-profile relative">
+        <div className="square-holder"></div>
+        <Image className="w-[21.875rem] h-[21.875rem] border-[3px] border-solid border-white rounded-lg" src={ Moonbami } alt="Jam Moonbami" />
+      </div>
+    </section>
+  )
+}
+
+export default Landing;

styles/globals.css

@@ -6,7 +6,7 @@
 *,
 ::before,
 ::after {
-  @apply box-border p-o m-0 font-poppins;
+  @apply box-border p-0 m-0 font-poppins;
 }
 
 /* header styles */
@@ -17,11 +17,19 @@ header {
   @apply bg-transparent;
 }
 .header-changed {
-  @apply bg-opaque-rb
+  @apply bg-opaque-rb;
 }
 
 .nav-link {
   @apply text-white no-underline text-base font-normal leading-5 tracking-[0.8px] w-[4.375rem] h-[1.375rem] transition-all hover:text-electric-pink;
 }
 /* header styles */
 
+/* landing styles */
+.landing-strong {
+  @apply text-electric-pink;
+}
+.square-holder {
+  @apply before:content-none before:absolute before:top-[-30px] before:right-[130px] before:w-[15.625rem] before:h-[15.625rem] before:rounded-lg before:border-[3px] before:border-solid before:border-white z-[-1] 
+  after:content-none after:absolute after:top-[30px] after:right-[-30px] after:w-[21.875rem] after:h-[21.875rem] after:rounded-lg after:border-[3px] after:border-solid after:border-white z-[-1]
+}