amirreza.jamali/tm-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): Enhance homepage responsiveness and layout

Browse Source 
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
2025-10-22 13:47:43 +03:30
parent 1185aea022
commit 349f1137f7
7 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/contact-us/form.tsx → app/(contact-us)/form.tsx
+4 -4
View File
@@ -31,25 +31,25 @@ const ContactUsForm = () => {
onSubmit={handleSubmit(onSubmit)}> onSubmit={handleSubmit(onSubmit)}>
<InputGroup <InputGroup
id="full_name" id="full_name"
label="Full name" label="Full Name"
register={register} register={register}
type="text" type="text"
/> />
<InputGroup <InputGroup
id="company_name" id="company_name"
label="Company name" label="Company Name"
register={register} register={register}
type="text" type="text"
/> />
<InputGroup <InputGroup
id="work_email" id="work_email"
label="Work email" label="Work Email"
register={register} register={register}
type="email" type="email"
/> />
<InputGroup <InputGroup
id="phone_number" id="phone_number"
label="Phone number" label="Phone Number"
register={register} register={register}
type="text" type="text"
error={errors.phone_number?.message} error={errors.phone_number?.message}
app/contact-us/page.tsx → app/(contact-us)/page.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ 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-16 px-8 ">
<div className="md:w-2/3 m-auto flex flex-col gap-4 mb-12"> <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> <h2 className="font-bold text-4xl">Unlock Your Growth Potential</h2>
<p className="font-normal text-[16px] text-gray-600"> <p className="font-normal text-[16px] text-gray-600">
app/_components/ApexChart.tsx
+4 -2
View File
@@ -1,9 +1,11 @@
"use client"; "use client";
import { ApexOptions } from "apexcharts";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { ApexOptions } from "apexcharts"; const ReactApexChart = dynamic(() => import("react-apexcharts"), {
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false }); ssr: false,
});
interface ChartState { interface ChartState {
series: { series: {
app/layout.tsx
+3 -3
View File
@@ -3,7 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { ToastContainer, Zoom } from "react-toastify"; import { ToastContainer, Zoom } from "react-toastify";
import ContactUs from "./contact-us/page"; import ContactUs from "./(contact-us)/page";
import "./globals.css"; import "./globals.css";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
@@ -96,7 +96,7 @@ export default async function RootLayout({
<html lang="en"> <html lang="en">
<body <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`}> 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 <Link
href="/" href="/"
aria-label="Opp lens home"> 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> <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"> <footer className="relative h-full bg-[url('/footer-bg.svg')] bg-cover bg-no-repeat mt-96">
<div <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" aria-hidden="true"
/> />
app/not-found.tsx
+7
View File
@@ -0,0 +1,7 @@
interface IProps {}
const NotFound = ({}: IProps) => {
return <div>Not found</div>;
};
export default NotFound;
app/page.tsx
+16 -9
View File
@@ -48,14 +48,18 @@ export default function Home() {
<> <>
<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/10 p-10 rounded-[40px] h-fit 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">
<div className="flex flex-col gap-8">
<h2> <h2>
<span>$</span> <span>$</span>
<span>12,345,678</span> <span>12,345,678</span>
</h2> </h2>
<h2 className="capitalize">total tender amount you missed today</h2> <h2 className="capitalize text-2xl font-bold md:text-3xl">
total tender amount you missed today
</h2>
</div>
<ApexChart /> <ApexChart />
</div> </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 <Image
src={"/dynamic-island.svg"} src={"/dynamic-island.svg"}
alt="dynamic island" alt="dynamic island"
@@ -75,17 +79,18 @@ export default function Home() {
</section> </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"> <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> <hgroup>
<h1 className="capitalize font-extrabold text-5xl "> <h1 className="capitalize font-extrabold text-5xl mb-6">
democratizing the world of tenders democratizing the world of tenders
</h1> </h1>
<p className="text-xs"> <p className="text-[16px] text-[#dadada]">
Opplens is your dedicated AI-powered partner, leveling the playing Opplens is your dedicated AI-powered partner, leveling the playing
field so you can win the public and private contracts you deserve. field so you can win the public and private contracts you deserve.
<br />
Compete on your true strengths. Compete on your true strengths.
</p> </p>
</hgroup> </hgroup>
<div className="flex justify-end"> <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 Get early access
</button> </button>
</div> </div>
@@ -176,12 +181,14 @@ export default function Home() {
</li> </li>
</ul> </ul>
</section> </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> <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> </div>
<section className="flex flex-col gap-10 md:flex-row"> <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 <Image
src={"people.svg"} src={"people.svg"}
width={48} width={48}
@@ -197,7 +204,7 @@ export default function Home() {
</p> </p>
</div> </div>
</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 <Image
src={"shield-tick.svg"} src={"shield-tick.svg"}
width={48} width={48}
dump.rdb
BIN
View File
Binary file not shown.