Merge pull request #5 from rohitverma0234/05_Home-&-About-Page-with-Hero-Section

05 home & about page with hero section

Author: rohitverma0234

README.md

@@ -1,28 +1,15 @@
-# Responsive-Header-Section
-## UseState Hook
-The useState hook is a built-in hook that allows functional components to manage state. It's commonly used when you need to add state to a component without converting it into a class.
-
-Here's a basic overview of how to use useState:
-
-import React, { useState } from 'react';
-
-function ExampleComponent() {<br>
- // Here, we declare a state variable called "count" and a function to update it, "setCount".<br>
- // We initialize the state with a value of 0.<br>
- const [count, setCount] = useState(0);
-
- return (
- <div>
- <p>You clicked {count} times</p>
- {/* When the button is clicked, we call setCount to update the state */}<br>
- <button onClick={() => setCount(count + 1)}>
- Click me
- </button>
- </div>
- );
-}
-
-export default ExampleComponent;
+# Props
+## 1. Definition
+Props stands for properties and refers to the mechanism for passing data from one component to another within an application.
+
+## 2. Here's how it works:
+1. <b>Parent Component Passing Data:</b> A parent component can pass data to a child component by using attributes similar to HTML attributes.
+
+2. <b>Receiving Props</b>: The child component receives the data passed by the parent as props. Props are received as an object within the child component.
+
+3. <b>Immutable Data</b>: Props are immutable, meaning that a child component cannot directly modify the props it receives from its parent. They are read-only.
+
+4. <b>Functional and Class Components</b>: Props can be used with both functional and class components in React.
 
 # Welcome to Rohit React Ecommerce Website
 

public/images/hero.jpg

@@ -1,8 +1,16 @@
 import React from 'react'
+import HeroSection from './components/HeroSection'
 
 const About = () => {
+
+ const data = {
+ name:"Rohit Store",
+ }
+
  return (
- <div>About</div>
+ <div>
+ <HeroSection myData={data}/>
+ </div>
  )
 }
 

src/About.js

@@ -80,6 +80,34 @@ li {
  list-style: none;
 }
 
+${"" /* resuable code section */}
+
+.container {
+ max-width: 120rem;
+ margin: 0 auto;
+}
+
+.grid {
+ display: grid;
+ gap: 9rem;
+}
+
+.grid-two-column {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-three-column {
+ grid-template-columns: repeat(3, 1fr);
+}
+
+.grid-four-column{
+ grid-template-columns: 1fr 1.2fr .5fr .8fr ;
+}
+
+.grid-five-column{
+ grid-template-columns: repeat(5, 1fr);
+}
+
 @media (max-width: ${({ theme }) => theme.media.tab}) {
  .container {
  max-width: 130rem;

src/GlobalStyle.js

@@ -1,16 +1,21 @@
 import React from 'react'
 import styled from 'styled-components'
+import HeroSection from './components/HeroSection'
 
 const Home = () => {
+ const data = {
+ name:"Rohit"
+ }
+
  return (
  <Wrapper className='test'>
- Home
+ <HeroSection myData={data}/>
  </Wrapper>
  )
 }
 
 const Wrapper = styled.section`
- background-color: ${({theme})=> theme.colors.bg};
+ 
 `
 
 export default Home

src/Home.js

@@ -0,0 +1,108 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+import styled from 'styled-components'
+import { Button } from '../styles/Button'
+
+const HeroSection = ({myData}) => {
+
+ const{name} = myData
+
+ return (
+ <Wrapper>
+ <div className="container">
+ <div className="grid grid-two-column">
+ <div className="hero-section-data">
+ <p className="intro-data">Welcome to </p>
+ <h1>{name}</h1>
+ <p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias
+ atque temporibus veniam doloribus libero ad error omnis voluptates
+ animi! Suscipit sapiente.
+ </p>
+ <NavLink>
+ <Button>show now</Button>
+ </NavLink>
+ </div>
+ {/* homepage image */}
+ <div className="hero-section-image">
+ <figure>
+ <img
+ src="./images/hero.jpg"
+ alt="hero-section"
+ className="img-style"
+ />
+ </figure>
+ 
+ </div>
+ </div>
+ </div>
+ </Wrapper>
+ )
+}
+
+const Wrapper = styled.section`
+ padding: 12rem 0;
+
+img {
+ min-width: 10rem;
+ height: 10rem;
+}
+
+.hero-section-data {
+ p {
+ margin: 2rem 0;
+ }
+
+ h1 {
+ text-transform: capitalize;
+ font-weight: bold;
+ }
+
+ .intro-data {
+ margin-bottom: 0;
+ }
+}
+
+.hero-section-image {
+ width: 100%;
+ height: auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+figure {
+ position: relative;
+
+ &::after {
+ content: "";
+ width: 60%;
+ height: 80%;
+ background-color: rgba(81, 56, 238, 0.4);
+ position: absolute;
+ left: 50%;
+ top: -5rem;
+ z-index: -1;
+ }
+}
+.img-style {
+ width: 100%;
+ height: auto;
+}
+
+@media (max-width: ${({ theme }) => theme.media.mobile}) {
+ .grid {
+ gap: 10rem;
+ }
+
+ figure::after {
+ content: "";
+ width: 50%;
+ height: 100%;
+ left: 0;
+ top: 10%;
+ /* bottom: 10%; */
+ background-color: rgba(81, 56, 238, 0.4);
+ }
+}`
+
+export default HeroSection

src/components/HeroSection.js

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const Button = styled.button`
+ text-decoration: none;
+ max-width: auto;
+ background-color: rgb(98 84 243);
+ color: rgb(255 255 255);
+ padding: 1.4rem 2.4rem;
+ border: none;
+ text-transform: uppercase;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ -webkit-transition: all 0.3s ease 0s;
+ -moz-transition: all 0.3s ease 0s;
+ -o-transition: all 0.3s ease 0s;
+
+ &:hover,
+ &:active {
+ box-shadow: 0 2rem 2rem 0 rgb(132 144 255 / 30%);
+ box-shadow: ${({ theme }) => theme.colors.shadowSupport};
+ transform: scale(0.96);
+ }
+
+ a {
+ text-decoration: none;
+ color: rgb(255 255 255);
+ font-size: 1.8rem;
+ }`