InstaCart Landing Page

InstaCart Landing Page - Inspired by InstaCart.com

Live Project Link ▶️ : https://instacart-landing.netlify.app/

Project Demo Video Link : https://drive.google.com/file/d/14cgp6NyBtPHAuqhfl01tpiifOcdBXpK9/view?usp=sharing

Description

Hey, it's Anirudh.

I recently created a new version of InstaCart's landing page. It's a simple 1 page website created with the React JS Frontend Framework. While there are interactive components, there isn't any page routing or links to additional pages. The page is an example of something you could potentially see on a rising startup's website. It contains distinctive components that make up a landing page such as a CTA, Testimonials, and Stats.

Note : This page is responsive and looks good on all screen sizes. Don't hesitate to change screen width or view on another device- it'll look just as good!

Below is more information about the tools and technologies used to construct this landing page :

Tools & Tech Specs

• HTML/CSS
• JavaScript (JSX)
• React JS
• Tailwind CSS
• Daisy UI (Component Styling)
• Font Awesome (Icons)

Getting Started

Dependencies

(package.json) dependencies: { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "daisyui": "^2.24.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.4.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "swiper": "^8.3.2", "web-vitals": "^2.1.4" },

• Functioning Computer (Windows / Mac OS)
• Node JS / NPM (I used v14.17.3 - Using a higher version or same is suggested)
• Text Editor / IDE (I used VS Code)

Installing (To View On Local Machine)

• Clone this repo using git clone https://github.com/DevTechJr/instacart-landing.git
• Open project folder in VS Code or any other Text Editor or IDE
• Follow Below Commands To Start Development Server

Executing program

• Perform the following commands in a terminal inside the project folder

npm install

(Installs All Dependencies)

npm start

(Starts Localhost Server in your browser)

Help

To view any issues :

npm test

If you have any issues with this project, dm me. Contact details are below :

Authors

ex. Anirudh Bharadwaj Vangara ex. @DevTechJr Discord : #2198

Version History

• 0.2
  • Various bug fixes and optimizations
  • See commit change or See release history
• 0.1
  • Initial Release

Acknowledgments

• Daisy UI & Tailwind CSS Components (tysm)
• Codepen.io (Infinite Slider Inspirations)
• Netlify (Seamless Deployment Experience 🙏)