Skip to content

Prayag-09/XORA--Landing-Page

Repository files navigation

XORA Landing Page Project

image image

This project is a landing page built using React and TypeScript with the Tailwind CSS framework for styling. The page features reusable components, smooth scrolling navigation, and a custom button with an SVG marker.

Features

  • TypeScript-based project for static typing and enhanced developer experience.
  • Responsive design using Tailwind CSS.
  • Reusable Button and Marker components.
  • Smooth scrolling between sections using react-scroll.
  • Custom icons and SVG components.
  • Dynamic classnames with clsx for better management of conditional styling.

Installation

1. Clone the repository:

git clone https://github.com/Prayag-09/XORA--Landing-Page.git
cd xora-landing-page

2. Install dependencies:

This project uses npm to manage dependencies. Run the following command:

npm install

3. Run the project:

To start the project locally, run:

npm run dev

This will start a development server and you can view the project at http://localhost:5173.

Dependencies

  • React - A JavaScript library for building user interfaces.
  • TypeScript - Static type definitions for enhanced developer experience.
  • Tailwind CSS - A utility-first CSS framework for building custom designs.
  • clsx - A utility for conditionally joining classNames.
  • react-scroll - For smooth scrolling to anchor points in the page.

Custom CSS and Styling

The project uses Tailwind CSS for layout and design, with custom classes defined in the index.css file. For more advanced styles and custom classes, you can extend Tailwind's configuration in tailwind.config.js.

Available Scripts

  • npm run dev - Runs the app in the development mode.
  • npm run build - Builds the app for production to the build folder.
  • npm run lint - Lints the project for code quality checks.