Merge pull request #27 from mst-mkt/feat/top-page_#23

feat: add top page
mst-mkt · Jun 22, 2024 · 829da99 · 829da99
2 parents bea78a1 + 335d179
commit 829da99
Show file tree

Hide file tree

Showing 10 changed files with 440 additions and 36 deletions.
diff --git a/apps/frontend/src/components/illust/Breakfast.tsx b/apps/frontend/src/components/illust/Breakfast.tsx
diff --git a/apps/frontend/src/components/layout/Footer.tsx b/apps/frontend/src/components/layout/Footer.tsx
@@ -1,5 +1,5 @@
 export const Footer = () => (
-  <footer className="mx-auto flex w-full max-w-[600px] items-center gap-x-4 py-4">
+  <footer className="mx-auto flex w-full max-w-[600px] items-center gap-x-4 px-6 py-4">
     <p className="font-bold text-lg">ChefCam.</p>
     <div className="h-[1px] grow bg-gray-400 " />
   </footer>

diff --git a/apps/frontend/src/components/layout/Header.tsx b/apps/frontend/src/components/layout/Header.tsx
@@ -1,9 +1,12 @@
 import { IconBrandGithubFilled } from '@tabler/icons-react'
+import { Link } from '@tanstack/react-router'
 
 export const Header = () => (
-  <header className="sticky top-0 border-b bg-[#fff2] p-4 backdrop-blur-md">
-    <div className="mx-auto flex max-w-[600px] items-center gap-y-4 font-bold text-2xl ">
-      <h1 className="grow">ChefCam.</h1>
+  <header className="sticky top-0 border-b bg-[#fff2] backdrop-blur-md">
+    <div className="mx-auto flex max-w-[600px] items-center gap-y-4 px-6 py-4 font-bold text-2xl">
+      <Link to="/" className="grow transition-colors hover:text-[#4c6]">
+        ChefCam.
+      </Link>
       <a
         href="https://github.com/mst-mkt/chefcam"
         className="w-fit rounded-md p-2 transition-colors hover:bg-gray-200"

diff --git a/apps/frontend/src/components/recipe/RecipeCard.tsx b/apps/frontend/src/components/recipe/RecipeCard.tsx
@@ -9,17 +9,19 @@ type RecipeCardProps = {
 
 export const RecipeCard: FC<RecipeCardProps> = ({ url, title, image, ingredients }) => (
   <a href={url} key={url} className="group block rounded-md transition-colors hover:bg-[#ddd1]">
-    <div className="flex gap-x-4">
+    <div className="flex h-fit gap-x-2 sm:gap-x-4">
       <img
         src={image}
         alt={title}
-        className="block aspect-square h-[8rem] rounded-md object-cover shadow-md"
+        className="block aspect-square h-20 rounded-md object-cover shadow-md sm:h-[8rem]"
       />
-      <div className="flex shrink grow flex-col gap-y-2 overflow-hidden p-4">
-        <h3 className="truncate font-bold text-lg transition-colors group-hover:text-[#0a2]">
+      <div className="flex shrink grow flex-col justify-center gap-y-2 overflow-hidden px-4">
+        <h3 className="truncate font-bold transition-colors group-hover:text-[#0a2] sm:text-lg">
           {title}
         </h3>
-        <p className="line-clamp-2 transition-colors">{ingredients.join(', ')}</p>
+        <p className="line-clamp-2 text-sm transition-colors sm:text-base">
+          {ingredients.join(', ')}
+        </p>
       </div>
     </div>
   </a>

diff --git a/apps/frontend/src/components/upload/ImagePicker.tsx b/apps/frontend/src/components/upload/ImagePicker.tsx
@@ -70,8 +70,9 @@ export const ImagePicker: FC<ImagePickerProps> = ({
               accept="image/*"
               multiple
             />
-            <p>
-              ファイルをドロップするか、
+            <p className="whitespace-pre-wrap break-keep text-center">
+              ファイルをドロップするか
+              <wbr />
               <span className="font-bold text-[#486]">ここをクリック</span>
             </p>
           </>

diff --git a/apps/frontend/src/routeTree.gen.ts b/apps/frontend/src/routeTree.gen.ts
@@ -8,30 +8,25 @@
 
 // This file is auto-generated by TanStack Router
 
-import { createFileRoute } from '@tanstack/react-router'
-
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as AppImport } from './routes/_app'
+import { Route as IndexImport } from './routes/index'
 import { Route as AppUploadImport } from './routes/_app/upload'
 import { Route as AppRecipeImport } from './routes/_app/recipe'
 
-// Create Virtual Routes
-
-const IndexLazyImport = createFileRoute('/')()
-
 // Create/Update Routes
 
 const AppRoute = AppImport.update({
   id: '/_app',
   getParentRoute: () => rootRoute,
 } as any)
 
-const IndexLazyRoute = IndexLazyImport.update({
+const IndexRoute = IndexImport.update({
   path: '/',
   getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
+} as any)
 
 const AppUploadRoute = AppUploadImport.update({
   path: '/upload',
@@ -51,7 +46,7 @@ declare module '@tanstack/react-router' {
       id: '/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof IndexLazyImport
+      preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
     '/_app': {
@@ -81,7 +76,7 @@ declare module '@tanstack/react-router' {
 // Create and export the route tree
 
 export const routeTree = rootRoute.addChildren({
-  IndexLazyRoute,
+  IndexRoute,
   AppRoute: AppRoute.addChildren({ AppRecipeRoute, AppUploadRoute }),
 })
 
@@ -98,7 +93,7 @@ export const routeTree = rootRoute.addChildren({
       ]
     },
     "/": {
-      "filePath": "index.lazy.tsx"
+      "filePath": "index.tsx"
     },
     "/_app": {
       "filePath": "_app.tsx",

diff --git a/apps/frontend/src/routes/_app.tsx b/apps/frontend/src/routes/_app.tsx
@@ -9,7 +9,7 @@ export const Route = createFileRoute('/_app')({
 const AppLayout = () => (
   <div className="flex min-h-svh flex-col gap-y-12">
     <Header />
-    <main className="mx-auto flex w-full max-w-[600px] grow flex-col gap-y-8">
+    <main className="mx-auto flex w-full max-w-[600px] grow flex-col gap-y-8 px-6">
       <Outlet />
     </main>
     <Footer />

diff --git a/apps/frontend/src/routes/index.lazy.tsx b/apps/frontend/src/routes/index.lazy.tsx
diff --git a/apps/frontend/src/routes/index.tsx b/apps/frontend/src/routes/index.tsx
@@ -0,0 +1,33 @@
+import { IconBrandGithubFilled } from '@tabler/icons-react'
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { IllustBreakfast } from '../components/illust/Breakfast'
+
+export const Route = createFileRoute('/')({
+  component: () => <Home />,
+})
+
+const Home = () => (
+  <>
+    <div className="flex h-screen flex-col items-center justify-center text-center text-black">
+      <div className="animate-fadeIn text-center">
+        <h1 className="animate-slideInDown font-bold text-5xl text-gray-900">ChefCam.</h1>
+        <p className="mt-4 animate-fadeIn text-gray-700 text-lg delay-500">
+          毎日レシピに悩む、あなたへ
+        </p>
+      </div>
+      <IllustBreakfast height={400} width={450} className="max-h-[90vw] max-w-[90vw]" />
+      <Link
+        to="/upload"
+        className="hover:-translate-y-1 py- mb-5 transform animate-fadeIn rounded-full bg-[#6c8] px-8 py-3 text-lg text-white shadow-lg transition hover:bg-[#5b7] "
+      >
+        始める
+      </Link>
+    </div>
+    <a
+      href="https://github.com/mst-mkt/monthly-vol7"
+      className="absolute right-4 bottom-4 w-fit rounded-md p-2 transition-colors hover:bg-gray-200"
+    >
+      <IconBrandGithubFilled size={20} />
+    </a>
+  </>
+)
diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
@@ -2,7 +2,22 @@
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideInDown: {
+          '0%': { transform: 'translateY(-100%)' },
+          '100%': { transform: 'translateY(0)' },
+        },
+      },
+      animation: {
+        fadeIn: 'fadeIn 2s ease-in-out',
+        slideInDown: 'slideInDown 1s ease-out',
+      },
+    },
   },
   plugins: [require('tailwind-scrollbar')({ nocompatible: true })],
 }