Taskify is a modern, responsive landing page designed for a business offering project management and team collaboration solutions. It's built with React and styled with a clean, contemporary design, focusing on user experience and clear calls to action.
- Responsive Design: Adapts seamlessly to various screen sizes, from mobile devices to large desktops.
- Sticky Navbar: A navigation bar that stays at the top of the screen as you scroll, providing easy access to different sections.
- Smooth Scrolling: Clicking on navigation links smoothly scrolls to the corresponding section on the page.
- Clear Call to Actions: Prominently placed buttons and links to guide users towards key actions.
- Informative Sections: Includes sections for Hero, Features, How It Works, Testimonials, Pricing, and Contact.
- Contact Form: A simple contact form for user inquiries.
- React: A JavaScript library for building user interfaces.
- CSS: For styling and layout, including responsive design.
- Google Fonts: Poppins and Inter for modern typography.
Follow these steps to get the Taskify landing page up and running on your local machine.
Before you begin, ensure you have the following installed:
- Node.js: (LTS version recommended) - Includes npm (Node Package Manager). You can download it from nodejs.org.
-
Clone the repository:
git clone <repository_url> cd modern-business-landing-page
(Note: Replace
<repository_url>with the actual URL of your repository if applicable.) -
Install dependencies: Navigate to the project directory and install the necessary Node.js packages:
npm install
To start the development server and view the application in your browser:
npm startThis command runs the app in development mode. Open http://localhost:3000 to view it in your browser. The page will reload if you make edits. You will also see any lint errors in the console.
To build the app for production to the build folder:
npm run buildThis correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed!
modern-business-landing-page/
├── public/ # Static assets (HTML, favicon, images)
├── src/ # React source code
│ ├── App.css # Main application styles
│ ├── App.js # Main React component and section components
│ ├── index.css # Global styles and font imports
│ └── ... # Other React-related files (tests, etc.)
├── .gitignore # Specifies intentionally untracked files to ignore
├── package.json # Project metadata and dependencies
├── package-lock.json # Records the exact versions of dependencies
└── README.md # This file