Feat: 랜딩페이지 제작 #42
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,128 @@ | ||
| import Image from "next/image"; | ||
| import Button from "@/components/Button"; | ||
| import HomeMain from "@/public/images/home_main.png"; | ||
| import sectionLink from "@/public/images/section_link.png"; | ||
| import sectionFolder from "@/public/images/section_folder.png"; | ||
| import sectionShare from "@/public/images/section_share.png"; | ||
| import sectionSearch from "@/public/images/section_search.png"; | ||
| import { useRouter } from "next/router"; | ||
|
|
||
| const HomePage = () => { | ||
| const router = useRouter(); | ||
| const isLoggedIn = false; | ||
|
|
||
| const handleClick = () => { | ||
| if (isLoggedIn) { | ||
| router.push("/share"); | ||
| } else { | ||
| router.push("/login"); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <main> | ||
| <div className="flex flex-col items-center bg-gray100"> | ||
| <h1 className="mt-[28px] text-[32px] leading-[42px] font-bold md:mt-[40px] lg:mt-[70px] md:text-[64px] md:leading-[80px] text-center"> | ||
| <span className="gradient-text">세상의 모든 정보</span> | ||
| 를<br /> 쉽게 저장하고 | ||
| <br className="lg:hidden" /> | ||
| 관리해 보세요 | ||
| </h1> | ||
| <Button | ||
| onClick={handleClick} | ||
| className="mt-[24px] w-[200px] h-[37px] text-[14px] md:mt-[40px] md:w-[350px] md:h-[53px] md:text-[18px]" | ||
| > | ||
| 링크 추가하기 | ||
| </Button> | ||
| <Image | ||
| src={HomeMain} | ||
| width={1118} | ||
| height={540} | ||
| alt="배너" | ||
| className="mt-[37.56px] w-[302.79px] h-[146.44px] md:mt-[69.07px] md:w-[650.3px] md:h-[313.93px] lg:mt-[90px] lg:w-[1118px] lg:h-[540px]" | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col items-center gap-[80px] px-[33px] pt-[40px] pb-[80px] md:pt-[80px] md:pb-[170px] md:gap-[100px] lg:pt-[120px]"> | ||
| <section className="flex flex-col md:flex-row md:items-center md:gap-[51px] lg:gap-[157px]"> | ||
|
||
| <div className="flex flex-col md:w-[262px] lg:w-[291px]"> | ||
| <strong className="text-[24px] leading-[28.64px] font-bold md:text-[48px] md:leading-[57.28px]"> | ||
| <span className="gradient-text">원하는 링크</span>를 저장하세요 | ||
| </strong> | ||
| <em className="mt-[10px] text-[15px] leading-[22.5px] font-medium text-gray600 md:text-[16px] md:leading-[24px]"> | ||
| 나중에 읽고 싶은 글, 다시 보고 싶은 영상, 사고 싶은 옷, | ||
| <br className="sm:block md:hidden" /> 기억하고 싶은 모든 것을 한 | ||
| 공간에 저장하세요. | ||
| </em> | ||
| </div> | ||
| <Image | ||
| src={sectionLink} | ||
| width={550} | ||
| height={450} | ||
| alt="링크" | ||
| className="mt-[24px] w-[325px] h-[265.91px] md:w-[385px] md:h-[315px] lg:w-[550px] lg:h-[450px]" | ||
| /> | ||
| </section> | ||
|
|
||
| <section className="flex flex-col md:flex-row-reverse md:items-center md:gap-[51px] lg:gap-[157px]"> | ||
|
||
| <div className="flex flex-col md:w-[262px] lg:w-[291px]"> | ||
| <strong className="text-[24px] leading-[28.64px] font-bold md:text-[48px] md:leading-[57.28px]"> | ||
| 링크를 폴더로 <span className="gradient-text">관리</span>하세요 | ||
| </strong> | ||
| <em className="mt-[10px] text-[15px] leading-[22.5px] font-medium text-gray600 md:text-[16px] md:leading-[24px]"> | ||
| 나만의 폴더를 무제한으로 만들고 다양하게 활용할 수 | ||
| <br className="sm:block md:hidden" /> 있습니다. | ||
| </em> | ||
| </div> | ||
| <Image | ||
| src={sectionFolder} | ||
| width={550} | ||
| height={450} | ||
| alt="폴더" | ||
| className="mt-[24px] w-[325px] h-[265.91px] md:w-[385px] md:h-[315px] lg:w-[550px] lg:h-[450px]" | ||
| /> | ||
| </section> | ||
|
|
||
| <section className="flex flex-col md:flex-row md:items-center md:gap-[51px] lg:gap-[157px]"> | ||
| <div className="flex flex-col md:w-[262px] lg:w-[291px]"> | ||
| <strong className="text-[24px] leading-[28.64px] font-bold md:text-[48px] md:leading-[57.28px]"> | ||
| 저장한 링크를 <span className="gradient-text">공유</span>해 보세요 | ||
| </strong> | ||
| <em className="mt-[10px] text-[15px] leading-[22.5px] font-medium text-gray600 md:text-[16px] md:leading-[24px]"> | ||
| 여러 링크를 폴더에 담고 공유할 수 있습니다. 가족, | ||
| <br className="sm:block md:hidden" /> 친구, 동료들에게 쉽고 빠르게 | ||
| 링크를 공유해 보세요. | ||
| </em> | ||
| </div> | ||
| <Image | ||
| src={sectionShare} | ||
| width={550} | ||
| height={450} | ||
| alt="공유" | ||
| className="mt-[24px] w-[325px] h-[265.91px] md:w-[385px] md:h-[315px] lg:w-[550px] lg:h-[450px]" | ||
| /> | ||
| </section> | ||
|
|
||
| <section className="flex flex-col md:flex-row-reverse md:items-center md:gap-[51px] lg:gap-[157px]"> | ||
| <div className="flex flex-col md:w-[262px] lg:w-[291px]"> | ||
| <strong className="text-[24px] leading-[28.64px] font-bold md:text-[48px] md:leading-[57.28px]"> | ||
| 저장한 링크를 <span className="gradient-text">검색</span>해 보세요 | ||
| </strong> | ||
| <em className="mt-[10px] text-[15px] leading-[22.5px] font-medium text-gray600 md:text-[16px] md:leading-[24px]"> | ||
| 중요한 정보들을 검색으로 쉽게 찾아보세요. | ||
| </em> | ||
| </div> | ||
| <Image | ||
| src={sectionSearch} | ||
| width={550} | ||
| height={450} | ||
| alt="검색" | ||
| className="mt-[24px] w-[325px] h-[265.91px] md:w-[385px] md:h-[315px] lg:w-[550px] lg:h-[450px]" | ||
| /> | ||
| </section> | ||
| </div> | ||
| </main> | ||
| ); | ||
| }; | ||
|
|
||
| export default HomePage; | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
mt-[28px] text-[32px] mt-7 text-8 로 대체가 가능할것같습니다 : )
md:mt-[40px] 도 마찬가지 입니다
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
그냥 7은 아마 rem으로 들어갈텐데 저희는 px로 통일해서 저렇게 적어주신 걸거에요!