feat(ui): Enhance homepage responsiveness and layout
This commit introduces several UI improvements to enhance the responsive design and visual appeal of the homepage and main layout. Key changes include: - Adjusted the main header to be centered on mobile devices for better alignment. - Refined the hero section on the homepage with responsive text sizes and improved spacing. - Modified the "dynamic island" image container to adapt its size and position across different screen sizes. - Improved typography and layout in the "democratizing tenders" section for better readability. - Reorganized the contact page into a Next.js route group for better project structure.
This commit is contained in:
AmirReza Jamali
@@ -31,25 +31,25 @@ const ContactUsForm = () => {
|
||||
onSubmit={handleSubmit(onSubmit)}>
|
||||
<InputGroup
|
||||
id="full_name"
|
||||
label="Full name"
|
||||
label="Full Name"
|
||||
register={register}
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
id="company_name"
|
||||
label="Company name"
|
||||
label="Company Name"
|
||||
register={register}
|
||||
type="text"
|
||||
/>
|
||||
<InputGroup
|
||||
id="work_email"
|
||||
label="Work email"
|
||||
label="Work Email"
|
||||
register={register}
|
||||
type="email"
|
||||
/>
|
||||
<InputGroup
|
||||
id="phone_number"
|
||||
label="Phone number"
|
||||
label="Phone Number"
|
||||
register={register}
|
||||
type="text"
|
||||
error={errors.phone_number?.message}
|
||||
@@ -2,7 +2,7 @@ import ContactUsForm from "./form";
|
||||
|
||||
const ContactUs = () => {
|
||||
return (
|
||||
<div className="flex flex-col items-center mt-20 px-4 ">
|
||||
<div className="flex flex-col items-center mt-16 px-8 ">
|
||||
<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">
|
||||
@@ -1,9 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { ApexOptions } from "apexcharts";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ApexOptions } from "apexcharts";
|
||||
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
|
||||
const ReactApexChart = dynamic(() => import("react-apexcharts"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
interface ChartState {
|
||||
series: {
|
||||
|
||||
+9
-9
@@ -3,7 +3,7 @@ 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 ContactUs from "./(contact-us)/page";
|
||||
import "./globals.css";
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
@@ -96,7 +96,7 @@ export default async function RootLayout({
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen bg-[url('/header-bg.svg')] bg-top-right bg-no-repeat bg-contain`}>
|
||||
<header className="flex justify-between items-center pb-4 container px-4 py-4 m-auto">
|
||||
<header className="flex justify-center pt-8 md:justify-between items-center pb-4 container px-4 py-4 m-auto">
|
||||
<Link
|
||||
href="/"
|
||||
aria-label="Opp lens home">
|
||||
@@ -128,7 +128,7 @@ export default async function RootLayout({
|
||||
<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 h-[600px] z-[-10] bg-[url('/bottom-bg.svg')] bg-contain bg-no-repeat bg-right"
|
||||
className="absolute w-full -top-[355px] md:-top-72 h-[600px] z-[-10] bg-[url('/bottom-bg.svg')] bg-contain bg-no-repeat bg-right"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
@@ -147,12 +147,12 @@ export default async function RootLayout({
|
||||
priority
|
||||
/>
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
<div>
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
interface IProps {}
|
||||
|
||||
const NotFound = ({}: IProps) => {
|
||||
return <div>Not found</div>;
|
||||
};
|
||||
|
||||
export default NotFound;
|
||||
+20
-13
@@ -48,14 +48,18 @@ export default function Home() {
|
||||
<>
|
||||
<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/10 p-10 rounded-[40px] h-fit mb-16">
|
||||
<h2>
|
||||
<span>$</span>
|
||||
<span>12,345,678</span>
|
||||
</h2>
|
||||
<h2 className="capitalize">total tender amount you missed today</h2>
|
||||
<div className="flex flex-col gap-8">
|
||||
<h2>
|
||||
<span>$</span>
|
||||
<span>12,345,678</span>
|
||||
</h2>
|
||||
<h2 className="capitalize text-2xl font-bold md:text-3xl">
|
||||
total tender amount you missed today
|
||||
</h2>
|
||||
</div>
|
||||
<ApexChart />
|
||||
</div>
|
||||
<div className="mr-8 -z-20 relative flex justify-center h-[750px]">
|
||||
<div className="m-auto w-xs md:m-0 md:w-auto -z-20 relative flex justify-center h-[650px] md:h-[750px]">
|
||||
<Image
|
||||
src={"/dynamic-island.svg"}
|
||||
alt="dynamic island"
|
||||
@@ -75,17 +79,18 @@ export default function Home() {
|
||||
</section>
|
||||
<section className="text-left flex flex-col gap-6 bg-gradient-to-b from-[#011132] to-[#012B80] text-white rounded-[56px] relative p-6 md:p-14 -mt-16 z-20 md:ml-28">
|
||||
<hgroup>
|
||||
<h1 className="capitalize font-extrabold text-5xl ">
|
||||
<h1 className="capitalize font-extrabold text-5xl mb-6">
|
||||
democratizing the world of tenders
|
||||
</h1>
|
||||
<p className="text-xs">
|
||||
<p className="text-[16px] text-[#dadada]">
|
||||
Opplens is your dedicated AI-powered partner, leveling the playing
|
||||
field so you can win the public and private contracts you deserve.
|
||||
<br />
|
||||
Compete on your true strengths.
|
||||
</p>
|
||||
</hgroup>
|
||||
<div className="flex justify-end">
|
||||
<button className="bg-(--primary) rounded-4xl py-4 px-6">
|
||||
<button className="w-full md:w-fit capitalize bg-(--primary) rounded-4xl py-4 px-6">
|
||||
Get early access
|
||||
</button>
|
||||
</div>
|
||||
@@ -176,12 +181,14 @@ export default function Home() {
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section className="flex flex-col mt-36 gap-10 md:w-3/4 m-auto">
|
||||
<section className="flex flex-col mt-36 gap-10 px-2 md:w-3/4 m-auto">
|
||||
<div>
|
||||
<h2 className="font-bold text-4xl">The Opplens Advantage</h2>
|
||||
<h2 className="font-bold text-2xl md:text-4xl">
|
||||
The Opplens Advantage
|
||||
</h2>
|
||||
</div>
|
||||
<section className="flex flex-col gap-10 md:flex-row">
|
||||
<div className="flex flex-col gap-7 md:flex-row bg-[#FFF7EB] p-10 rounded-3xl md:pb-20">
|
||||
<div className="flex flex-col gap-7 bg-[#FFF7EB] p-10 rounded-3xl md:pb-20">
|
||||
<Image
|
||||
src={"people.svg"}
|
||||
width={48}
|
||||
@@ -197,7 +204,7 @@ export default function Home() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-7 md:flex-row bg-[#E5EFFF] p-10 rounded-3xl md:pb-20">
|
||||
<div className="flex flex-col gap-7 bg-[#E5EFFF] p-10 rounded-3xl md:pb-20">
|
||||
<Image
|
||||
src={"shield-tick.svg"}
|
||||
width={48}
|
||||
|
||||
Reference in New Issue
Block a user