add welcome

src/components/Header/Header.jsx

@@ -1,13 +1,19 @@
-import { NavLink } from "react-router-dom";
-import { HeaderContainer, HeaderNavigation } from "./Header.styled";
+import {
+ HeaderContainer,
+ HeaderLink,
+ HeaderNavigation,
+ NavContainer,
+} from "./Header.styled";
 
 export const Header = () => {
  return (
  <HeaderContainer>
  <HeaderNavigation>
- <NavLink to="/">RentCamp</NavLink>
- <NavLink to="/home">Rent</NavLink>
- <NavLink to="/favourite">Favourite</NavLink>
+ <HeaderLink to="/">RentCamp.</HeaderLink>
+ <NavContainer>
+ <HeaderLink to="/home">Rent</HeaderLink>
+ <HeaderLink to="/favourite">Favourite</HeaderLink>
+ </NavContainer>
  </HeaderNavigation>
  </HeaderContainer>
  );

src/components/Header/Header.styled.js

@@ -1,12 +1,31 @@
 import styled from "styled-components";
+import { NavLink } from "react-router-dom";
 
 export const HeaderContainer = styled.div`
  margin: 0 auto;
  padding: 30px 64px;
  max-width: 1440px;
+
+ border-bottom: 1px solid ${(p) => p.theme.colors.loadMoreBorderColor};
 `;
 
 export const HeaderNavigation = styled.nav`
+ display: flex;
+ gap: 40px;
+`;
+
+export const NavContainer = styled.div`
  display: flex;
  gap: 20px;
 `;
+
+export const HeaderLink = styled(NavLink)`
+ font-size: ${(p) => p.theme.fonts.smSize};
+ color: ${(p) => p.theme.colors.dark};
+
+ transition: color ${(p) => p.theme.transition.transitionDurAndFunc};
+
+ &:hover {
+ color: ${(p) => p.theme.colors.hoverColor};
+ }
+`;

src/components/WelcomeLayout/WelcomeLayout.jsx

@@ -0,0 +1,20 @@
+import {
+ Greeting,
+ GreetingWrapper,
+ ImageWrapper,
+ WelcomeLayoutContainer,
+} from "./WelcomeLayout.styled";
+
+export const WelcomeLayout = () => {
+ return (
+ <WelcomeLayoutContainer>
+ <GreetingWrapper>
+ <Greeting>
+ Welcome to RentCamp - your ultimate companion for unforgettable
+ journeys and outdoor adventures!
+ </Greeting>
+ </GreetingWrapper>
+ <ImageWrapper></ImageWrapper>
+ </WelcomeLayoutContainer>
+ );
+};

src/components/WelcomeLayout/WelcomeLayout.styled.js

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+export const WelcomeLayoutContainer = styled.div`
+ display: flex;
+ height: 600px;
+ width: 100%;
+ gap: 0px;
+ border-radius: ${(p) => p.theme.radius.md};
+ overflow: hidden;
+`;
+
+export const GreetingWrapper = styled.div`
+ background-color: ${(p) => p.theme.colors.loadMoreBorderColor};
+`;
+
+export const Greeting = styled.h2`
+ margin-top: 70px;
+ margin-left: 30px;
+ font-weight: ${(p) => p.theme.fonts.normal};
+ color: ${(p) => p.theme.colors.dark};
+`;
+
+export const ImageWrapper = styled.div`
+ width: 100%;
+ height: 100%;
+ background-image: url("/camp.jpeg");
+ background-size: auto 100%;
+ background-repeat: no-repeat;
+ background-position: center;
+ overflow: hidden;
+`;

src/pages/WelcomePage.jsx

@@ -1,7 +1,9 @@
+import { WelcomeLayout } from "../components/WelcomeLayout/WelcomeLayout";
+
 export default function WelcomePage() {
  return (
- <section className="container">
- <h1>WelcomePage</h1>
+ <section style={{ paddingTop: "20px" }} className="container">
+ <WelcomeLayout />
  </section>
  );
 }

src/theme.js

@@ -24,11 +24,12 @@ export const theme = {
  bigSize: "24px",
  bigHeith: "30px",
 
+ normal: "400",
  md: "500",
  bold: "600",
  },
  transition: {
- transitionDurAndFunc: "250ms cubic-bezier(0.4, 0, 0.2, 1)",
+ transitionDurAndFunc: "350ms cubic-bezier(0.4, 0, 0.2, 1)",
  },
 };