From eb290a124461b3ca1aff631429ace91ae9e2a26e Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Fri, 13 Sep 2024 21:51:31 +0900 Subject: [PATCH] feat: implement home page --- src/components/Home/Onboarding/Onboarding.tsx | 29 ++++++++++ src/components/Home/Onboarding/index.ts | 1 + .../Home/OperatorGallery/OperatorGallery.tsx | 56 +++++++++++++++++++ src/components/Home/OperatorGallery/index.ts | 1 + .../Home/WelcomeSection/WelcomeSection.tsx | 56 +++++++++++++++++++ src/components/Home/WelcomeSection/index.ts | 1 + src/containers/Home/HomeContainer.tsx | 14 ++--- src/layouts/HomeLayout/Home.layout.tsx | 34 +++++++++++ src/layouts/HomeLayout/index.ts | 1 + src/pages/index.tsx | 5 ++ 10 files changed, 191 insertions(+), 7 deletions(-) create mode 100644 src/components/Home/Onboarding/Onboarding.tsx create mode 100644 src/components/Home/Onboarding/index.ts create mode 100644 src/components/Home/OperatorGallery/OperatorGallery.tsx create mode 100644 src/components/Home/OperatorGallery/index.ts create mode 100644 src/components/Home/WelcomeSection/WelcomeSection.tsx create mode 100644 src/components/Home/WelcomeSection/index.ts create mode 100644 src/layouts/HomeLayout/Home.layout.tsx create mode 100644 src/layouts/HomeLayout/index.ts diff --git a/src/components/Home/Onboarding/Onboarding.tsx b/src/components/Home/Onboarding/Onboarding.tsx new file mode 100644 index 0000000..a16ff9d --- /dev/null +++ b/src/components/Home/Onboarding/Onboarding.tsx @@ -0,0 +1,29 @@ +import styled from '@emotion/styled' +import React from 'react' +import { OperatorGallery } from '../OperatorGallery' +import { WelcomeSection } from '../WelcomeSection' + +const Onboarding: React.FC = () => { + return ( + + + + + ) +} + +const Container = styled.div` + display: flex; + width: 100%; + flex-direction: column; + overflow: hidden; + align-items: center; + margin-top: 12vh; + + @media (max-width: 991px) { + padding-left: 20px; + padding-right: 20px; + } +` + +export default Onboarding diff --git a/src/components/Home/Onboarding/index.ts b/src/components/Home/Onboarding/index.ts new file mode 100644 index 0000000..c4bdd51 --- /dev/null +++ b/src/components/Home/Onboarding/index.ts @@ -0,0 +1 @@ +export { default as Onboarding } from './Onboarding' diff --git a/src/components/Home/OperatorGallery/OperatorGallery.tsx b/src/components/Home/OperatorGallery/OperatorGallery.tsx new file mode 100644 index 0000000..2224007 --- /dev/null +++ b/src/components/Home/OperatorGallery/OperatorGallery.tsx @@ -0,0 +1,56 @@ +import styled from '@emotion/styled' +import React from 'react' + +const operatorImages = [ + '/dashboard/mock/operators/1.gif', + '/dashboard/mock/operators/2.gif', + '/dashboard/mock/operators/3.gif', + '/dashboard/mock/operators/4.gif', + '/dashboard/mock/operators/5.gif', + '/dashboard/mock/operators/6.gif', + '/dashboard/mock/operators/7.gif', + '/dashboard/mock/operators/8.gif', +] + +const OperatorGallery: React.FC = () => { + return ( + + {operatorImages.map((src, index) => ( + + + + ))} + + ) +} + +const GalleryWrapper = styled.section` + position: absolute; + bottom: 0; + overflow-x: auto; + width: 100%; + display: flex; + gap: 0 16px; + + @media (max-width: 991px) { + margin-top: 40px; + } +` + +const OperatorImage = styled.img` + aspect-ratio: 1; + object-fit: contain; + min-width: 256px; + width: 18vw; +` + +const GridItem = styled.div` + display: flex; + width: 100%; +` + +export default OperatorGallery diff --git a/src/components/Home/OperatorGallery/index.ts b/src/components/Home/OperatorGallery/index.ts new file mode 100644 index 0000000..bfb4ead --- /dev/null +++ b/src/components/Home/OperatorGallery/index.ts @@ -0,0 +1 @@ +export { default as OperatorGallery } from './OperatorGallery' diff --git a/src/components/Home/WelcomeSection/WelcomeSection.tsx b/src/components/Home/WelcomeSection/WelcomeSection.tsx new file mode 100644 index 0000000..8bb3349 --- /dev/null +++ b/src/components/Home/WelcomeSection/WelcomeSection.tsx @@ -0,0 +1,56 @@ +import styled from '@emotion/styled' +import React from 'react' + +const WelcomeSection: React.FC = () => { + return ( + + Welcome, Operator! + + The Logos Operator collection consists of 5,000 Ordinals, each + representing one of ten distinct archetypes within the Logos network. + + Connect Wallet + + ) +} + +const WelcomeWrapper = styled.section` + display: flex; + width: 480px; + max-width: 100%; + flex-direction: column; + font-size: 14px; + line-height: 20px; + text-align: center; + + @media (max-width: 991px) { + margin-top: 40px; + } +` + +const Title = styled.h1` + font-size: 40px; + line-height: 1.2; + margin: 0; +` + +const Description = styled.p` + line-height: 20px; + margin-top: 32px; +` + +const ConnectButton = styled.button` + align-self: center; + border: 1px solid rgb(var(--lsd-border-primary)); + color: rgb(var(--lsd-text-primary)); + margin-top: 32px; + padding: 10px 40px; + background: transparent; + cursor: pointer; + + @media (max-width: 991px) { + padding: 10px 20px; + } +` + +export default WelcomeSection diff --git a/src/components/Home/WelcomeSection/index.ts b/src/components/Home/WelcomeSection/index.ts new file mode 100644 index 0000000..f15d897 --- /dev/null +++ b/src/components/Home/WelcomeSection/index.ts @@ -0,0 +1 @@ +export { default as WelcomeSection } from './WelcomeSection' diff --git a/src/containers/Home/HomeContainer.tsx b/src/containers/Home/HomeContainer.tsx index 3a4abd5..1e51bee 100644 --- a/src/containers/Home/HomeContainer.tsx +++ b/src/containers/Home/HomeContainer.tsx @@ -1,4 +1,4 @@ -import { breakpoints } from '@/configs/ui.configs' +import { Onboarding } from '@/components/Home/Onboarding' import styled from '@emotion/styled' import React from 'react' @@ -11,11 +11,11 @@ export const HomeContainer: React.FC = ({ children, ...props }) => { - return Hello + return ( + + + + ) } -const Container = styled.div` - @media (max-width: ${breakpoints.lg}px) { - margin-inline: 10px; - } -` +const Container = styled.div`` diff --git a/src/layouts/HomeLayout/Home.layout.tsx b/src/layouts/HomeLayout/Home.layout.tsx new file mode 100644 index 0000000..fc5714e --- /dev/null +++ b/src/layouts/HomeLayout/Home.layout.tsx @@ -0,0 +1,34 @@ +import { Header } from '@/components/Header/Header' +import { breakpoints, uiConfigs } from '@/configs/ui.configs' +import styled from '@emotion/styled' +import React, { PropsWithChildren } from 'react' + +interface DefaultLayoutProps {} + +const DefaultLayout: React.FC = ( + props: PropsWithChildren, +) => { + return ( + +
+
{props.children}
+ + ) +} + +const Container = styled.div` + display: flex; + flex-direction: column; + overflow: hidden; + max-width: ${uiConfigs.maxContainerWidth}px; + + margin: 0 auto; + padding: 24px 0 0 0; + height: 100vh; + + @media (max-width: ${breakpoints.md}px) { + padding: 0 20px; + } +` + +export default DefaultLayout diff --git a/src/layouts/HomeLayout/index.ts b/src/layouts/HomeLayout/index.ts new file mode 100644 index 0000000..4061c5f --- /dev/null +++ b/src/layouts/HomeLayout/index.ts @@ -0,0 +1 @@ +export { default as HomeLayout } from './Home.layout' diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3dd1804..80b842f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,6 @@ import { SEO } from '@/components/SEO' import { HomeContainer } from '@/containers/Home' +import { HomeLayout } from '@/layouts/HomeLayout' export default function HomePage() { return ( @@ -9,3 +10,7 @@ export default function HomePage() { ) } + +HomePage.getLayout = function getLayout(page: React.ReactNode) { + return {page} +}