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/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>