desktop/my-company-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
admin
2025-12-27 18:03:17 +09:00
parent 111e1ede65
commit 16f5e4564b
26 changed files with 3148 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/pages/index.astro
View File

@@ -1,16 +1,97 @@
---
import Layout from "../layouts/Layout.astro";
const base = import.meta.env.BASE_URL || "/";
---
---
<Layout title="株式会社火和 HIYORI">
<!-- Heroセクション -->
<section
id="hero"
class="relative flex flex-col justify-center items-center text-center text-white h-[90vh] bg-cover bg-center"
style={`background-image: url('${import.meta.env.BASE_URL}images/hero-bg.png');`}
>
<!-- 半透明遮罩层（让文字清晰） -->
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
<html lang="en">
<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>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
<!-- 文字和按钮 -->
<div class="relative z-10 max-w-4xl px-6">
<h1
class="text-5xl sm:text-6xl font-extrabold mb-8 leading-tight drop-shadow-[0_3px_10px_rgba(0,0,0,0.25)]"
>
テクノロジーと創造力で、<br />未来をデザインする。
</h1>
<p class="!text-yellow-300 text-3xl font-bold">
IT × FOOD の力で、人と社会をつなぐ。
</p>
<a
href="/about"
class="inline-block mt-10 bg-gradient-to-r from-sky-400 to-blue-500 text-white font-semibold px-12 py-4 rounded-full shadow-[0_8px_24px_rgba(56,189,248,0.4)] hover:shadow-[0_10px_28px_rgba(56,189,248,0.5)] hover:scale-[1.06] transition-all duration-300"
>
会社概要を見る →
</a>
</div>
</section>
<!-- 事業紹介 -->
<section class="max-w-6xl mx-auto px-6 py-24">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">事業内容</h2>
<div class="grid md:grid-cols-2 gap-10">
<!-- IT事業部 -->
<div
class="group bg-white/80 backdrop-blur-lg border border-gray-200 rounded-2xl p-8 shadow-md hover:shadow-2xl transition-all duration-500"
>
<img
src="/my-company-site/images/system-dev.jpg"
alt="IT事業部"
class="rounded-xl w-full h-56 object-cover mb-6 group-hover:scale-105 transition-transform duration-700"
/>
<h3 class="text-2xl font-semibold text-blue-700 mb-4">IT事業部</h3>
<p class="text-gray-600 leading-relaxed mb-6">
システム開発・Web制作・クラウド導入支援など、DX推進をサポートします。
</p>
<a href={`${base}it/`} class="text-blue-600 font-medium hover:underline"
>詳しく見る →</a
>
</div>
<!-- 飲食事業部 -->
<div
class="group bg-white/80 backdrop-blur-lg border border-gray-200 rounded-2xl p-8 shadow-md hover:shadow-2xl transition-all duration-500"
>
<img
src={`${import.meta.env.BASE_URL}images/food-business.jpg`}
alt="飲食事業部"
class="rounded-xl w-full h-56 object-cover mb-6 group-hover:scale-105 transition-transform duration-700"
/>
<h3 class="text-2xl font-semibold text-blue-700 mb-4">飲食事業部</h3>
<p class="text-gray-600 leading-relaxed mb-6">
地元食材を活かしたカフェ・レストラン経営で地域に笑顔を届けます。
</p>
<a
href={`${base}food/`}
class="text-blue-600 font-medium hover:underline">詳しく見る →</a
>
</div>
</div>
</section>
<!-- お問い合わせ -->
<section
class="bg-gradient-to-br from-blue-700 via-blue-500 to-blue-400 text-white text-center py-24"
>
<h2 class="text-3xl font-bold mb-6">お問い合わせ</h2>
<p class="text-cyan-300 text-lg mb-10">
サービス・採用・提携に関するご質問など、<br class="hidden sm:block" />
お気軽にお問い合わせください。
</p>
<a
href="/my-company-site/contact/"
class="inline-block mt-10 bg-white text-blue-700 font-semibold px-8 py-3 rounded-full shadow-lg hover:shadow-xl hover:bg-blue-50 transition-all duration-300 transform hover:-translate-y-1"
>
お問い合わせフォーム →
</a>
</section>
</Layout>