This is a fully responsive Virtual Reality landing page built with React and Tailwind CSS. The landing page showcases various sections such as features, pricing, testimonials, and workflow to introduce and highlight the benefits of a virtual reality platform.
virtualVr
├── dist/ # Compiled output
├── node_modules/ # Installed dependencies
├── public/ # Static assets
├── src/ # Source code
│ ├── assets/ # Folder for images and other static assets
│ ├── components/ # Folder containing reusable React components
│ │ ├── FeatureSection.jsx # Component for displaying VR features
│ │ ├── Footer.jsx # Component for the footer section
│ │ ├── HeroSection.jsx # Component for the hero (banner) section
│ │ ├── Navbar.jsx # Component for the navigation bar
│ │ ├── Pricing.jsx # Component to showcase pricing plans
│ │ ├── Testimonials.jsx # Component for user testimonials
│ │ └── Workflow.jsx # Component displaying the workflow or how it works
│ ├── constants/ # Folder for constants and configuration files
│ │ └── index.jsx # Centralized constants file
│ ├── App.jsx # Main app component
│ ├── index.css # Global CSS file
│ ├── main.jsx # Entry point of the React application
├── .gitignore # Git ignore file
├── eslint.config.js # ESLint configuration
├── index.html # Main HTML template
├── package.json # Package configuration
├── postcss.config.js # PostCSS configuration
├── README.md # Project README
├── tailwind.config.js # Tailwind CSS configuration
└── vite.config.js # Vite configuration
- Fully Responsive Design: Optimized for both desktop and mobile devices.
- Reusable Components: Modular components for easy maintenance and scalability.
- Tailwind CSS Styling: Leveraging utility-first CSS for rapid styling.
- Smooth Animations and Transitions: Provides an immersive experience with subtle animations.
- Modern UI/UX: Designed with an eye for detail and intuitive navigation.
- Frontend: React, Tailwind CSS
- Bundler: Vite
- Clone the repository:
git clone https://github.com/Ni1esh-Yadav/virtual-lr.git
- Navigate to the project folder:
cd virtual-lr - Install Dependencies
npm install
- Run the project:
npm run dev
Open your browser and go to http://localhost:5173 to view the landing page.
Navbar: Contains links to different sections of the page. HeroSection: A visually engaging hero section with an introduction to the platform. FeatureSection: Highlights the features of the virtual reality experience. Workflow: Step-by-step guide on how to use or benefit from the platform. Pricing: Displays different pricing plans for users. Testimonials: User testimonials that add social proof. Footer: Contains contact information, links to social media, and other resources.
Tailwind CSS The Tailwind configuration is set in tailwind.config.js. You can customize colors, spacing, and other utility classes here.
Linting configuration can be found in eslint.config.js. Make sure to follow the coding standards outlined in this configuration for consistent and error-free code.