feat: neko sticker landing page

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
+}

.github/workflows/deploy-github-page.yml

@@ -0,0 +1,79 @@
+# Workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+        with:
+          # Remove this line if want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key:
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-${{
+            hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build
+        run: pnpm build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v3

.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+components/icons/*.tsx
+components/icons/*.ts

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=*@mochi-ui/*

.prettierignore

@@ -0,0 +1,15 @@
+/build/
+/dist/
+coverage/
+__snapshots__/
+node_modules/
+storybook-static/
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+package.json
+# next.js
+/.next/
+/out/
+# turborepo
+/.turbo/

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "always",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "htmlWhitespaceSensitivity": "ignore"
+}

components/InstallButton/index.tsx

@@ -0,0 +1,111 @@
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  List,
+  MobileNavItem,
+  Typography,
+} from '@mochi-ui/core'
+import { DiscordColored, TelegramColored } from '@mochi-ui/icons'
+
+import {
+  DiscordInstallLink,
+  TelegramInstallLink,
+  LINEInstallLink,
+  WhatsappInstallLink,
+} from '@configs/install-links'
+
+export const installContentMenus = (
+  <List
+    data={[
+      {
+        label: 'Discord',
+        iconLeft: <DiscordColored />,
+        href: DiscordInstallLink,
+      },
+      {
+        label: 'Telegram',
+        iconLeft: <TelegramColored />,
+        href: TelegramInstallLink,
+      },
+      {
+        label: 'Line',
+        iconLeft: <img className="h-6 w-6" alt="" src="/images/line.svg" />,
+        href: LINEInstallLink,
+      },
+      {
+        label: 'Whatsapp',
+        iconLeft: <img className="h-6 w-6" alt="" src="/images/whatsapp.svg" />,
+        href: WhatsappInstallLink,
+      },
+    ]}
+    renderItem={(item: MobileNavItem, index) => {
+      if (item?.component) return item?.component
+
+      return (
+        <Button
+          variant="link"
+          color="neutral"
+          className="flex w-full !justify-start !text-base px-2 py-3 bg-background-surface !text-neutral-800 !font-normal hover:!text-black !h-max"
+          onClick={item?.onClick}
+          key={index}
+        >
+          {item?.href ? (
+            <a
+              className="flex focus:outline-none items-center flex-1 gap-3.5"
+              href={item?.href}
+            >
+              {item?.iconLeft && (
+                <span className="text-xl">{item?.iconLeft}</span>
+              )}
+              <Typography level="p6" className="!text-sm font-medium">
+                {item?.label}
+              </Typography>
+            </a>
+          ) : (
+            <div className="flex focus:outline-none items-center flex-1 gap-3.5">
+              {item?.iconLeft && (
+                <span className="text-xl">{item?.iconLeft}</span>
+              )}
+              <Typography level="p6" className="!text-sm font-medium">
+                {item?.label}
+              </Typography>
+            </div>
+          )}
+        </Button>
+      )
+    }}
+  />
+)
+
+export default function InstallButton({
+  title = 'Install',
+  align = 'end',
+  size = 'md',
+}: {
+  children?: React.ReactNode
+  className?: string
+  title?: React.ReactNode
+  align?: 'start' | 'center' | 'end'
+  size?: 'sm' | 'md' | 'lg'
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          className="flex items-center bg-[#25D366] hover:bg-[#25D366] hover:bg-opacity-70"
+          type="button"
+          size={size}
+        >
+          <div className="!text-sm font-medium text-white flex items-center justify-center">
+            {title || 'Install'}
+          </div>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={align} className="max-w-[256px]">
+        {installContentMenus}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

components/LandingPage/About.tsx

@@ -0,0 +1,84 @@
+import { Typography } from '@mochi-ui/core'
+import { InfoCircleOutlined } from '@mochi-ui/icons'
+import { truncate } from '@utils/string'
+
+const products = [
+  {
+    image: '/images/neko-nft.png',
+    title: 'Neko NFT 🐱',
+    description: '6,666 uniquely generated collection on the Fantom',
+  },
+  {
+    image: '/images/neko-wallet.png',
+    title: 'Wallet 👛',
+    description:
+      'Lorem ipsum dolor sit amet consectetur. Pulvinar dapibus eget fringilla facilisis. Ultrices ultricies urna a faucibus libero aliquam ultrices. Urna sit nunc amet eu dictum purus volutpat rutrum. A venenatis sit quis mauris risus dictum lobortis pulvinar. Consequat scelerisque sed eget viverra est faucibus. Vitae ac quis habitant cursus sed nec.',
+  },
+  {
+    image: '/images/neko-shop.png',
+    title: 'Shop 👕',
+    description:
+      'Lorem ipsum dolor sit amet consectetur. Pulvinar dapibus eget fringilla facilisis. Ultrices ultricies urna a faucibus libero aliquam ultrices. Urna sit nunc amet eu dictum purus volutpat rutrum. A venenatis sit quis mauris risus dictum lobortis pulvinar. Consequat scelerisque sed eget viverra est faucibus. Vitae ac quis habitant cursus sed nec.',
+  },
+  {
+    image: '/images/neko-comic.png',
+    title: 'Webcomics  🐈‍⬛',
+    description:
+      'Lorem ipsum dolor sit amet consectetur. Pulvinar dapibus eget fringilla facilisis. Ultrices ultricies urna a faucibus libero aliquam ultrices. Urna sit nunc amet eu dictum purus volutpat rutrum. A venenatis sit quis mauris risus dictum lobortis pulvinar. Consequat scelerisque sed eget viverra est faucibus. Vitae ac quis habitant cursus sed nec.',
+  },
+]
+
+export default function About() {
+  return (
+    <div id="about" className="relative bg-white px-5 py-12">
+      <div className="relative z-0 max-w-7xl mx-auto space-y-6">
+        <div className="justify-between items-center gap-4 inline-flex w-full">
+          <InfoCircleOutlined className="h-6 w-6" />
+          <Typography level="h5" className="flex-1">
+            More about Neko
+          </Typography>
+          <div className="rounded-lg justify-center items-center gap-2 flex">
+            <Typography level="p4" className="hidden md:block">
+              View all
+            </Typography>
+            <img
+              className="w-5 h-5 relative"
+              alt=""
+              src="/images/arrow-link.svg"
+            />
+          </div>
+        </div>
+        <Typography>
+          <span className="font-bold">Cyber Neko </span>
+          <span>, also known as </span>
+          <span className="font-bold">Neko</span>
+          <span>
+            , is a yellow cat with big round eyes, a fluffy tail, and a small,
+            slender body. It moves in a gentle and graceful way, as if it is
+            gliding on water. Neko is a very cute cat, with adorable and
+            mischievous expressions.
+          </span>
+        </Typography>
+
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+          {products.map((product, idx) => (
+            <div
+              key={idx}
+              className="p-6 rounded-xl border border-gray-200 flex-col justify-start items-start gap-4 inline-flex overflow-hidden"
+            >
+              <img
+                className="w-20 h-20 object-cover"
+                src={product.image}
+                alt=""
+              />
+              <Typography level="h6">{product.title}</Typography>
+              <Typography level="p4" className="text-zinc-900">
+                {truncate(product.description, 50)}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}