feat: implement home page

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 (
+    <Container>
+      <WelcomeSection />
+      <OperatorGallery />
+    </Container>
+  )
+}
+
+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

src/components/Home/Onboarding/index.ts

@@ -0,0 +1 @@
+export { default as Onboarding } from './Onboarding'

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 (
+    <GalleryWrapper>
+      {operatorImages.map((src, index) => (
+        <GridItem key={index}>
+          <OperatorImage
+            src={src}
+            alt={`Operator ${index + 1}`}
+            loading="lazy"
+          />
+        </GridItem>
+      ))}
+    </GalleryWrapper>
+  )
+}
+
+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

src/components/Home/OperatorGallery/index.ts

@@ -0,0 +1 @@
+export { default as OperatorGallery } from './OperatorGallery'

src/components/Home/WelcomeSection/WelcomeSection.tsx

@@ -0,0 +1,56 @@
+import styled from '@emotion/styled'
+import React from 'react'
+
+const WelcomeSection: React.FC = () => {
+  return (
+    <WelcomeWrapper>
+      <Title>Welcome, Operator!</Title>
+      <Description>
+        The Logos Operator collection consists of 5,000 Ordinals, each
+        representing one of ten distinct archetypes within the Logos network.
+      </Description>
+      <ConnectButton>Connect Wallet</ConnectButton>
+    </WelcomeWrapper>
+  )
+}
+
+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

src/components/Home/WelcomeSection/index.ts

@@ -0,0 +1 @@
+export { default as WelcomeSection } from './WelcomeSection'

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<HomePageProps> = ({
   children,
   ...props
 }) => {
-  return <Container {...props}>Hello</Container>
+  return (
+    <Container {...props}>
+      <Onboarding />
+    </Container>
+  )
 }
 
-const Container = styled.div`
-  @media (max-width: ${breakpoints.lg}px) {
-    margin-inline: 10px;
-  }
-`
+const Container = styled.div``

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<DefaultLayoutProps> = (
+  props: PropsWithChildren,
+) => {
+  return (
+    <Container>
+      <Header />
+      <main>{props.children}</main>
+    </Container>
+  )
+}
+
+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

src/layouts/HomeLayout/index.ts

@@ -0,0 +1 @@
+export { default as HomeLayout } from './Home.layout'

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 <HomeLayout>{page}</HomeLayout>
+}