Disney+ Streaming Landing Page Clone

The project is a dynamic web application that provides an interactive user experience. It features a responsive design with a variety of text styles, a button component with multiple variants, and a flexible image-text section. The design is built with SCSS, using variables for consistent theming and mixins for reusable styles. The project uses Gulp to automate various tasks, including compiling SCSS to CSS, minifying JavaScript, and optimizing images.

Technologies Used

• HTML
• CSS
• SCSS
• JavaScript
• Gulp

How to Use

Here's a quick demo of how to use our application:

To use this application, simply navigate to the website and explore the different sections. You can switch between different tabs of content, click on the FAQ questions to reveal the answers, and interact with the buttons.

Deployment

The application is deployed on Vercel and can be accessed at https://streaming-landing-page-clone.vercel.app/.

Running the Page Locally

To run the page locally, follow these steps:

1. Clone the repository to your local machine:

   Cloning a repository means creating a local copy of the code provided on the remote server. To do this, you'll need Git installed on your computer. If you haven't installed Git, you can download it from https://git-scm.com/.

   Once you have Git installed, open a terminal and navigate to the directory where you want to clone the repository. Then, run the following command:

   git clone https://github.com/maxh33/streaming-landing-page-clone

2. Navigate to the project directory.

3. Install the necessary dependencies:

   This project relies on several development dependencies for tasks like compiling SCSS to CSS, minifying JavaScript, and optimizing images. These dependencies are listed in the package.json file in the project's root directory.

   The dependencies include:

   • gulp: A toolkit to automate & enhance your workflow
   • gulp-sass: A Gulp plugin for Sass compilation
   • gulp-imagemin: A Gulp plugin for image optimization
   • gulp-uglify: A Gulp plugin to minify JavaScript files

   To install these dependencies, you'll need to use Node Package Manager (npm), which is included with Node.js. If you haven't installed Node.js, you can download it from https://nodejs.org/.

   Once you have Node.js and npm installed, open a terminal in your project's root directory and run the following command:

   npm install --save-dev dependency-name

4. Build the project:

   This project uses Gulp to run tasks such as compiling SCSS to CSS, minifying JavaScript, and optimizing images. The necessary Gulp tasks have been defined in a gulpfile.js file in the project's root directory.

   To build the project, run the following command:

   npm run build

   To start the development server and watch for changes, run the following command:

   npm run dev

5. Open the index.html file in your browser.

   Alternatively, if you're using Visual Studio Code as your IDE, you can use the Live Server extension to serve your project.

   To do this, first install the Live Server extension from the Extensions view (Ctrl+Shift+X). Then, right-click on your HTML file in the Explorer view and select "Open with Live Server" from the context menu. This will start a local development server and open your default web browser to display your project.

Future Improvements

Some future improvements include:

• Adding more tabs of content
• Expanding the FAQ section
• Enhancing the responsiveness of the design
• Adding more components and styles

Easily Customizable for:

This project is designed to be easily customizable for a variety of businesses. Here are a few examples:

1. Streaming Services: The project can be customized to serve as a landing page for streaming services, showcasing different shows, movies, and subscription plans.

2. Software as a Service (SaaS) Companies: The project can be adapted to showcase software products, explain their features, and guide users to sign up or request a demo.

3. Event Promotions: The project can be customized to promote events, providing information about the event, the schedule, and a way to register or buy tickets.

4. Product Launches: Businesses launching a new product can customize the project to create a landing page that showcases the product, explains its features, and guides visitors to purchase or learn more.

5. Educational Institutions: Schools or e-learning platforms can customize the project to provide information about their courses, faculty, and admission process.