本番環境へのリリース

app/company/page.tsx

@@ -1,4 +1,11 @@
 import type { Metadata } from "next";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+} from "@/components/ui/table";
 
 export const metadata: Metadata = {
   title: "会社概要",
@@ -11,7 +18,9 @@ const rows: { label: string; content: React.ReactNode }[] = [
     label: "会社名",
     content: (
       <>
-        <span className="block text-sm text-gray-500">アイシイグロウス</span>
+        <span className="block text-xs text-muted-foreground">
+          アイシイグロウス
+        </span>
         株式会社 Ｉｃ－Ｇｒｏｗｔｈ
       </>
     ),
@@ -21,7 +30,7 @@ const rows: { label: string; content: React.ReactNode }[] = [
     label: "住所",
     content: (
       <>
-        <strong>本社:</strong>
+        <strong className="text-foreground">本社:</strong>
         <br />
         〒174-0056
         <br />
@@ -51,7 +60,7 @@ const rows: { label: string; content: React.ReactNode }[] = [
     label: "弊社サービス",
     content: (
       <>
-        <strong>【経理システム導入支援】</strong>
+        <strong className="text-foreground">【経理システム導入支援】</strong>
         <br />
         ・勤怠管理システム導入支援
         <br />
@@ -68,7 +77,7 @@ const rows: { label: string; content: React.ReactNode }[] = [
         ・証憑データ化システム導入支援
         <br />
         <br />
-        <strong>【経理支援】</strong>
+        <strong className="text-foreground">【経理支援】</strong>
         <br />
         ・会計データ作成業務
         <br />
@@ -81,7 +90,7 @@ const rows: { label: string; content: React.ReactNode }[] = [
         ・給与計算業務
         <br />
         <br />
-        <strong>【経営支援】</strong>
+        <strong className="text-foreground">【経営支援】</strong>
         <br />
         ・連絡ツール導入支援
         <br />
@@ -90,7 +99,7 @@ const rows: { label: string; content: React.ReactNode }[] = [
         ・MAS（経営アドバイザリーサービス）
         <br />
         <br />
-        <strong>【その他】</strong>
+        <strong className="text-foreground">【その他】</strong>
         <br />
         ・生命保険業務
         <br />
@@ -102,24 +111,33 @@ const rows: { label: string; content: React.ReactNode }[] = [
 
 export default function CompanyPage() {
   return (
-    <div className="mx-auto max-w-4xl px-5 py-12">
-      <h1 className="mb-8 text-center text-3xl font-bold text-[#215126] md:text-4xl">
-        会 社 概 要
-      </h1>
-      <table className="w-full border-collapse text-left">
-        <tbody>
-          {rows.map((row) => (
-            <tr key={row.label} className="border-b border-gray-200 align-top">
-              <th className="w-32 bg-[#f5f7fa] px-4 py-4 font-bold text-gray-800 md:w-40">
-                {row.label}
-              </th>
-              <td className="px-4 py-4 leading-loose text-gray-800">
-                {row.content}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+    <div className="bg-gradient-to-b from-muted to-background">
+      <div className="mx-auto max-w-4xl px-5 py-14 md:py-20">
+        <h1 className="mb-10 text-center text-3xl font-bold tracking-wide text-brand-success md:text-4xl">
+          会 社 概 要
+        </h1>
+        <Card className="overflow-hidden">
+          <CardContent className="px-0">
+            <Table className="text-base">
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow
+                    key={row.label}
+                    className="hover:bg-transparent has-aria-expanded:bg-transparent"
+                  >
+                    <TableCell className="w-32 bg-muted/60 px-5 py-5 align-top font-bold whitespace-normal text-foreground md:w-48">
+                      {row.label}
+                    </TableCell>
+                    <TableCell className="px-5 py-5 align-top leading-loose whitespace-normal text-foreground">
+                      {row.content}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </div>
     </div>
   );
 }

app/components/Backup.tsx

@@ -1,5 +1,7 @@
 import Link from "next/link";
 import Image from "next/image";
+import { ArrowRight } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 const cards = [
   {
@@ -20,39 +22,51 @@ const cards = [
     alt: "MAS",
     title: "経営アドバイザリーサービス",
   },
-];
+] as const;
 
 export default function Backup() {
   return (
-    <div className="bg-white px-5 py-10 text-center md:py-12">
-      <h1 className="mb-2.5 text-3xl font-bold text-[#215126] md:text-4xl">
-        事 業 概 要
-      </h1>
-      <p className="mb-7 text-base text-[#555]">
-        我々は下記サービスを導入支援いたします
-      </p>
-      <div className="flex flex-col flex-wrap justify-center gap-5 md:flex-row md:gap-[150px]">
-        {cards.map((card) => (
-          <Link
-            key={card.href}
-            href={card.href}
-            className="block max-w-full rounded-xl bg-white p-5 text-inherit shadow-md transition-all duration-300 hover:-translate-y-2.5 hover:shadow-lg md:max-w-[300px] md:min-w-[250px] md:flex-1"
-          >
-            <div className="mb-4 flex justify-center">
-              <Image
-                src={card.src}
-                alt={card.alt}
-                width={100}
-                height={100}
-                className="h-20 w-20 object-contain md:h-[100px] md:w-[100px]"
-              />
-            </div>
-            <h2 className="mb-7 pt-5 text-xl text-gray-800 md:text-2xl">
-              {card.title}
-            </h2>
-          </Link>
-        ))}
+    <section className="bg-background px-5 py-14 md:py-20">
+      <div className="mx-auto max-w-6xl text-center">
+        <h2 className="mb-3 text-3xl font-bold tracking-wide text-brand-success md:text-4xl">
+          事 業 概 要
+        </h2>
+        <p className="mb-10 text-base text-muted-foreground md:text-lg">
+          我々は下記サービスを導入支援いたします
+        </p>
+        <div className="grid gap-6 md:grid-cols-3 md:gap-8">
+          {cards.map((card) => (
+            <Link
+              key={card.href}
+              href={card.href}
+              className="group block focus-visible:outline-none"
+            >
+              <Card className="h-full transition-all duration-300 group-hover:-translate-y-1.5 group-hover:shadow-xl group-focus-visible:ring-3 group-focus-visible:ring-primary/40">
+                <CardHeader className="items-center pt-2">
+                  <div className="flex justify-center">
+                    <Image
+                      src={card.src}
+                      alt={card.alt}
+                      width={100}
+                      height={100}
+                      className="h-24 w-24 object-contain"
+                    />
+                  </div>
+                </CardHeader>
+                <CardContent className="pb-6">
+                  <CardTitle className="text-lg text-foreground md:text-xl">
+                    {card.title}
+                  </CardTitle>
+                  <span className="mt-3 inline-flex items-center gap-1 text-sm text-primary">
+                    詳しく見る
+                    <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" />
+                  </span>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
       </div>
-    </div>
+    </section>
   );
 }

app/components/Consult.tsx

@@ -1,34 +1,42 @@
-import Image from "next/image";
+import { Phone } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
 
 export default function Consult() {
   return (
-    <div className="min-h-[40vh] bg-[#f5f7fa] p-5">
-      <div className="bg-[#f5f7fa]">
-        <h2 className="mt-5 mb-0 ml-[10%] text-2xl font-bold text-[#5fc061]">
+    <section className="bg-muted px-5 py-16 md:py-20">
+      <div className="mx-auto max-w-4xl">
+        <h2 className="mb-8 text-2xl font-bold text-brand-success md:text-3xl">
           無料相談はこちらから
         </h2>
+        <Card className="overflow-hidden">
+          <CardContent className="px-0">
+            <a
+              href="tel:03-3960-3311"
+              className="group flex flex-col items-center justify-center gap-4 px-6 py-10 text-center md:flex-row md:gap-8 md:py-12"
+            >
+              <span className="relative flex size-20 items-center justify-center md:size-24">
+                <span
+                  aria-hidden
+                  className="absolute inset-0 rounded-full bg-[#5fc061]/15"
+                />
+                <span
+                  aria-hidden
+                  className="absolute inset-0 rounded-full bg-[#5fc061]/40 opacity-0 group-hover:animate-ping"
+                />
+                <Phone className="relative size-8 text-[#5fc061] group-hover:animate-[ring_0.6s_ease-in-out_infinite] md:size-10" />
+              </span>
+              <span className="flex flex-col items-center md:items-start">
+                <span className="text-sm font-medium text-muted-foreground">
+                  お電話でのお問い合わせ
+                </span>
+                <span className="text-3xl font-bold tracking-wide text-foreground md:text-4xl">
+                  03-3960-3311
+                </span>
+              </span>
+            </a>
+          </CardContent>
+        </Card>
       </div>
-      <div className="flex min-h-[20vh] flex-col items-center justify-center bg-[#f5f7fa] text-center text-gray-800">
-        <a
-          href="tel:03-3960-3311"
-          className="group relative mt-12 flex items-center justify-center overflow-hidden rounded-xl border-2 border-[#A2E699] bg-white px-5 py-4 text-gray-800 shadow-md transition-colors hover:bg-[#58cf49]"
-        >
-          <span className="relative z-10 mr-4 flex items-center">
-            <Image
-              src="/images/phone.png"
-              alt="電話アイコン"
-              width={112}
-              height={112}
-              className="h-16 w-16 object-contain md:h-28 md:w-28"
-            />
-          </span>
-          <span className="relative z-10">
-            <span className="block text-2xl font-bold text-gray-800 transition-colors group-hover:text-white md:text-3xl">
-              TEL:03-3960-3311
-            </span>
-          </span>
-        </a>
-      </div>
-    </div>
+    </section>
   );
 }

app/components/Footer.tsx

@@ -1,62 +1,65 @@
 import Link from "next/link";
 import Image from "next/image";
+import { Separator } from "@/components/ui/separator";
 
 const CONTACT_FORM_URL =
   "https://docs.google.com/forms/d/e/1FAIpQLScEXuDiU9GfCsL2Q4nmK9En8xLd8UzVYR6B95K9IKwNAL6GTQ/viewform";
 
+const COPYRIGHT_YEAR = new Date().getFullYear();
+
+const linkClass =
+  "text-base text-white/90 transition-colors hover:text-[#9b59b6] md:text-lg";
+
 export default function Footer() {
   return (
-    <footer className="bg-[#2c3841] py-2.5 text-white">
-      <div className="mx-auto flex max-w-[1200px] flex-col justify-between gap-5 px-4 md:flex-row">
-        <div className="order-3 mt-12 flex-[4] text-center md:order-1 md:text-left">
+    <footer className="bg-brand-dark text-white">
+      <div className="mx-auto flex max-w-[1200px] flex-col gap-8 px-6 py-12 md:flex-row md:items-start md:justify-between">
+        <div className="flex flex-col items-center gap-4 text-center md:items-start md:text-left">
           <Image
             src="/images/Ic-Growth_white_2.png"
             alt="Ic-Growth ロゴ"
             width={400}
             height={120}
-            className="mb-2.5 inline-block w-[70%] md:w-[40%]"
+            className="w-[60%] md:w-[280px]"
           />
           <Link
             href="/privacy"
-            className="mb-5 block text-sm text-[#9b59b6] md:pl-15"
+            className="text-sm text-[#c79be0] transition-colors hover:text-white"
           >
-            <h4 className="mb-2.5 text-base md:text-lg">
-              個人情報保護方針について
-            </h4>
+            個人情報保護方針について
           </Link>
         </div>
 
-        <div className="order-1 flex-1 md:order-2">
-          <ul className="m-0 mt-5 list-none p-0 md:mt-[70px]">
-            <li className="mb-2.5">
-              <Link
-                href="/overview"
-                className="text-base text-white transition-colors hover:text-[#9b59b6] md:text-lg"
-              >
+        <nav className="flex justify-center md:justify-end">
+          <ul className="flex flex-col gap-3">
+            <li>
+              <Link href="/overview" className={linkClass}>
                 事業概要
               </Link>
             </li>
-            <li className="mb-2.5">
-              <Link
-                href="/company"
-                className="text-base text-white transition-colors hover:text-[#9b59b6] md:text-lg"
-              >
+            <li>
+              <Link href="/company" className={linkClass}>
                 会社概要
               </Link>
             </li>
-            <li className="mb-2.5">
+            <li>
               <a
                 href={CONTACT_FORM_URL}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-base text-white transition-colors hover:text-[#9b59b6] md:text-lg"
+                className={linkClass}
               >
                 お問い合わせ
               </a>
             </li>
           </ul>
-        </div>
+        </nav>
       </div>
+
+      <Separator className="bg-white/10" />
+      <p className="px-6 py-4 text-center text-xs text-white/60">
+        © {COPYRIGHT_YEAR} Ic-Growth Co., Ltd.
+      </p>
     </footer>
   );
 }