https://github.com/manni2000/ppa
PPA Hiring Assignment
https://github.com/manni2000/ppa
Last synced: 5 months ago
JSON representation
PPA Hiring Assignment
- Host: GitHub
- URL: https://github.com/manni2000/ppa
- Owner: manni2000
- Created: 2024-07-07T19:32:34.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-07T19:33:38.000Z (over 1 year ago)
- Last Synced: 2025-03-27T18:11:21.696Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.67 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Project Overview:
The project is a responsive web application built using ReactJS. It showcases various sections like a hero section with a carousel, a client logos section, services, features, statistics with count-up animation, testimonials, blog articles, and a footer with social media links. The design includes light and dark mode toggling and is optimized for fast page load times.
# Technologies Used:
ReactJS: A JavaScript library for building user interfaces.
React Lazyload: For lazy loading components and images to improve performance.
React Slick: For implementing the carousel/slider in the hero section.
React CountUp: For creating the count-up animation in the statistics section.
CSS3: For styling the components and ensuring responsiveness across different screen sizes.
HTML5: The standard markup language for creating web pages.
Font Awesome: For incorporating social media icons in the footer.
JavaScript (ES6): For implementing component logic and interactions.
# Project Structure:
The project is divided into several components, each representing a section of the webpage:
Header: Contains the navigation menu and authentication buttons (Login/Sign up).
HeroSection: Features a carousel with titles, descriptions, and images.
ClientsSection: Displays client logos.
ServicesSection: Highlights different services offered.
FeatureSection: Showcases a particular feature or insight.
StatisticsSection: Displays key statistics with a count-up animation.
TestimonialSection: Contains testimonials from clients with their logos.
BlogSection: Features recent blog posts or articles.
CTASection: A call-to-action section encouraging users to get a demo.
Footer: Contains company information, support links, and social media icons.
# Key Features:
Responsive Design: The layout is responsive and adjusts to various screen sizes, from mobile devices to large desktop monitors.
Light/Dark Mode Toggle: Users can switch between light and dark themes for better readability and user preference.
Carousel: The hero section uses a carousel to cycle through different slides, each with a title, description, and image.
Count-Up Animation: The statistics section uses a smooth count-up animation to visually represent numbers growing from zero to their final value.
Lazy Loading: Images and components are loaded lazily to improve initial load times and overall performance.
# Steps to Run the Project:
Clone the Repository:
git clone https://github.com/manni2000/PPA
cd PPA
Install Dependencies:
npm install
npm install react-lazyload react-slick slick-carousel react-countup
Start the Development Server:
npm start
# Enhancements
Optimizations: Code splitting, lazy loading, and other performance improvements have been incorporated to optimize page load time.
Design Improvements: The design has been enhanced to ensure a clean, modern look that adapts well to different devices.
This project demonstrates how to build a modern, responsive web application with React, incorporating best practices for performance and user experience.