AmirReza Jamali
e2a0df5fc4
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.
168 lines
4.3 KiB
TypeScript
168 lines
4.3 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { Geist, Geist_Mono } from "next/font/google";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ToastContainer, Zoom } from "react-toastify";
|
|
import ContactUs from "./contact-us/page";
|
|
import "./globals.css";
|
|
const geistSans = Geist({
|
|
variable: "--font-geist-sans",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
const geistMono = Geist_Mono({
|
|
variable: "--font-geist-mono",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Create Next App",
|
|
description: "Generated by create next app",
|
|
};
|
|
|
|
function ContactInfo({
|
|
icon,
|
|
contact,
|
|
href,
|
|
ariaLabel,
|
|
contactIconSrc,
|
|
}: {
|
|
icon: string;
|
|
contact: string;
|
|
href?: string;
|
|
ariaLabel: string;
|
|
contactIconSrc?: string;
|
|
}) {
|
|
return (
|
|
<div className="flex gap-3 my-3 text-white">
|
|
<Image
|
|
src={icon}
|
|
width={24}
|
|
height={24}
|
|
alt=""
|
|
aria-hidden="true"
|
|
/>
|
|
{href ? (
|
|
<a
|
|
href={href}
|
|
className="cursor-pointer min-w-fit"
|
|
aria-label={ariaLabel}>
|
|
{contact}
|
|
</a>
|
|
) : (
|
|
<p className="flex gap-3">
|
|
{!!contactIconSrc && (
|
|
<Image
|
|
src={contactIconSrc}
|
|
width={20}
|
|
height={20}
|
|
alt="flag"
|
|
/>
|
|
)}
|
|
{contact}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default async function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
const contactInfo = [
|
|
{
|
|
icon: "/Message.svg",
|
|
contact: "info@opplens.com",
|
|
href: "mailto:info@opplens.com",
|
|
ariaLabel: "Email us at info@opplens.com",
|
|
},
|
|
{
|
|
icon: "/Phone.svg",
|
|
contact: "(+46) - 761581526",
|
|
href: "tel:+46761581526",
|
|
ariaLabel: "Call us at +46 761581526",
|
|
},
|
|
{
|
|
icon: "/Location.svg",
|
|
contact: "Stockholm, Sweden",
|
|
ariaLabel: "Our location in Stockholm, Sweden",
|
|
contactIconSrc: "/sweden.svg",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<html lang="en">
|
|
<body
|
|
className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen bg-[url('/main-bg.svg')] bg-cover bg-no-repeat`}>
|
|
<header className="flex justify-between items-center pb-4 container px-4 py-4 m-auto">
|
|
<Link
|
|
href="/"
|
|
aria-label="Opp lens home">
|
|
<Image
|
|
src="/main-logo.svg"
|
|
alt="Opp lens logo"
|
|
width={180}
|
|
height={30}
|
|
priority
|
|
/>
|
|
</Link>
|
|
</header>
|
|
|
|
<ToastContainer
|
|
position="top-right"
|
|
autoClose={2500}
|
|
theme={"colored"}
|
|
transition={Zoom}
|
|
hideProgressBar
|
|
newestOnTop
|
|
closeOnClick
|
|
pauseOnFocusLoss
|
|
draggable
|
|
pauseOnHover
|
|
/>
|
|
|
|
<main className="container px-4 py-4 m-auto flex-grow">{children}</main>
|
|
|
|
<footer className="relative h-full bg-[url('/footer-bg.svg')] bg-cover bg-no-repeat mt-96">
|
|
<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-96 ">
|
|
<div className="flex justify-between flex-col md:flex-row gap-14 w-full md:w-1/2">
|
|
<div>
|
|
<Image
|
|
src={"/footer-logo.svg"}
|
|
alt="Opp lens logo"
|
|
width={180}
|
|
height={30}
|
|
priority
|
|
/>
|
|
<p className="text-white my-2">
|
|
Democratizing Tender Access for SMEs.
|
|
</p>
|
|
<p className="text-white my-2">
|
|
© 2025 Opplens.com by PBL Partners AB. All Rights Reserved.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
{contactInfo.map((contact, index) => (
|
|
<ContactInfo
|
|
key={index}
|
|
icon={contact.icon}
|
|
contact={contact.contact}
|
|
href={contact.href}
|
|
ariaLabel={contact.ariaLabel}
|
|
contactIconSrc={contact.contactIconSrc}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|