Tesla clone with react js

 Here's a step-by-step guide to incorporating the Homes component code into a website to create blog content:

1. Setup Your Project

Initialize a React Project

If you don't have a React project set up yet, start by creating one using Create React App:

npx create-react-app my-blog

cd my-blog

2. Install Dependencies

Install styled-components

If you haven't already, install styled-components:

npm install styled-components


3. Create Components

To integrate the Header component along with the Homes components, follow these steps:

1. Create the Header Component

  1. Create a new file Header.js inside the src/components directory.

  2. Add the following code to Header.js:


import React from 'react';
import styled from 'styled-components';
import MenuIcon from '@material-ui/icons/Menu';
import CloseIcon from '@material-ui/icons/Close';

const Container = styled.div`
  min-height: 10px;
  align-items: center;
  display: flex;
  position: fixed;
  z-index: 1;
  flex-direction: row;
  padding: 10px 5px;
  left: 0;
  right: 0;
  justify-content: space-between;
`;

const CenterMenu = styled.div`
  display: flex;

  @media screen and (max-width: 917px) {
    display: none;
  }

  p {
    padding: 0.3rem 0.1rem;
    transition: 0.5s ease;
    &:hover {
      background: rgb(202, 221, 230);
      border-radius: 30px;
      color: white;
      cursor: pointer;
    }
  }

  a {
    flex-wrap: wrap;
  }
`;

const Rightmenu = styled.div`
  display: flex;
  padding: 0.3rem 0.1rem;

  @media screen and (max-width: 917px) {
    padding: 0px;
    font-size: 12px;
  }
`;

const RightLeftmenu = styled.div`
  display: flex;

  @media screen and (max-width: 917px) {
    display: none;
  }
`;

const BurgerNavbar = styled.div`
  background: white;
  list-style-type: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20%;
  text-align: left;
  color: black;
  transition: 0.3s ease;
  transform: ${(props) => (props.transform ? "translateX(0)" : "translateX(100%)")};
  padding: 30px 0;
  letter-spacing: 3px;

  @media screen and (max-width: 500px) {
    width: 50%;
  }

  li {
    margin-top: 50px;
    margin-left: 40px;
    padding: 0.3rem 0rem;
    border-bottom: 1px solid gray;
    width: 70%;
    &:hover {
      background: #f1f1f1;
      width: 90%;
      cursor: pointer;
    }
  }

  li, a {
    color: black;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
  }
`;

const Info = styled.div`
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  margin-bottom: 10px;
`;

const Header = () => {
  const [isburgeropen, setisburgeropen] = React.useState(false);

  return (
    <Container>
      <a href="/">
        <img src="/images/logo.svg" alt="logo" style={{ textAlign: "center", cursor: "pointer", padding: "0.3rem 0.1rem" }} />
      </a>

      <CenterMenu>
        <p><a href="/">Model S</a></p>
        <p><a href="/">Model 3</a></p>
        <p><a href="/">Model X</a></p>
        <p><a href="/">Model Y</a></p>
        <p><a href="/">Solar Roof</a></p>
        <p><a href="/">Solar Panels</a></p>
      </CenterMenu>

      <Rightmenu>
        <RightLeftmenu>
          <p><a href="/">Shop</a></p>
          <p><a href="/">Account</a></p>
          <p><a href="/">Menu</a></p>
        </RightLeftmenu>
        <MenuIcon onClick={() => setisburgeropen(true)} style={{ cursor: "pointer" }} />
      </Rightmenu>
      
      <BurgerNavbar transform={isburgeropen}>
        <CloseIcon onClick={() => setisburgeropen(false)} style={{ position: "absolute", top: "10px", right: "10px", cursor: "pointer" }} />
        <li><a href="/">Model S</a></li>
        <li><a href="/">Model 3</a></li>
        <li><a href="/">Model X</a></li>
        <li><a href="/">Solar Roof</a></li>
        <li><a href="/">Solar Panels</a></li>
        <li>
          <details>
            <summary>Features</summary>
            <Info>
              <a href="/">Shop</a>
              <a href="/">Account</a>
              <a href="/">Menu</a>
            </Info>
          </details>
        </li>
      </BurgerNavbar>
    </Container>
  );
}

export default Header;


Create the Homes Component

  1. Create a new file Homes.js inside the src/components directory (you might need to create the components directory if it doesn't exist).

  2. Add the following code to Homes.js:


import React from 'react';
import styled from 'styled-components';

const Wrap = styled.div`
  width: 100%;
  height: 100vh;
  background-image: ${(props) => `url("/images/${props.bgimg}")`};
  background-repeat: no-repeat;
  opacity: 0.9;
  background-size: cover;
  object-fit: cover;
  background-position: center;
`;

const Itemdata = styled.div`
  text-align: center;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  height: 94.5vh;
  overflow: hidden;
  justify-content: space-between;
`;

const ItemText = styled.div`
  text-align: center;
  margin: 70px 20px;
  height: 20vh;
  text-transform: capitalize;
`;

const TitleText = styled.h1`
  text-align: center;
  font-size: 35px;
  letter-spacing: 2px;
`;

const Desc = styled.p`
  text-align: center;
  color: gray;
  font-size: 12px;
  margin-top: 5px;
`;

const BtnContainer = styled.div`
  padding: 10px;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;

  @media only screen and (max-width: 477px) {
    flex-direction: column;
  }
`;

const LeftButton = styled.button`
  padding: 0.6rem 4rem;
  width: 300px;
  border: none;
  outline: none;
  border-radius: 30px;
  color: white;
  margin: 10px;
  font-weight: bold;
  letter-spacing: 2px;
  background: rgb(54, 56, 65);
  transition: 0.3s ease;

  &:hover {
    background: rgb(54, 45, 60);
    cursor: pointer;
    color: white;
  }
`;

const RightButton = styled(LeftButton)`
  background: white;
  color: black;
`;

const Arrow = styled.img`
  text-align: center;
  color: black;
  width: 45px;
  margin-bottom: 30px;
  animation: bounce 2s linear infinite;
`;

const Homes = ({ title, desc, img, leftbtn, rightbtn }) => {
  return (
    <Wrap bgimg={img}>
      <Itemdata>
        <ItemText>
          <TitleText>{title}</TitleText>
          <Desc>{desc}</Desc>
        </ItemText>
        <div>
          <BtnContainer>
            <LeftButton>{leftbtn}</LeftButton>
            <RightButton>{rightbtn}</RightButton>
          </BtnContainer>
          <Arrow src="/images/down-arrow.svg" />
        </div>
      </Itemdata>
    </Wrap>
  );
}

export default Homes;


4. Add Images

Ensure you have images in the public/images directory. For the above code to work, you need the following images:

  • model-3.jpg
  • model-s.jpg
  • model-x.jpg
  • model-y.jpg
  • solar-panel.jpg
  • solar-roof.jpg
  • down-arrow.svg

5. Use the Homes Component in Your App

  1. Open App.js and modify it to include the Homes component.

  2. Add the following code to App.js:


import React from 'react';
import Homes from './components/Homes';

const App = () => {
  return (
    <>
      <Homes
        title="Model 3"
        desc="Order online for touchless delivery."
        img="model-3.jpg"
        leftbtn="Custom Order"
        rightbtn="Existing Inventory"
      />
      <Homes
        title="Model S"
        desc="Order online for touchless delivery."
        img="model-s.jpg"
        leftbtn="Custom Order"
        rightbtn="Existing Inventory"
      />
      <Homes
        title="Model X"
        desc="Order online for touchless delivery."
        img="model-x.jpg"
        leftbtn="Custom Order"
        rightbtn="Existing Inventory"
      />
      <Homes
        title="Model Y"
        desc="Order online for touchless delivery."
        img="model-y.jpg"
        leftbtn="Custom Order"
        rightbtn="Existing Inventory"
      />
      <Homes
        title="Solar Panels"
        desc="Lowest Cost Solar Panels in America"
        img="solar-panel.jpg"
        leftbtn="Custom Order"
        rightbtn="Existing Inventory"
      />
      <Homes
        title="Solar Roof"
        desc="Produce Clean Energy From Your Roof"
        img="solar-roof.jpg"
        leftbtn="Custom Order"
        rightbtn="Existing Inventory"
      />
    </>
  );
}

export default App;


4. Run Your Application

  1. Start the development server:

npm start

Open your browser and navigate to http://localhost:3000. You should see the header at the top and the Homes components below it, each displaying the respective information and images.

Comments

Post a Comment

Popular posts from this blog

Lets build a Markdown blog using Next.js, Shadcn, Tailwind, Pieces, Remark & Rehype 🔥

 Building a Markdown blog using **Next.js**, **Shadcn**, **Tailwind CSS**, **Pieces**, **Remark**, and **Rehype** is a fantastic idea! This stack will give you a modern, performant, and highly customizable blog. Let’s break it down step by step. --- ### **1. Set Up Next.js Project** Start by creating a new Next.js project: ```bash npx create-next-app@latest my-markdown-blog cd my-markdown-blog ``` --- ### **2. Install Tailwind CSS** Install Tailwind CSS and configure it: ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Update `tailwind.config.js`: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = {   content: [     "./app/**/*.{js,ts,jsx,tsx}",     "./pages/**/*.{js,ts,jsx,tsx}",     "./components/**/*.{js,ts,jsx,tsx}",   ],   theme: {     extend: {},   },   plugins: [], }; ``` Add Tailwind to your `globals.css`: ```css @tailwind base; @tailwind components; @...
Read more

React Portflio Website Basic to Advance

To build a React-based portfolio website with Tailwind CSS, follow these steps to integrate Tailwind and style your components. 1. Set Up Tailwind CSS in Your React Project First, create a new React project and install Tailwind CSS.   npx create-react-app portfolio-website  cd portfolio-website  npm install -D tailwindcss postcss autoprefixer  npx tailwindcss init After running ,    npx tailwindcss init   a    tailwind.config.js  file will be created. Now, configure Tailwind to purge unused styles by editing tailwind.config.js as follows: tailwind.config.js /** @type {import('tailwindcss').Config} */ module . exports = {   content : [     " ./src/**/*.{js,jsx,ts,tsx} " ,   ],   theme : {     extend : {},   },   plugins : [], } 2. Add Tailwind Directives to CSS Create a new file  src / index .css   (or edit the existing one) to include the Tailwind directives: sr...
Read more

Todo List app using html,js and tailwind.css with features login,logout,storing the data in localstorage addtodos,deletetodos and updating todos,toastify library and many more

Image
  Here's a fully functional To-Do List app with login/logout functionality, item management (add, edit, delete), and local storage for data persistence. The app uses HTML, CSS (with Tailwind CSS for design), and JavaScript for the logic. File Structure: index.html - The main structure of the app style.css - Custom styles (if needed) script.js - JavaScript logic for the app You can use Tailwind CSS CDN for simplicity to quickly apply beautiful styles. Features Breakdown: Login/Logout : The user can log in by entering a username and password. After logging in, they can manage their to-do list. If not logged in, they are redirected to the login screen. To-Do Management : The user can add, edit, and delete items from the to-do list. Local Storage : All data is stored in the browser's local storage, so the data persists even after the page is refreshed. Tailwind CSS : The app uses Tailwind CSS to create a clean, responsive, and modern design. You can run this code by creating th...
Read more