صفحه لتسجيل البيانات

a page if you want contact us and write the information about yourself i used

1. Layout (HTML5)

The left side contains a contact form with

Input fields (<input> for Full Name, Email Address, Phone Number)

A textarea (<textarea>) for the message

A button (<button> or <input type="submit">) with the label Send Now

The right side contains informational text with headings, subheadings, and descriptions:

Section title: CONTACT WITH US

Main heading: REACH OUT TO US VIA CONTACT DETAILS

Two feature blocks, each with:

A number badge (01, 02)

A title (Client Centric Approach, Integrity & Transparency)

Supporting text

This structure would be created using semantic HTML tags like <section>, <form>, <h1>, <p>, <div>.

2. Styling (CSS3 / Tailwind / SCSS)

Background: A full-screen background image of a cityscape, likely set with background-image or as an <img> inside a container with absolute positioning.

Form styling: White card with:

Rounded corners (border-radius)

Padding for spacing (padding)

Drop shadow (box-shadow)

Inputs: Styled with borders, padding, and placeholder text (::placeholder styling).

Button: Red background (background-color: #e63946), rounded, with hover effects.

Typography: Different font sizes and weights (font-size, font-weight: bold) for hierarchy.

3. Layout System (CSS Grid / Flexbox)

The page seems to use a two-column layout:

Left column: Contact form (white card)

Right column: Contact details and features

This can be built using CSS Grid or Flexbox (display: flex; justify-content: space-between;).

4. Interactivity (JavaScript / React)

Form validation (e.g., checking if email is valid, phone number format).

Form submission (sending data via AJAX/fetch to a backend API).

Could be enhanced with React hooks for state handling (e.g., useState for form inputs).

5. Possible Libraries/Frameworks

React.js / Next.js (for modern frontend development).

Tailwind CSS or Bootstrap for styling utility classes.

Framer Motion for animations (e.g., fade-in effect for the form).

Shadcn/UI or Material UI for form components.