✨Feat: メインページ作成

- メインページ作成 - ヘッダーの色を変更
m1daily · Aug 26, 2024 · 848002a · 848002a
1 parent 352753a
commit 848002a
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 13 deletions.
diff --git a/src/assets/images/daily.png b/src/assets/images/daily.png
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,11 +1,13 @@
 ---
 import ThemeIcon from '../components/ThemeIcon.astro';
 ---
+<!-- https://preline.co/examples/navigations-mega-menu.html#custom-size-with-icon-text-link-and-bg-gray-card -->
+
 <!-- ========== HEADER ========== -->
-<header class="flex flex-wrap  md:justify-start md:flex-nowrap z-50 w-full bg-white border-b border-gray-200 dark:bg-gray dark:border-neutral-700">
+<header class="flex flex-wrap  md:justify-start md:flex-nowrap z-50 w-full bg-gray-light border-b border-gray-200 dark:bg-gray dark:border-neutral-700">
   <nav class="relative max-w-[85rem] w-full mx-auto md:flex md:items-center md:justify-between md:gap-3 py-2 px-4 sm:px-6 lg:px-8">
     <div class="flex justify-between items-center gap-x-1">
-      <a class="flex-none font-semibold text-xl text-black focus:outline-none focus:opacity-80 dark:text-white" href="#" aria-label="mito1daily">mito1daily</a>
+      <a class="flex-none font-semibold text-xl text-black focus:outline-none focus:opacity-80 dark:text-white" href="/" aria-label="mito1daily">mito1daily</a>
 
       <!-- Collapse Button -->
       <button type="button" class="hs-collapse-toggle md:hidden relative size-9 flex justify-center items-center font-medium text-[12px] rounded-lg border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:border-neutral-700 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" id="hs-header-base-collapse"  aria-expanded="false" aria-controls="hs-header-base" aria-label="Toggle navigation"  data-hs-collapse="#hs-header-base" >
@@ -36,7 +38,7 @@ import ThemeIcon from '../components/ThemeIcon.astro';
                 </button>
 
                 <div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 relative md:w-[705px] lg:w-[750px] hidden z-10 top-full end-0 before:absolute before:-top-5 before:start-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-header-base-mega-menu-medium">
-                  <div class="md:mx-6 lg:mx-8 md:bg-white md:rounded-lg md:shadow-md dark:bg-gray dark:md:bg-neutral-800">
+                  <div class="md:mx-6 lg:mx-8 md:bg-gray-light md:rounded-lg md:shadow-md dark:bg-gray dark:md:bg-neutral-800">
                     <!-- Grid -->
                     <div class="pt-2 md:pt-0 grid grid-cols-1 md:grid-cols-5 gap-3 md:gap-0">
                       <div class="col-span-3 md:p-3">
@@ -48,7 +50,7 @@ import ThemeIcon from '../components/ThemeIcon.astro';
                                 <span class="ms-2.5 mb-2 font-semibold text-xs uppercase text-gray-800 dark:text-neutral-200">About us</span>
 
                                 <!-- Link -->
-                                <a class="p-2 flex gap-x-3 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 rounded-lg dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="#">
+                                <a class="p-2 flex gap-x-3 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 rounded-lg dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="/profile">
                                   <svg class="shrink-0 size-4 mt-0.5 text-gray-800 dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
                                   <div class="grow">
                                     <p class="text-sm text-gray-800 dark:text-neutral-200">プロフィール</p>
@@ -207,14 +209,14 @@ import ThemeIcon from '../components/ThemeIcon.astro';
 
           <!-- Button Group -->
           <div class=" flex flex-wrap items-center gap-x-1.5">
-            <a class="py-[7px] px-2.5 inline-flex items-center font-medium text-sm rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray focus:outline-none focus:bg-gray-100 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="#">
+            <a class="py-[7px] px-2.5 inline-flex items-center font-medium text-sm rounded-lg border border-gray-200 bg-gray-light text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray focus:outline-none focus:bg-gray-100 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="#">
               Sign in
             </a>
             <a class="py-2 px-2.5 inline-flex items-center font-medium text-sm rounded-lg bg-blue-600 text-gray-800 hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:bg-blue-600" href="#">
               Get started
             </a>
+            <ThemeIcon />
           </div>
-          <ThemeIcon />
           <!-- End Button Group -->
         </div>
       </div>

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -3,19 +3,20 @@ import Header from '../components/Header.astro';
 // import '../styles/global.css';
 const { pageTitle } = Astro.props;
 ---
-
-<html lang="jp">
+<!-- ========== MAIN CONTENT ========== -->
+<html lang="jp" id="content">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
-		<title>{pageTitle}</title>
+		<title>mito1daily - {pageTitle}</title>
 	</head>
 	<body class="min-h-screen bg-gray-white dark:bg-gray-dark dark:text-gray-light">
 		<Header />
-		<h1>{pageTitle}</h1>
+		<slot />
 	</body>
 </html>
+  <!-- ========== END MAIN CONTENT ========== -->
 
 <script>import "preline/dist/preline.js";</script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,6 +2,43 @@
 import BaseLayout from '../layouts/BaseLayout.astro';
 const pageTitle = 'Home';
 ---
-
+<!-- https://preline.co/examples/hero-sections.html#hero-with-polygon-bg-element -->
 <BaseLayout pageTitle={pageTitle}>
+    <!-- Hero -->
+    <div class="relative overflow-hidden before:absolute before:top-0 before:start-1/2 before:bg-[url('https://preline.co/assets/svg/examples/polygon-bg-element.svg')] dark:before:bg-[url('https://preline.co/assets/svg/examples-dark/polygon-bg-element.svg')] before:bg-no-repeat before:bg-top before:bg-cover before:size-full before:-z-[1] before:transform before:-translate-x-1/2">
+    	<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
+    		<!-- Title -->
+    		<div class="mt-5 max-w-3xl text-center mx-auto">
+    			<h1 class="block font-bold text-gray-800 text-4xl md:text-5xl lg:text-6xl dark:text-neutral-200">
+    				みといちでいりーのホームページ
+    			</h1>
+    		</div>
+    		<!-- End Title -->
+    		<div class="mt-5 max-w-2xl text-center mx-auto">
+    			<p class="text-lg text-gray-600 dark:text-neutral-400">水戸一高の時間割を配信するサービスです。ホームページは作成途中です。</p>
+    		</div>
+    		<!-- <div class="mt-5 flex justify-center items-center gap-x-1 sm:gap-x-3">
+    			<span class="text-sm text-gray-600 dark:text-neutral-400">Package Manager:</span>
+    			<span class="text-sm font-bold text-gray-900 dark:text-white">npm</span>
+    			<svg class="size-5 text-gray-300 dark:text-neutral-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    				<path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"/>
+    			</svg>
+    			<a class="inline-flex items-center gap-x-1 text-sm text-blue-600 decoration-2 hover:underline focus:outline-none focus:underline font-medium dark:text-blue-500" href="#">
+    				Installation Guide
+    			<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+    			</a>
+    		</div> -->
+    		<!-- Announcement Banner -->
+    		<div class="mt-5 flex justify-center">
+    			<a class="inline-flex items-center gap-x-2 bg-white border border-gray-200 text-sm text-gray-800 p-1 ps-3 rounded-full transition hover:border-gray-300 focus:outline-none focus:border-gray-300 dark:bg-gray-dark dark:border-neutral-700 dark:text-neutral-200 dark:hover:border-neutral-600 dark:focus:border-neutral-600" href="#">
+    				時間割受け取りの手順
+    				<span class="py-1.5 inline-flex justify-center items-center gap-x-2 rounded-full bg-gray-200 font-semibold text-sm text-gray-600 dark:bg-neutral-700 dark:text-neutral-400">
+    					<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+    				</span>
+    			</a>
+    		</div>
+    		<!-- End Announcement Banner -->
+    	</div>
+    </div>
+    <!-- End Hero -->
 </BaseLayout>
diff --git a/src/pages/profile.astro b/src/pages/profile.astro
@@ -0,0 +1,7 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+const pageTitle = 'Profile';
+---
+
+<BaseLayout pageTitle={pageTitle}>
+</BaseLayout>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -7,7 +7,7 @@ export default {
 	darkMode: 'class',
 	theme: {
 		colors: {
-			'white': '#f0f0f0',
+			'white': '#fcfcfc',
 			'blue': '#1fb6ff',
 			'purple': '#7e5bef',
 			'pink': '#ff49db',
@@ -16,7 +16,7 @@ export default {
 			'yellow': '#ffc82c',
 			'gray-dark': '#151720',
 			'gray': '#2e3647',
-			'gray-light': '#e6eaee',
+			'gray-light': '#f0f0f0',
 		},
 		fontFamily: {
 			sans: ['Graphik', 'sans-serif'],