feat(ui): Enhance contact page and add location flag to footer

This commit introduces several UI improvements to enhance user experience and visual appeal.

On the contact page, a new heading "Unlock Your Growth Potential" and a descriptive subheading have been added above the form. This provides better context and a stronger call-to-action for users.

In the footer, the location information now includes a flag icon for better visual identification. This was achieved by updating the `ContactInfo` component to accept an optional icon source.

Additionally, various styling adjustments have been made for improved responsiveness and visual consistency across the homepage and footer.

app/contact-us/page.tsx

@@ -2,8 +2,15 @@ import ContactUsForm from "./form";
 
 const ContactUs = () => {
   return (
-    <div className="flex flex-col items-center mt-20 px-4">
-      <section className="border border-gray-300 rounded-4xl w-full max-w-4xl flex flex-col items-center bg-white">
+    <div className="flex flex-col items-center mt-20 px-4 ">
+      <div className="md:w-2/3 m-auto flex flex-col gap-4 mb-12">
+        <h2 className="font-bold text-4xl">Unlock Your Growth Potential</h2>
+        <p className="font-normal text-[16px] text-gray-600">
+          Register for early access and a free consultation. Let's start winning
+          together.
+        </p>
+      </div>
+      <section className="border border-gray-300 rounded-4xl w-full md:max-w-2/3 flex flex-col items-center bg-white">
         <ContactUsForm />
       </section>
     </div>

app/layout.tsx

@@ -25,11 +25,13 @@ function ContactInfo({
   contact,
   href,
   ariaLabel,
+  contactIconSrc,
 }: {
   icon: string;
   contact: string;
   href?: string;
   ariaLabel: string;
+  contactIconSrc?: string;
 }) {
   return (
     <div className="flex gap-3 my-3 text-white">
@@ -43,12 +45,22 @@ function ContactInfo({
       {href ? (
         <a
           href={href}
-          className="cursor-pointer"
+          className="cursor-pointer min-w-fit"
           aria-label={ariaLabel}>
           {contact}
         </a>
       ) : (
-        <p>{contact}</p>
+        <p className="flex gap-3">
+          {!!contactIconSrc && (
+            <Image
+              src={contactIconSrc}
+              width={20}
+              height={20}
+              alt="flag"
+            />
+          )}
+          {contact}
+        </p>
       )}
     </div>
   );
@@ -76,6 +88,7 @@ export default async function RootLayout({
       icon: "/Location.svg",
       contact: "Stockholm, Sweden",
       ariaLabel: "Our location in Stockholm, Sweden",
+      contactIconSrc: "/sweden.svg",
     },
   ];
 
@@ -116,7 +129,7 @@ export default async function RootLayout({
           <div className="absolute w-full -top-[420px] md:-top-72">
             <ContactUs />
           </div>
-          <div className="container px-4 py-4 m-auto flex flex-col justify-center items-center mt-72 ">
+          <div className="container px-4 py-4 m-auto flex flex-col justify-center items-center mt-96 ">
             <div className="flex justify-between flex-col md:flex-row gap-14 w-full md:w-1/2">
               <div>
                 <Image
@@ -141,6 +154,7 @@ export default async function RootLayout({
                     contact={contact.contact}
                     href={contact.href}
                     ariaLabel={contact.ariaLabel}
+                    contactIconSrc={contact.contactIconSrc}
                   />
                 ))}
               </div>

app/page.tsx

@@ -47,7 +47,7 @@ export default function Home() {
   return (
     <>
       <section className="block md:flex justify-around items-center">
-        <div className="flex gap-4 w-full md:w-1/2 font-bold text-4xl text-center flex-col bg-gray-800/5 p-10 rounded-[40px] h-[500px] mb-16">
+        <div className="flex gap-4 w-full md:w-1/2 font-bold text-4xl text-center flex-col bg-gray-800/10 p-10 rounded-[40px] h-fit mb-16">
           <h2>
             <span>$</span>
             <span>12,345,678</span>
@@ -167,7 +167,7 @@ export default function Home() {
           </li>
         </ul>
       </section>
-      <section className="flex flex-col mt-36 gap-10 w-3/4 m-auto">
+      <section className="flex flex-col mt-36 gap-10 md:w-3/4 m-auto">
         <div>
           <h2 className="font-bold text-4xl">The Opplens Advantage</h2>
         </div>