React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.

Tech Stack

Frontend: React.js (Vite setup) Styling: CSS Modules (common.module.css) Routing: Scroll-based section navigation via anchor links Deployment: (To be deployed on Netlify or Vercel)

Setup Instructions

1. Clone the Repository

git clone https://github.com/your-username/cimo-landing-page.git cd cimo-website

2. Install Dependencies

npm install

3. Run Development Server

npm run dev

Now visit: http://localhost:5173

Live Demo (Optional)

You can deploy it using: Vercel or Netlify

Live Deployed Link

https://websort-static-responsive-react-web.vercel.app/

Features Implemented

Responsive Layout Fixed Header with Smooth Anchor Navigation Feature Cards with Glassmorphic Styling Hero Section with Overlay Text Animated Hover Effects on Cards Functional Contact Form Layout Themed Sections with Light/Dark Aesthetic Footer with Link Integration

Folder Structure

Sections Overview

Section	Description
Hero	A visually engaging intro with call-to-action.
Features	Cards for UI/UX, Web Dev, and AI-IoT services.
About	Company’s vision and service insights.
Contact	Form with name, email, and message fields.
Footer	Simple footer with basic links.

Styling Highlights

Modern Blur Effects on features & contact form Responsive Layout using Flexbox & media queries Fixed Header with smooth anchor navigation Dark Themed Design with bright accent highlights

How to Run

npm install npm run dev Then open http://localhost:5173 in your browser.

Projects Requirements Covered

Fully Responsive Web Page React Components Structure Glassmorphic Card Effects Scroll Navigation Contact Form with input fields Design closely replicates the Figma UI shared

📸 Screenshots

Project Demo video: https://drive.google.com/file/d/1GGkM9mqPdH8R21XOP9QN3VINU5D5rj2C/view?usp=sharing

websort-assignment-demo-video.zip

Author

Puneetharaj K R @Puneetharajkr puneetharajkr123@gmail.com