Shopster

Task 2 for Orision Technology Internship

ECommerce Landing Page 🛒

Project Overview

This project is a basic eCommerce landing page built using HTML, CSS, and JavaScript. The goal of the page is to showcase a product, provide key information, and encourage users to take action (e.g., "Buy Now" or sign up for a newsletter). The design is simple, clean, and responsive for an optimal user experience on both desktop and mobile devices.

Features

🖌 Design

• Clean and modern layout to enhance readability and user engagement.
• Visually appealing styling using colors, fonts, and spacing.

📄 Content

• Product Name: Displayed prominently at the top of the page.
• Product Description: A brief and engaging description of the product.
• Pricing: Price information clearly displayed for users.

🖼 Images

• Main Product Image: For immediate visual appeal.
• Additional Images: 2-3 images showcasing different views of the product.

🎨 Styling

• Styled with basic CSS for a professional and clean look.
• Use of padding and margins for a structured layout.
• Hover effects on buttons for better interactivity.

🌐 Links

• Links to "Learn More" and "Contact Us" sections.
• Social media icons for Facebook and Instagram.

🛒 Call-to-Action (CTA)

• A "Buy Now" button that displays a confirmation alert when clicked.
• A Newsletter signup form (frontend only) for capturing user interest.

📱 Responsive Design

• Optimized for both desktop and mobile screens with responsive layout adjustments.

🗂 extra Features

• Customer reviews section for showcasing testimonials.
• Newsletter signup form (frontend only) for capturing user interest.

🔒 User Authentication (New)

• Login & Sign-Up Forms: Allows users to create a new account or log in with an existing one.
• Local Storage Integration: User data is saved locally to ensure login persistence across sessions.
• Back to Home Button: Allows users to navigate easily between login/sign-up forms and the homepage.
• Dynamic User Profiles: After logging in, users can view their profile and manage their details.

Prerequisites

• A modern web browser (e.g., Chrome, Firefox, Edge, Safari).

Running the Project

1. Clone or download the project files.
2. Open the index.html file in your web browser.
3. Enjoy the eCommerce landing page experience!

Usage

• Buy Now Button: Click to simulate adding the product to a cart (displays an alert).
• Newsletter Signup Form: Enter an email address to test the frontend functionality (no backend processing included).
• Responsive Design: Resize your browser window to see how the layout adjusts for different screen sizes.
• User Login & Sign Up: Create an account, log in, and navigate to the home page.

Customization

Update Content:

• Modify the product name, description, and pricing in the index.html file.
• Replace the placeholder images in the images/ folder.

Styling:

• Customize the colors, fonts, and layout in the styles.css file.

Interactivity:

• Extend JavaScript functionality in javascript.js (e.g., adding animations or cart logic).
• Modify login/signup logic and extend user profile handling using local storage.

License

This project is open-source and available under the MIT License.

Contact

For any questions or feedback, feel free to reach out to the repository owner via GitHub Issues or through [guptachandni463@gmail.com].

---

Thank you for checking out ECommerce Landing Page!