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.
This commit is contained in:
AmirReza Jamali
@@ -2,8 +2,15 @@ import ContactUsForm from "./form";
|
|||||||
|
|
||||||
const ContactUs = () => {
|
const ContactUs = () => {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center mt-20 px-4">
|
<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="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 />
|
<ContactUsForm />
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+17
-3
@@ -25,11 +25,13 @@ function ContactInfo({
|
|||||||
contact,
|
contact,
|
||||||
href,
|
href,
|
||||||
ariaLabel,
|
ariaLabel,
|
||||||
|
contactIconSrc,
|
||||||
}: {
|
}: {
|
||||||
icon: string;
|
icon: string;
|
||||||
contact: string;
|
contact: string;
|
||||||
href?: string;
|
href?: string;
|
||||||
ariaLabel: string;
|
ariaLabel: string;
|
||||||
|
contactIconSrc?: string;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="flex gap-3 my-3 text-white">
|
<div className="flex gap-3 my-3 text-white">
|
||||||
@@ -43,12 +45,22 @@ function ContactInfo({
|
|||||||
{href ? (
|
{href ? (
|
||||||
<a
|
<a
|
||||||
href={href}
|
href={href}
|
||||||
className="cursor-pointer"
|
className="cursor-pointer min-w-fit"
|
||||||
aria-label={ariaLabel}>
|
aria-label={ariaLabel}>
|
||||||
{contact}
|
{contact}
|
||||||
</a>
|
</a>
|
||||||
) : (
|
) : (
|
||||||
<p>{contact}</p>
|
<p className="flex gap-3">
|
||||||
|
{!!contactIconSrc && (
|
||||||
|
<Image
|
||||||
|
src={contactIconSrc}
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
alt="flag"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{contact}
|
||||||
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -76,6 +88,7 @@ export default async function RootLayout({
|
|||||||
icon: "/Location.svg",
|
icon: "/Location.svg",
|
||||||
contact: "Stockholm, Sweden",
|
contact: "Stockholm, Sweden",
|
||||||
ariaLabel: "Our location in 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">
|
<div className="absolute w-full -top-[420px] md:-top-72">
|
||||||
<ContactUs />
|
<ContactUs />
|
||||||
</div>
|
</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 className="flex justify-between flex-col md:flex-row gap-14 w-full md:w-1/2">
|
||||||
<div>
|
<div>
|
||||||
<Image
|
<Image
|
||||||
@@ -141,6 +154,7 @@ export default async function RootLayout({
|
|||||||
contact={contact.contact}
|
contact={contact.contact}
|
||||||
href={contact.href}
|
href={contact.href}
|
||||||
ariaLabel={contact.ariaLabel}
|
ariaLabel={contact.ariaLabel}
|
||||||
|
contactIconSrc={contact.contactIconSrc}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+2
-2
@@ -47,7 +47,7 @@ export default function Home() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<section className="block md:flex justify-around items-center">
|
<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>
|
<h2>
|
||||||
<span>$</span>
|
<span>$</span>
|
||||||
<span>12,345,678</span>
|
<span>12,345,678</span>
|
||||||
@@ -167,7 +167,7 @@ export default function Home() {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</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>
|
<div>
|
||||||
<h2 className="font-bold text-4xl">The Opplens Advantage</h2>
|
<h2 className="font-bold text-4xl">The Opplens Advantage</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+3
-3
@@ -1,4 +1,4 @@
|
|||||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M20.5 11.1755C20.5 15.6907 16.9183 21 12.5 21C8.08172 21 4.5 15.6907 4.5 11.1755C4.5 6.66029 8.08172 3 12.5 3C16.9183 3 20.5 6.66029 20.5 11.1755Z" fill="#F4F4F4" stroke="#0164FF" stroke-width="1.5"/>
|
<path d="M20 11.1755C20 15.6907 16.4183 21 12 21C7.58172 21 4 15.6907 4 11.1755C4 6.66029 7.58172 3 12 3C16.4183 3 20 6.66029 20 11.1755Z" fill="#0146B2" stroke="#92BDFF" stroke-width="1.5"/>
|
||||||
<path d="M10 10.5C10 9.11929 11.1193 8 12.5 8C13.8807 8 15 9.11929 15 10.5C15 11.8807 13.8807 13 12.5 13C11.1193 13 10 11.8807 10 10.5Z" stroke="#0164FF" stroke-width="1.5"/>
|
<path d="M9.5 10.5C9.5 9.11929 10.6193 8 12 8C13.3807 8 14.5 9.11929 14.5 10.5C14.5 11.8807 13.3807 13 12 13C10.6193 13 9.5 11.8807 9.5 10.5Z" stroke="#92BDFF" stroke-width="1.5"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 488 B After Width: | Height: | Size: 476 B |
+3
-3
@@ -1,4 +1,4 @@
|
|||||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M3.38539 8.84875C4.05805 6.13984 6.20602 4.04534 8.93056 3.44162L9.38443 3.34105C11.4366 2.88632 13.5634 2.88632 15.6156 3.34105L16.0694 3.44162C18.794 4.04534 20.942 6.13984 21.6146 8.84876C22.1285 10.9182 22.1285 13.0819 21.6146 15.1512C20.942 17.8602 18.794 19.9547 16.0694 20.5584L15.6156 20.659C13.5634 21.1137 11.4366 21.1137 9.38443 20.659L8.93055 20.5584C6.20601 19.9547 4.05805 17.8602 3.38539 15.1513C2.87154 13.0819 2.87154 10.9181 3.38539 8.84875Z" fill="#F4F4F4"/>
|
<path d="M2.88539 8.84875C3.55805 6.13984 5.70602 4.04534 8.43056 3.44162L8.88443 3.34105C10.9366 2.88632 13.0634 2.88632 15.1156 3.34105L15.5694 3.44162C18.294 4.04534 20.442 6.13984 21.1146 8.84876C21.6285 10.9182 21.6285 13.0819 21.1146 15.1512C20.442 17.8602 18.294 19.9547 15.5694 20.5584L15.1156 20.659C13.0634 21.1137 10.9366 21.1137 8.88443 20.659L8.43055 20.5584C5.70601 19.9547 3.55805 17.8602 2.88539 15.1513C2.37154 13.0819 2.37154 10.9181 2.88539 8.84875Z" fill="#0146B2"/>
|
||||||
<path d="M4.80225 6.5004L10.5825 10.63C11.7295 11.4496 13.2705 11.4496 14.4175 10.63L20.1977 6.5004M3.38539 15.1513C2.87154 13.0819 2.87154 10.9181 3.38539 8.84875C4.05805 6.13984 6.20602 4.04534 8.93056 3.44162L9.38443 3.34105C11.4366 2.88632 13.5634 2.88632 15.6156 3.34105L16.0694 3.44162C18.794 4.04534 20.942 6.13984 21.6146 8.84876C22.1285 10.9182 22.1285 13.0819 21.6146 15.1512C20.942 17.8602 18.794 19.9547 16.0694 20.5584L15.6156 20.659C13.5634 21.1137 11.4366 21.1137 9.38443 20.659L8.93055 20.5584C6.20601 19.9547 4.05805 17.8602 3.38539 15.1513Z" stroke="#0164FF" stroke-width="1.5" stroke-linecap="round"/>
|
<path d="M4.30225 6.5004L10.0825 10.63C11.2295 11.4496 12.7705 11.4496 13.9175 10.63L19.6977 6.5004M2.88539 15.1513C2.37154 13.0819 2.37154 10.9181 2.88539 8.84875C3.55805 6.13984 5.70602 4.04534 8.43056 3.44162L8.88443 3.34105C10.9366 2.88632 13.0634 2.88632 15.1156 3.34105L15.5694 3.44162C18.294 4.04534 20.442 6.13984 21.1146 8.84876C21.6285 10.9182 21.6285 13.0819 21.1146 15.1512C20.442 17.8602 18.294 19.9547 15.5694 20.5584L15.1156 20.659C13.0634 21.1137 10.9366 21.1137 8.88443 20.659L8.43055 20.5584C5.70601 19.9547 3.55805 17.8602 2.88539 15.1513Z" stroke="#92BDFF" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
+4
-4
@@ -1,5 +1,5 @@
|
|||||||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M13.0411 13C11.6377 13 10.5 14.0313 10.5 15.3034C10.5 15.5919 10.544 15.879 10.6306 16.1565L10.714 16.4236C11.1071 17.6826 12.2484 18.6338 13.6653 18.8835C14.5469 19.0388 15.4531 19.0388 16.3347 18.8835C17.7516 18.6338 18.8929 17.6826 19.286 16.4236L19.3694 16.1565C19.456 15.879 19.5 15.5919 19.5 15.3034C19.5 14.0313 18.3623 13 16.9589 13H13.0411Z" fill="#F4F4F4"/>
|
<path d="M14.5411 15C13.1377 15 12 16.0313 12 17.3034C12 17.5919 12.044 17.879 12.1306 18.1565L12.214 18.4236C12.6071 19.6826 13.7484 20.6338 15.1653 20.8835C16.0469 21.0388 16.9531 21.0388 17.8347 20.8835C19.2516 20.6338 20.3929 19.6826 20.786 18.4236L20.8694 18.1565C20.956 17.879 21 17.5919 21 17.3034C21 16.0313 19.8623 15 18.4589 15H14.5411Z" fill="#0146B2"/>
|
||||||
<path d="M7.5 3.54106C7.50001 2.13768 6.46874 1 5.19661 1C4.90813 1 4.62103 1.04396 4.34345 1.13063L4.07641 1.21402C2.81744 1.60713 1.86618 2.74842 1.6165 4.16532C1.46117 5.04686 1.46117 5.95315 1.6165 6.83468C1.86618 8.25159 2.81744 9.39287 4.07641 9.78598L4.34345 9.86937C4.62103 9.95604 4.90813 10 5.19661 10C6.46874 10 7.50001 8.86233 7.5 7.45894L7.5 3.54106Z" fill="#F4F4F4"/>
|
<path d="M9 5.54106C9.00001 4.13768 7.96874 3 6.69661 3C6.40813 3 6.12103 3.04396 5.84345 3.13063L5.57641 3.21402C4.31744 3.60713 3.36618 4.74842 3.1165 6.16532C2.96117 7.04686 2.96117 7.95315 3.1165 8.83468C3.36618 10.2516 4.31744 11.3929 5.57641 11.786L5.84345 11.8694C6.12103 11.956 6.40813 12 6.69661 12C7.96874 12 9.00001 10.8623 9 9.45894L9 5.54106Z" fill="#0146B2"/>
|
||||||
<path d="M13.6653 18.8835C14.5469 19.0388 15.4531 19.0388 16.3347 18.8835C17.7516 18.6338 18.8929 17.6826 19.286 16.4236L19.3694 16.1565C19.456 15.879 19.5 15.5919 19.5 15.3034C19.5 14.0313 18.3623 13 16.9589 13H13.0411C11.6377 13 10.5 14.0313 10.5 15.3034C10.5 15.5919 10.544 15.879 10.6306 16.1565L10.714 16.4236C11.1071 17.6826 12.2484 18.6338 13.6653 18.8835ZM13.6653 18.8835C7.54195 17.7489 2.75108 12.958 1.6165 6.83468M1.6165 6.83468C1.46117 5.95315 1.46117 5.04686 1.6165 4.16532C1.86618 2.74842 2.81744 1.60713 4.07641 1.21402L4.34345 1.13063C4.62103 1.04396 4.90813 1 5.19661 1C6.46874 1 7.50001 2.13768 7.5 3.54106L7.5 7.45894C7.50001 8.86233 6.46874 10 5.19661 10C4.90813 10 4.62103 9.95604 4.34345 9.86937L4.07641 9.78598C2.81744 9.39287 1.86618 8.25159 1.6165 6.83468Z" stroke="#0164FF" stroke-width="1.5"/>
|
<path d="M15.1653 20.8835C16.0469 21.0388 16.9531 21.0388 17.8347 20.8835C19.2516 20.6338 20.3929 19.6826 20.786 18.4236L20.8694 18.1565C20.956 17.879 21 17.5919 21 17.3034C21 16.0313 19.8623 15 18.4589 15H14.5411C13.1377 15 12 16.0313 12 17.3034C12 17.5919 12.044 17.879 12.1306 18.1565L12.214 18.4236C12.6071 19.6826 13.7484 20.6338 15.1653 20.8835ZM15.1653 20.8835C9.04195 19.7489 4.25108 14.958 3.1165 8.83468M3.1165 8.83468C2.96117 7.95315 2.96117 7.04686 3.1165 6.16532C3.36618 4.74842 4.31744 3.60713 5.57641 3.21402L5.84345 3.13063C6.12103 3.04396 6.40813 3 6.69661 3C7.96874 3 9.00001 4.13768 9 5.54106L9 9.45894C9.00001 10.8623 7.96874 12 6.69661 12C6.40813 12 6.12103 11.956 5.84345 11.8694L5.57641 11.786C4.31744 11.3929 3.36618 10.2516 3.1165 8.83468Z" stroke="#92BDFF" stroke-width="1.5"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,7 @@
|
|||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19.7337 7.66667C18.667 3.26667 14.7337 0 10.0003 0H9.66699V7.66667H19.7337Z" fill="#428BC1"/>
|
||||||
|
<path d="M4.99993 1.33203C2.6666 2.6987 0.933268 4.96536 0.266602 7.66536H4.99993V1.33203Z" fill="#428BC1"/>
|
||||||
|
<path d="M0.266602 12.332C0.933268 15.032 2.6666 17.2987 4.99993 18.6654V12.332H0.266602Z" fill="#428BC1"/>
|
||||||
|
<path d="M9.66699 19.9987H10.0003C14.7337 19.9987 18.667 16.732 19.7337 12.332H9.66699V19.9987Z" fill="#428BC1"/>
|
||||||
|
<path d="M19.7333 7.66667H9.66667V0C7.96667 0.0666667 6.36667 0.533333 5 1.33333V7.66667H0.266667C0.1 8.4 0 9.2 0 10C0 10.8 0.1 11.6 0.266667 12.3333H5V18.6667C6.36667 19.4667 7.96667 19.9333 9.66667 20V12.3333H19.7333C19.9 11.6 20 10.8 20 10C20 9.2 19.9 8.4 19.7333 7.66667Z" fill="#FFE62E"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 832 B |
Reference in New Issue
Block a user