From 2ec224913f6aee0b5505d5dc6612f8bef33059d3 Mon Sep 17 00:00:00 2001 From: r-ikeda Date: Tue, 5 May 2026 06:48:38 +0900 Subject: [PATCH 1/6] =?UTF-8?q?CRA=20=E3=81=8B=E3=82=89=20Next.js=2015=20(?= =?UTF-8?q?App=20Router)=20+=20TypeScript=20+=20Tailwind=20v4=20=E3=81=AB?= =?UTF-8?q?=E7=A7=BB=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CRA は 2025-02-14 に React チームが正式に非推奨化しているため、現行の推奨フレームワークへ刷新する。 あわせて手動デプロイで属人化していた運用を GitHub Actions の CI/CD に置き換える。 主な変更: - フレームワーク: react-scripts 5 → next 15 / react 19 / TypeScript 5 - スタイル: 各コンポーネントの個別 CSS → Tailwind CSS v4 (@import "tailwindcss" + @theme) - 配信: SPA → output: 'export' + trailingSlash: true で SSG（CloudFront の Custom Error Response 不要に） - ルーティング: react-router-dom → Next.js App Router (app//page.tsx) - SEO: 各 page.tsx に metadata、app/sitemap.ts と app/robots.ts を追加 - CI/CD: .github/workflows/ci.yml (PR 検証) と deploy.yml (prod push で S3 sync + CloudFront invalidation, OIDC で IAM Role assume) - 整理: src/Gabage/, i18next/react-scroll/gh-pages 等の死蔵依存、homepage フィールドを削除 - 画像: src/assets → public/images/、next/image 経由で参照 - ブランド: Ic-Growth をメタデータで復元（favicon 素材は受領後差し替え） CLAUDE.md は新スタックとデプロイ手順、ブランチ運用 (develop / main / prod) に書き換え。 Co-Authored-By: Claude Opus 4.7 (1M context) --- .eslintrc.json | 3 + .github/workflows/ci.yml | 22 + .github/workflows/deploy.yml | 43 + .gitignore | 9 +- .nvmrc | 1 + CLAUDE.md | 137 +- app/company/page.tsx | 125 + app/components/Backup.tsx | 58 + app/components/Consult.tsx | 34 + app/components/Footer.tsx | 62 + app/components/Header.tsx | 102 + app/components/ScrollToTop.tsx | 14 + app/components/SectionComponent1.tsx | 35 + app/globals.css | 29 + app/layout.tsx | 49 + app/overview/page.tsx | 180 + app/page.tsx | 13 + app/privacy/page.tsx | 86 + app/robots.ts | 10 + app/sitemap.ts | 15 + next.config.ts | 12 + package-lock.json | 19824 ++++------------ package.json | 61 +- postcss.config.mjs | 7 + .../images}/Ic-Growth_color_1.png | Bin .../images}/Ic-Growth_color_2.png | Bin .../images}/Ic-Growth_white_1.png | Bin .../images}/Ic-Growth_white_2.png | Bin {src/assets => public/images}/MAS.png | Bin {src/assets => public/images}/backup.png | Bin {src/assets => public/images}/backup_ec.png | Bin .../images}/backup_system.png | Bin {src/assets => public/images}/logo.png | Bin {src/assets => public/images}/logo_side.png | Bin {src/assets => public/images}/phone.png | Bin public/index.html | 43 - .../{manifest.json => manifest.webmanifest} | 14 +- public/robots.txt | 3 - src/App.css | 40 - src/App.js | 42 - .../BusinessSupport.css | 74 - .../BusinessSupport.jsx | 37 - src/Gabage/MASComponents/MAS.css | 74 - src/Gabage/MASComponents/MAS.jsx | 43 - .../SystemSupportComponents/SystemSupport.css | 83 - .../SystemSupportComponents/SystemSupport.jsx | 32 - src/ScrollToTop.js | 14 - src/components/BackupComponents/Backup.css | 150 - src/components/BackupComponents/Backup.jsx | 53 - src/components/CompanyComponents/Company.css | 105 - src/components/CompanyComponents/Company.jsx | 85 - src/components/ConsultComponents/Consult.css | 188 - src/components/ConsultComponents/Consult.jsx | 26 - src/components/FooterComponents/Footer.css | 170 - src/components/FooterComponents/Footer.jsx | 40 - src/components/HeaderComponents/Header.css | 169 - src/components/HeaderComponents/Header.jsx | 56 - .../HomepageComponents/Homepage.css | 0 .../HomepageComponents/Homepage.jsx | 15 - .../OverviewComponents/Overview.css | 191 - .../OverviewComponents/Overview.jsx | 208 - src/components/PrivacyComponents/Privacy.css | 90 - src/components/PrivacyComponents/Privacy.jsx | 76 - .../SectionComponent1/SectionComponent1.css | 135 - .../SectionComponent1/SectionComponent1.jsx | 28 - src/index.css | 13 - src/index.js | 13 - src/setupTests.js | 5 - tsconfig.json | 23 + 69 files changed, 5681 insertions(+), 17588 deletions(-) create mode 100644 .eslintrc.json create mode 100644 .github/workflows/ci.yml create mode 100644 .github/workflows/deploy.yml create mode 100644 .nvmrc create mode 100644 app/company/page.tsx create mode 100644 app/components/Backup.tsx create mode 100644 app/components/Consult.tsx create mode 100644 app/components/Footer.tsx create mode 100644 app/components/Header.tsx create mode 100644 app/components/ScrollToTop.tsx create mode 100644 app/components/SectionComponent1.tsx create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/overview/page.tsx create mode 100644 app/page.tsx create mode 100644 app/privacy/page.tsx create mode 100644 app/robots.ts create mode 100644 app/sitemap.ts create mode 100644 next.config.ts create mode 100644 postcss.config.mjs rename {src/assets => public/images}/Ic-Growth_color_1.png (100%) rename {src/assets => public/images}/Ic-Growth_color_2.png (100%) rename {src/assets => public/images}/Ic-Growth_white_1.png (100%) rename {src/assets => public/images}/Ic-Growth_white_2.png (100%) rename {src/assets => public/images}/MAS.png (100%) rename {src/assets => public/images}/backup.png (100%) rename {src/assets => public/images}/backup_ec.png (100%) rename {src/assets => public/images}/backup_system.png (100%) rename {src/assets => public/images}/logo.png (100%) rename {src/assets => public/images}/logo_side.png (100%) rename {src/assets => public/images}/phone.png (100%) delete mode 100644 public/index.html rename public/{manifest.json => manifest.webmanifest} (59%) delete mode 100644 public/robots.txt delete mode 100644 src/App.css delete mode 100644 src/App.js delete mode 100644 src/Gabage/BusinessSupportComponents/BusinessSupport.css delete mode 100644 src/Gabage/BusinessSupportComponents/BusinessSupport.jsx delete mode 100644 src/Gabage/MASComponents/MAS.css delete mode 100644 src/Gabage/MASComponents/MAS.jsx delete mode 100644 src/Gabage/SystemSupportComponents/SystemSupport.css delete mode 100644 src/Gabage/SystemSupportComponents/SystemSupport.jsx delete mode 100644 src/ScrollToTop.js delete mode 100644 src/components/BackupComponents/Backup.css delete mode 100644 src/components/BackupComponents/Backup.jsx delete mode 100644 src/components/CompanyComponents/Company.css delete mode 100644 src/components/CompanyComponents/Company.jsx delete mode 100644 src/components/ConsultComponents/Consult.css delete mode 100644 src/components/ConsultComponents/Consult.jsx delete mode 100644 src/components/FooterComponents/Footer.css delete mode 100644 src/components/FooterComponents/Footer.jsx delete mode 100644 src/components/HeaderComponents/Header.css delete mode 100644 src/components/HeaderComponents/Header.jsx delete mode 100644 src/components/HomepageComponents/Homepage.css delete mode 100644 src/components/HomepageComponents/Homepage.jsx delete mode 100644 src/components/OverviewComponents/Overview.css delete mode 100644 src/components/OverviewComponents/Overview.jsx delete mode 100644 src/components/PrivacyComponents/Privacy.css delete mode 100644 src/components/PrivacyComponents/Privacy.jsx delete mode 100644 src/components/SectionComponent1/SectionComponent1.css delete mode 100644 src/components/SectionComponent1/SectionComponent1.jsx delete mode 100644 src/index.css delete mode 100644 src/index.js delete mode 100644 src/setupTests.js create mode 100644 tsconfig.json diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..a197136 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,22 @@ +name: CI + +on: + pull_request: + branches: [develop, main, prod] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version-file: .nvmrc + cache: npm + + - run: npm ci + + - run: npm run lint + + - run: npm run build diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..ed82283 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,43 @@ +name: Deploy to ic-gr.net + +on: + push: + branches: [prod] + workflow_dispatch: + +permissions: + id-token: write + contents: read + +concurrency: + group: deploy-prod + cancel-in-progress: false + +jobs: + deploy: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version-file: .nvmrc + cache: npm + + - run: npm ci + + - run: npm run build + + - uses: aws-actions/configure-aws-credentials@v4 + with: + role-to-assume: arn:aws:iam::058264181659:role/github-actions-ic-gr-deploy + aws-region: ap-northeast-1 + + - name: Sync to S3 + run: aws s3 sync out/ s3://ic-gr.com/ --delete + + - name: Invalidate CloudFront cache (ic-gr.net) + run: | + aws cloudfront create-invalidation \ + --distribution-id EHFD30ZL5XZ0U \ + --paths "/*" diff --git a/.gitignore b/.gitignore index 4d29575..a4ef5a1 100644 --- a/.gitignore +++ b/.gitignore @@ -8,8 +8,13 @@ # testing /coverage -# production -/build +# next.js +/.next/ +/out/ + +# typescript +*.tsbuildinfo +next-env.d.ts # misc .DS_Store diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..209e3ef --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +20 diff --git a/CLAUDE.md b/CLAUDE.md index f6f0ad8..7d2b72c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,92 +1,119 @@ -# neko — Ic-Growth コーポレートサイト +# ic-gr-website — Ic-Growth コーポレートサイト -Create React App 製の SPA。本番は AWS S3 + CloudFront で `https://www.ic-gr.net/` に公開。 +Next.js 15 (App Router) + React 19 + TypeScript + Tailwind CSS v4 製の静的サイト。`https://www.ic-gr.net/` で公開。 + +> 旧称 `neko`。リポジトリ名は `ic-gr-website` にリネーム済み（GitHub の自動リダイレクトで旧 URL も一定期間有効）。 ## 開発コマンド ```bash +nvm use # .nvmrc に従って Node 20 を選択 npm install -npm start # http://localhost:3000 -npm run build # build/ に成果物を出力 -npm test +npm run dev # http://localhost:3000 +npm run build # next build （static export → out/） +npm run lint ``` -## デプロイ（本番: ic-gr.net） +## デプロイ + +`prod` ブランチへの push で GitHub Actions が自動デプロイする（手動操作は不要）。 + +``` +develop ← 機能ブランチからの PR を集約 + │ + ▼ + main ← ステージング想定 + │ + ▼ + prod ← push されると本番デプロイ +``` -参考記事: https://qiita.com/ushi_osushi/items/a32d7b710567c2313faa （S3+CloudFront+Route53+ACM の手動構築ガイド。CI/CDは無く手動デプロイ） +ワークフロー: +- `.github/workflows/ci.yml` — PR 時に `npm run lint` + `npm run build` を実行 +- `.github/workflows/deploy.yml` — `prod` push をトリガに `next build` → `aws s3 sync out/` → CloudFront invalidation -AWS プロファイル: `ic-gr`（アカウント `058264181659`） +GitHub Actions は OIDC で IAM Role `arn:aws:iam::058264181659:role/github-actions-ic-gr-deploy` を assume するため、リポジトリに AWS シークレットは持たない。 -```bash -# 1. ビルド（相対パスで出すため PUBLIC_URL を上書き） -PUBLIC_URL=. npm run build +### 緊急時の手動デプロイ（フォールバック） -# 2. S3 同期（バケットは ap-northeast-1 / 非公開・OAC経由） -aws --profile ic-gr s3 sync build/ s3://ic-gr.com/ --delete +ローカルから `aws --profile ic-gr` で同じことを実行できる。 -# 3. CloudFront キャッシュ無効化（ic-gr.net 用） +```bash +npm ci +npm run build +aws --profile ic-gr s3 sync out/ s3://ic-gr.com/ --delete aws --profile ic-gr cloudfront create-invalidation \ --distribution-id EHFD30ZL5XZ0U --paths "/*" ``` -### インフラ構成（AWS 上の実体） +## インフラ構成（AWS 上の実体） | リソース | 値 | |---|---| -| S3 バケット | `ic-gr.com`（ap-northeast-1、非公開、OAC からのみ `s3:GetObject` 許可） | +| AWS アカウント | `058264181659`（CLI プロファイル `ic-gr`） | +| S3 バケット | `ic-gr.com`（ap-northeast-1、非公開、CloudFront OAC 経由のみ `s3:GetObject` 許可） | | CloudFront（本番） | `EHFD30ZL5XZ0U` / `d2sot6ky3ie96o.cloudfront.net` — alias: `ic-gr.net`, `www.ic-gr.net`, `*.ic-gr.net` | -| CloudFront（旧/併設） | `E3CUYP7CXV3V06` / `d16tpwwtsnlv00.cloudfront.net` — alias: `ic-gr.com`, `www.ic-gr.com`, `*.ic-gr.com` | +| CloudFront（旧 `.com` 系） | `E3CUYP7CXV3V06` / `d16tpwwtsnlv00.cloudfront.net` — alias: `ic-gr.com`, `www.ic-gr.com`, `*.ic-gr.com`（同じ S3 を origin） | | Route53 ホストゾーン | `ic-gr.net.`（A レコードで CloudFront にエイリアス、ワイルドカードあり） | +| デプロイ用 IAM Role | `github-actions-ic-gr-deploy`（GitHub OIDC で `repo:angurodon/ic-gr-website:ref:refs/heads/prod` のみ信頼） | | Default Root Object | `index.html` | -`.com` ドメインの CloudFront も同じ S3 バケットを向いているので、`s3 sync` 後は両方の invalidation を打つかどうか判断する。 - -### `package.json` の `homepage` に注意 - -`homepage` が `https://angurodon.github.io/neko` のままになっている（旧 GitHub Pages 配信の名残）。 -そのままビルドすると CRA がアセットを `/neko/static/...` 配下に出力し、ic-gr.net では 404 になる。 -**AWS デプロイ時は必ず `PUBLIC_URL=.` か `homepage: "."` で上書きしてビルドする**こと。 -S3 上の `index.html` は実際に相対パス（`./static/js/...`）でビルドされている。 - -### `npm run deploy` は AWS 用ではない - -`package.json` の `deploy` スクリプトは `gh-pages -d build`（GitHub Pages 用）。AWS デプロイには使わない。 +`.com` ドメイン側の CloudFront には今回のデプロイでは invalidation を打っていないため、`*.ic-gr.com` でも即時反映したい場合は手動で `--distribution-id E3CUYP7CXV3V06` の invalidation を実行する。 -## ルーティング上の既知の制約 +### SPA 直リンク問題は解消済み -- `App.js` は `react-router-dom` の `BrowserRouter` を使用。ルート: `/`, `/neko`, `/overview`, `/company`, `/privacy`。 -- CloudFront のカスタムエラーレスポンス未設定。`/overview` 等の**直リンク（リロード）は S3 から 403/404 が返る**。現状はヘッダのリンク経由でのみ遷移可能。 -- 直リンクを動かすには CloudFront に `403/404 → /index.html (200)` の Custom Error Response を追加する必要がある。 +旧 CRA では CloudFront に Custom Error Response 未設定だったため `/overview` などのリロードで 403 を返していたが、Next.js の static export + `trailingSlash: true` で各ルートが `out/overview/index.html` として生成されるため、ハードリロードでも 200 が返る。 ## ディレクトリ構成 ``` -src/ -├── App.js # ルーティング -├── index.js / index.css # エントリ -├── ScrollToTop.js # ルート遷移時のスクロール初期化 -├── assets/ # 画像（ロゴ、サービス紹介画像） -├── components/ -│ ├── HeaderComponents/ # ヘッダ（ハンバーガーメニュー、外部 Google フォームへのリンク） -│ ├── FooterComponents/ -│ ├── HomepageComponents/ # `/` と `/neko` の本体。SectionComponent1 + Backup + Consult を組み合わせる -│ ├── SectionComponent1/ # トップのヒーロー部 -│ ├── BackupComponents/ # サービス: バックアップ系 -│ ├── ConsultComponents/ # サービス: コンサル系 -│ ├── OverviewComponents/ # /overview 事業概要 -│ ├── CompanyComponents/ # /company 会社概要 -│ └── PrivacyComponents/ # /privacy -└── Gabage/ # 旧コンポーネント（typo: Garbage ではなく Gabage）。SystemSupport / BusinessSupport / MAS。App.js でコメントアウト中。削除可否を確認してから消すこと +ic-gr-website/ +├── app/ +│ ├── layout.tsx # ルートレイアウト（Header + Footer + ScrollToTop + metadata） +│ ├── page.tsx # / （SectionComponent1 + Backup + Consult） +│ ├── overview/page.tsx # /overview （事業概要 + 3 セクション） +│ ├── company/page.tsx # /company （会社概要テーブル） +│ ├── privacy/page.tsx # /privacy （個人情報保護方針） +│ ├── sitemap.ts # ビルド時に sitemap.xml を生成 +│ ├── robots.ts # ビルド時に robots.txt を生成 +│ ├── globals.css # Tailwind v4 + CSS 変数（ブランドカラー / フォント） +│ └── components/ +│ ├── Header.tsx # 'use client' （ハンバーガー開閉） +│ ├── Footer.tsx +│ ├── ScrollToTop.tsx # 'use client' （usePathname でスクロールリセット） +│ ├── SectionComponent1.tsx +│ ├── Backup.tsx # トップの3カード（/overview#... に遷移） +│ └── Consult.tsx # 電話相談バナー +├── public/ +│ ├── favicon.ico # ※ Ic-Growth ブランドの ico に差し替え予定 +│ ├── apple-touch-icon.png # ※ ブランド資産入手後に追加 +│ ├── logo192.png / logo512.png +│ ├── manifest.webmanifest +│ └── images/ # next/image で参照する画像群 +├── next.config.ts # output: 'export', trailingSlash: true, images.unoptimized: true +├── tsconfig.json +├── postcss.config.mjs # @tailwindcss/postcss +├── .nvmrc # 20 +└── .github/workflows/ + ├── ci.yml + └── deploy.yml ``` -問い合わせは外部 Google Form（Header.jsx 内に URL ハードコード）。 +問い合わせは外部 Google Form（`Header.tsx` / `Footer.tsx` 内に URL ハードコード）。 -## 未使用の依存関係 +## ブランド資産（未確定） -`i18next` 系・`react-i18next` 系・`react-scroll` 系が `package.json` にあるがコード側で `import` されていない。多言語対応や smooth scroll を再導入する予定が無いなら、`npm uninstall` で整理して構わない。 +旧 CRA 版から失われたタイトル `Ic-Growth` と独自 favicon は、ユーザーから素材を受領後に以下を差し替える： +- `public/favicon.ico`（マルチサイズ ICO 推奨: 16/32/48） +- `public/apple-touch-icon.png` (180×180) +- `public/logo192.png` (192×192) +- `public/logo512.png` (512×512) +タイトルとメタ description は `app/layout.tsx` で定義済み。 ## ブランチ運用 -- 本流: `main` -- 機能別ブランチ（`form`, `phone`, `footer`, `route`, `sumaho`, `fix-1` 等）を切って PR → squash/merge する流れ。 -- `gh-pages` ブランチは旧 GitHub Pages 配信の成果物ブランチ。AWS 配信に移行済みのため通常触らない。 +- `develop` （デフォルト）: 機能ブランチからの PR を集約 +- `main`: ステージング相当 +- `prod`: push されると本番デプロイ +- 旧 `gh-pages` ブランチは GitHub Pages 時代の遺物。今は不要なので削除して問題ない +- 機能ブランチは `feature/` 命名で `develop` から切る diff --git a/app/company/page.tsx b/app/company/page.tsx new file mode 100644 index 0000000..866ed73 --- /dev/null +++ b/app/company/page.tsx @@ -0,0 +1,125 @@ +import type { Metadata } from "next"; + +export const metadata: Metadata = { + title: "会社概要", + description: + "株式会社 Ic-Growth の会社概要。所在地、設立、代表者、事業内容などをご案内します。", +}; + +const rows: { label: string; content: React.ReactNode }[] = [ + { + label: "会社名", + content: ( + <> + アイシイグロウス + 株式会社 Ｉｃ－Ｇｒｏｗｔｈ + + ), + }, + { label: "法人番号", content: "8011401022351" }, + { + label: "住所", + content: ( + <> + 本社: +
+ 〒174-0056 +
+ 東京都板橋区志村１丁目３０番１５号 +
+
+ Tel:03-3960-3311 + + ), + }, + { label: "設立", content: "令和2年（2020年）1月22日" }, + { label: "代表者", content: "前田 剛" }, + { label: "資本金", content: "800千円（2024年月日現在）" }, + { + label: "事業内容", + content: ( + <> + 経理支援 +
+ 経理システムの導入支援 +
+ 経理分析 + + ), + }, + { + label: "弊社サービス", + content: ( + <> + 【経理システム導入支援】 +
+ ・勤怠管理システム導入支援 +
+ ・給与計算システム導入支援 +
+ ・会計システム導入支援 +
+ ・請求書発行システム導入支援 +
+ ・経費精算システム導入支援 +
+ ・証憑管理システム導入支援 +
+ ・証憑データ化システム導入支援 +
+
+ 【経理支援】 +
+ ・会計データ作成業務 +
+ ・経理指導 +
+ ・請求書発行業務 +
+ ・受取請求書等整理業務 +
+ ・給与計算業務 +
+
+ 【経営支援】 +
+ ・連絡ツール導入支援 +
+ ・その他システムのご案内 +
+ ・MAS（経営アドバイザリーサービス） +
+
+ 【その他】 +
+ ・生命保険業務 +
+ ・相続時資料回収業務 + + ), + }, +]; + +export default function CompanyPage() { + return ( +
+

+ 会 社 概 要 +

+ + + {rows.map((row) => ( + + + + + ))} + +
+ {row.label} + + {row.content} +
+
+ ); +} diff --git a/app/components/Backup.tsx b/app/components/Backup.tsx new file mode 100644 index 0000000..00ff997 --- /dev/null +++ b/app/components/Backup.tsx @@ -0,0 +1,58 @@ +import Link from "next/link"; +import Image from "next/image"; + +const cards = [ + { + href: "/overview#system-support", + src: "/images/backup_system.png", + alt: "経理システムの導入支援", + title: "経理システムの導入支援", + }, + { + href: "/overview#business-support", + src: "/images/backup_ec.png", + alt: "経理支援アイコン", + title: "経理支援", + }, + { + href: "/overview#msa-support", + src: "/images/MAS.png", + alt: "MAS", + title: "経営アドバイザリーサービス", + }, +]; + +export default function Backup() { + return ( +
+

+ 事 業 概 要 +

+

+ 我々は下記サービスを導入支援いたします +

+
+ {cards.map((card) => ( + +
+ {card.alt} +
+

+ {card.title} +

+ + ))} +
+
+ ); +} diff --git a/app/components/Consult.tsx b/app/components/Consult.tsx new file mode 100644 index 0000000..d19995f --- /dev/null +++ b/app/components/Consult.tsx @@ -0,0 +1,34 @@ +import Image from "next/image"; + +export default function Consult() { + return ( +
+
+

+ 無料相談はこちらから +

+
+ +
+ ); +} diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx new file mode 100644 index 0000000..a3d6c09 --- /dev/null +++ b/app/components/Footer.tsx @@ -0,0 +1,62 @@ +import Link from "next/link"; +import Image from "next/image"; + +const CONTACT_FORM_URL = + "https://docs.google.com/forms/d/e/1FAIpQLScEXuDiU9GfCsL2Q4nmK9En8xLd8UzVYR6B95K9IKwNAL6GTQ/viewform"; + +export default function Footer() { + return ( +
+
+
+ Ic-Growth ロゴ + +

+ 個人情報保護方針について +

+ +
+ +
+ +
+
+
+ ); +} diff --git a/app/components/Header.tsx b/app/components/Header.tsx new file mode 100644 index 0000000..8714e55 --- /dev/null +++ b/app/components/Header.tsx @@ -0,0 +1,102 @@ +"use client"; + +import Link from "next/link"; +import Image from "next/image"; +import { useState } from "react"; + +const CONTACT_FORM_URL = + "https://docs.google.com/forms/d/e/1FAIpQLScEXuDiU9GfCsL2Q4nmK9En8xLd8UzVYR6B95K9IKwNAL6GTQ/viewform"; + +export default function Header() { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const closeMenu = () => setIsMenuOpen(false); + const toggleMenu = () => setIsMenuOpen((open) => !open); + + return ( +
+
+ + Ic-Growth ロゴ + +
+ + {/* ハンバーガーアイコン (モバイル) */} + + + {/* ナビゲーション (デスクトップは inline、モバイルはサイドメニュー) */} + +
+ ); +} diff --git a/app/components/ScrollToTop.tsx b/app/components/ScrollToTop.tsx new file mode 100644 index 0000000..b3e00e2 --- /dev/null +++ b/app/components/ScrollToTop.tsx @@ -0,0 +1,14 @@ +"use client"; + +import { usePathname } from "next/navigation"; +import { useEffect } from "react"; + +export default function ScrollToTop() { + const pathname = usePathname(); + + useEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); + + return null; +} diff --git a/app/components/SectionComponent1.tsx b/app/components/SectionComponent1.tsx new file mode 100644 index 0000000..4d2b42c --- /dev/null +++ b/app/components/SectionComponent1.tsx @@ -0,0 +1,35 @@ +import Image from "next/image"; + +export default function SectionComponent1() { + return ( +
+
+

+ 個人と企業の成長に貢献します！ +
+ Contribute to the growth of individuals and companies +

+

+ 日本の近未来における厳しい環境化であっても +
+ 持続的成長を遂げるために +
+ 有限である経営資源（ヒト・モノ・カネ・時間）活用の最適化を図ることを使命とします。 +
+ 我々はこの使命を「会計をエネルギーに変換すること」で実現します。 +
+ 「Accounting Transformation」「AX」の実現を目指します。 +

+
+
+ Ic-Growth Logo +
+
+ ); +} diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..7f75ccf --- /dev/null +++ b/app/globals.css @@ -0,0 +1,29 @@ +@import "tailwindcss"; + +@theme { + --color-brand-primary: #0b5fff; + --color-brand-dark: #0b1736; + --color-brand-accent: #f5a623; + --font-family-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif; +} + +html { + scroll-behavior: smooth; + scroll-padding-top: 90px; /* fixed header (75px) + 余白 */ +} + +html, +body { + font-family: var(--font-family-sans); + color: #1a1a1a; + background: #ffffff; +} + +body { + padding-top: 100px; /* fixed header の高さ分 */ +} + +a { + color: inherit; + text-decoration: none; +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..40452bb --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,49 @@ +import type { Metadata } from "next"; +import "./globals.css"; +import Header from "./components/Header"; +import Footer from "./components/Footer"; +import ScrollToTop from "./components/ScrollToTop"; + +const SITE_NAME = "Ic-Growth"; +const SITE_URL = "https://www.ic-gr.net"; +const SITE_DESCRIPTION = + "Ic-Growth はバックアップ・コンサルティングを軸に、企業の事業成長を支援する会社です。"; + +export const metadata: Metadata = { + metadataBase: new URL(SITE_URL), + title: { + default: SITE_NAME, + template: `%s | ${SITE_NAME}`, + }, + description: SITE_DESCRIPTION, + openGraph: { + type: "website", + locale: "ja_JP", + url: SITE_URL, + siteName: SITE_NAME, + title: SITE_NAME, + description: SITE_DESCRIPTION, + }, + icons: { + icon: "/favicon.ico", + apple: "/apple-touch-icon.png", + }, + manifest: "/manifest.webmanifest", +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + +
+
{children}
+