98 lines
3.8 KiB
Plaintext
98 lines
3.8 KiB
Plaintext
---
|
||
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>
|
||
|
||
<!-- 文字和按钮 -->
|
||
<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-linear-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-linear-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>
|