Implement canvas section in homepage & refactoring

ArkStudiosLLC · Jan 22, 2024 · 2e2100f · 2e2100f
1 parent 7752849
commit 2e2100f
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 16 deletions.
diff --git a/public/images/Ark.jpg b/public/images/Ark.jpg
diff --git a/public/images/Ark.webp b/public/images/Ark.webp
diff --git a/public/app-icons/BitRemote.png → public/images/app-icons/BitRemote.png b/public/app-icons/BitRemote.png → public/images/app-icons/BitRemote.png
diff --git a/public/images/app-icons/BitRemote.webp b/public/images/app-icons/BitRemote.webp
diff --git a/src/app/(overview)/page.tsx b/src/app/(overview)/page.tsx
@@ -1,9 +1,37 @@
+import arkFallbackImage from '@/../public/images/Ark.jpg'
+import arkImage from '@/../public/images/Ark.webp'
+
 import Footer from '../ui/components/footer'
 import NavigationBar from '../ui/components/navigation-bar'
 
-function WorkInProgress() {
+function CanvasSection() {
+  return (
+    <div className='flex w-full flex-col items-center justify-center gap-14 rounded-3xl px-6 md:px-10 lg:px-10 xl:px-16 2xl:max-w-[128rem] 2xl:px-24'>
+      <picture>
+        <source srcSet={arkImage.src} type='image/webp'></source>
+        <img
+          src={arkFallbackImage.src}
+          alt='Ark and sea'
+          loading='lazy'
+          decoding='async'
+          className='h-96 rounded-3xl object-cover md:h-[32rem] lg:h-[42rem] 2xl:h-auto'
+        />
+      </picture>
+      <div className='w-limited flex flex-col items-center *:whitespace-nowrap *:text-3xl *:font-black *:sm:text-4xl *:xl:text-5xl *:2xl:text-6xl *:dark:text-cyan-100'>
+        <p className='hidden lg:block'>選び抜かれたソリューション、未来への方舟。</p>
+        <p className='block text-left lg:hidden'>
+          選び抜かれたソリューション、
+          <br />
+          未来への方舟。
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function ProductsSection() {
   return (
-    <div className='flex h-screen flex-col items-center justify-center gap-5 pt-14'>
+    <div className='w-limited flex h-[32rem] flex-col items-center justify-center gap-5 pt-14'>
       <p className='text-4xl font-bold sm:text-6xl'>ただいま開発中</p>
       <p className='text-center font-extralight sm:text-xl'>
         このウェブサイトは近日公開予定です。
@@ -16,9 +44,12 @@ function WorkInProgress() {
 
 export default function Page() {
   return (
-    <div className='flex select-none flex-col justify-center'>
+    <div className='flex select-none flex-col'>
       <NavigationBar />
-      <WorkInProgress />
+      <div className='mt-14 flex flex-col items-center gap-32 divide-y divide-zinc-300 pb-32 pt-8 dark:divide-cyan-800 [&>*:not(:first-child)]:pt-32'>
+        <CanvasSection />
+        <ProductsSection />
+      </div>
       <Footer />
     </div>
   )

diff --git a/src/app/products/data.ts b/src/app/products/data.ts
@@ -1,6 +1,5 @@
-import { StaticImageData } from 'next/image'
-
-import bitRemoteIcon from '@/../public/app-icons/BitRemote.png'
+import bitRemoteFallbackIcon from '@/../public/images/app-icons/BitRemote.png'
+import bitRemoteIcon from '@/../public/images/app-icons/BitRemote.webp'
 
 export interface PlatformInfo {
   name: 'iOS' | 'iPadOS' | 'macOS' | 'visionOS' | 'watchOS' | 'tvOS'
@@ -16,7 +15,8 @@ export interface PriceInfo {
 export interface AppInfo {
   title: string
   subtitle: string
-  icon: StaticImageData
+  iconSource: string
+  iconFallbackSource: string
   websiteLink: string
   description: string
   priceInfos: PriceInfo[]
@@ -27,7 +27,8 @@ export const appInfos: AppInfo[] = [
   {
     title: 'BitRemote',
     subtitle: 'ダウンロードタスク遠隔管理アプリ',
-    icon: bitRemoteIcon,
+    iconSource: bitRemoteIcon.src,
+    iconFallbackSource: bitRemoteFallbackIcon.src,
     websiteLink: 'https://bitremote.app',
     description: `BitRemote は、Apple プラットフォームに最適化され、ダウンロードタスクを効率的かつ簡単に管理するツールです。安全性を重視し、クライアント※のログイン情報は弊社サーバーではなく、デバイス内部や iCloud に安全に保管。大切なデータは、いつでもどこでも、お客様だけの手の中に。
 

diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
@@ -13,7 +13,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Metadata } from 'next'
-import Image from 'next/image'
 import React from 'react'
 
 import { AppInfo, appInfos, PriceInfo, PlatformInfo } from './data'
@@ -29,11 +28,16 @@ function AppCards() {
     return (
       <div className='flex gap-4 sm:gap-6 lg:gap-8 xl:gap-10 2xl:gap-12'>
         <div className='aspect-square shrink-0'>
-          <Image
-            src={appInfo.icon}
-            alt={appInfo.title}
-            className='aspect-square w-24 sm:w-32'
-          />
+          <picture>
+            <source srcSet={appInfo.iconSource} type='image/webp'></source>
+            <img
+              src={appInfo.iconFallbackSource}
+              alt={appInfo.title}
+              loading='lazy'
+              decoding='async'
+              className='aspect-square w-24 sm:w-32'
+            />
+          </picture>
         </div>
         <div className='flex w-full flex-col items-start justify-between gap-2 sm:gap-6'>
           <div className='select-text'>
@@ -214,7 +218,7 @@ function SubsectionHeader({ title }: { title: string }) {
 
 export default function Page() {
   return (
-    <div className='flex h-screen flex-col justify-between'>
+    <div className='flex flex-col'>
       <NavigationBar />
       <div className='mt-14 flex select-none justify-center'>
         <div className='w-limited pb-32 pt-14 md:pt-20'>