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}
+}