TEAra-official · Kaede-mp · May 5, 2025 · May 5, 2025 · May 6, 2025 · May 8, 2025
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>TEAra-teamc</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^0.510.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.5.2"

diff --git a/src/assets/schedule/Hack2.png b/src/assets/schedule/Hack2.png
diff --git a/src/assets/schedule/Microsoft.jpg b/src/assets/schedule/Microsoft.jpg
diff --git a/src/assets/schedule/algorithm.png b/src/assets/schedule/algorithm.png
diff --git a/src/assets/schedule/backend.jpg b/src/assets/schedule/backend.jpg
diff --git a/src/assets/schedule/backendjune.jpg b/src/assets/schedule/backendjune.jpg
diff --git a/src/assets/schedule/frontmay.jpg b/src/assets/schedule/frontmay.jpg
diff --git a/src/assets/schedule/frontoct.jpg b/src/assets/schedule/frontoct.jpg
diff --git a/src/assets/schedule/git.png b/src/assets/schedule/git.png
diff --git a/src/assets/schedule/index.js b/src/assets/schedule/index.js
@@ -0,0 +1,16 @@
+const scheduleImages = {
+  git: require('./git.png'),
+  hackathon: require('./Hack2.png'),
+  frontMay: require('./frontmay.jpg'),
+  backendJune: require('./backendjune.jpg'),
+  algorithm: require('./algorithm.png'),
+  microsoft: require('./Microsoft.jpg'),
+  mercari: require('./mercari.jpg'),
+  backend: require('./backend.jpg'),
+  frontOct: require('./frontoct.jpg'),
+  nikkei: require('./nikkei2.png'),
+  kiinsai: require('./kiinsai3.png'),
+  microsoftZa: require('./microsoftza.jpg'),
+};
+
+export default scheduleImages;
diff --git a/src/assets/schedule/kiinsai2.jpg b/src/assets/schedule/kiinsai2.jpg
diff --git a/src/assets/schedule/kiinsai3.png b/src/assets/schedule/kiinsai3.png
diff --git a/src/assets/schedule/mercari.jpg b/src/assets/schedule/mercari.jpg
diff --git a/src/assets/schedule/microsoftza.jpg b/src/assets/schedule/microsoftza.jpg
diff --git a/src/assets/schedule/nikkei.jpg b/src/assets/schedule/nikkei.jpg
diff --git a/src/assets/schedule/nikkei2.png b/src/assets/schedule/nikkei2.png
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,8 +1,30 @@
 import { Link } from "react-router-dom";
+import { useState, useRef, useEffect } from "react";
 
 export default function Navbar() {
+  const [isActivityOpen, setIsActivityOpen] = useState(false);
+  const activityRef = useRef(null);
+
+  const toggleActivityMenu = () => {
+    setIsActivityOpen((prev) => !prev);
+  };
+
+  // 外側クリックで閉じる
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (activityRef.current && !activityRef.current.contains(event.target)) {
+        setIsActivityOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   return (
-    <header className="relative w-full h-screen overflow-hidden">
+    <header className="relative w-full h-full">
       {/* 背景画像（画面全体）
       <div className="absolute inset-0 w-full h-full -z-10">
         <img
@@ -26,15 +48,37 @@ export default function Navbar() {
           お茶大生むけコミュニティ
         </p>
       </div>
-
-      {/* ナビバー */}
-      <nav className="absolute bottom-0 left-0 right-0 bg-gradient-to-r from-teal-400 to-green-400 shadow-md z-10">
-        <ul className="w-full flex justify-center gap-6 px-4 py-2 text-white font-medium text-sm">
+   {/* ナビバー */}
+   <nav className="absolute bottom-0 left-0 right-0 bg-gradient-to-r from-teal-400 to-green-400 shadow-md z-10">
+        <ul className="w-full flex justify-center gap-6 px-4 py-2 text-black font-medium text-sm">
           <li>
             <Link to="/">Home</Link>
           </li>
-          <li>
-            <Link to="/schedule">スケジュール</Link>
+      <li className="relative" ref={activityRef}>
+            {/* 活動ドロップダウン */}
+            <button
+              onClick={toggleActivityMenu}
+              className="font-medium text-[#646cff] hover:text-[#535bf2] focus:outline-none bg-transparent border-none p-0">
+              活動
+            </button>
+            {isActivityOpen && (
+              <div className="absolute top-full left-0 mt-1 bg-white rounded shadow-lg py-2 w-36 z-50 border border-gray-200">
+                <Link
+                  to="/schedule"
+                  className="block px-4 py-2 text-gray-800 hover:bg-gray-100 hover:text-teal-600"
+                  onClick={() => setIsActivityOpen(false)}
+                >
+                  スケジュール
+                </Link>
+                <Link
+                  to="/record"
+                  className="block px-4 py-2 text-gray-800 hover:bg-gray-100 hover:text-teal-600"
+                  onClick={() => setIsActivityOpen(false)}
+                >
+                  活動記録
+                </Link>
+              </div>
+            )}
           </li>
           <li>
             <Link to="/members">members</Link>
@@ -49,4 +93,4 @@ export default function Navbar() {
       </nav>
     </header>
   );
-}
+}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -1,37 +1,49 @@
 export default function Home() {
   return (
     <main className="w-full min-h-screen bg-white">
+
       {/* セクション1：キャッチコピー */}
-      <section className="flex flex-col items-center justify-center text-center py-16 px-6 bg-gradient-to-b from-green-100 to-white">
-        <h2 className="text-3xl md:text-5xl font-bold mb-4">
+      <section className="relative flex flex-col items-center justify-center text-center py-20 px-6 bg-gradient-to-b from-green-100 to-white overflow-hidden">
+
+        <h2 className="text-4xl md:text-5xl font-bold text-emerald-700 mb-4">
           ようこそ TEAra へ！
         </h2>
-        <p className="text-base md:text-lg text-gray-700 max-w-2xl">
-          TEAraは、「何かを作ってみたい」「アウトプットしてみたい」――そんな想いを持つ人が集まる、お茶の水女子大学の開発コミュニティです。
-          「プログラミングに興味ある！」そんな人たちが集まって、
+        <div className="w-24 h-1.5 bg-emerald-300 rounded-full mb-6" />
+
+        <p className="text-base md:text-lg text-gray-700 max-w-3xl leading-relaxed">
+          TEAraは、「何かを作ってみたい」「アウトプットしてみたい」――
+          そんな想いを持つ人が集まる、お茶の水女子大学の開発コミュニティです。
+          <br />
+          「プログラミングに興味ある！」そんな人たちが集まって、 <br />
           ワークショップや勉強会、ハッカソンをゆるく楽しくやってます☕️
+          <br />
           初めてでも大歓迎！まずはこのハッカソンから一緒にやってみませんか？
         </p>
       </section>
-
-      {/* セクション2：画像やバナー */}
-      <section className="flex justify-center py-12">
-        <img
-          src="/Hack.png"
-          alt="TEAra Hackathon Banner"
-          className="w-full max-w-3xl rounded-xl shadow-lg"
-        />
-      </section>
+      {/* セクション2：画像 */}
+<section className="flex justify-center py-16 px-4 bg-white">
+  <div className="relative w-full max-w-3xl">
+    {/* 背景のふわっと丸い色 */}
+    <div className="absolute -top-6 -left-6 w-full h-full bg-teal-100 rounded-3xl blur-xl opacity-40 z-0" />
+
+    {/* 画像本体 */}
+    <img
+      src="/Hack.png"
+      alt="TEAra Hackathon Banner"
+      className="relative z-10 w-full rounded-2xl shadow-xl transform transition duration-300 hover:scale-105"
+    />
+  </div>
+</section>
 
       {/* セクション3：CTA */}
-      <section className="text-center py-16 bg-green-100">
-        <h3 className="text-xl md:text-2xl font-semibold mb-4">
+      <section className="text-center py-20 px-6 bg-gradient-to-r from-teal-100 via-green-100 to-teal-100">
+        <h3 className="text-2xl md:text-3xl font-semibold text-emerald-800 mb-4">
           2025年春のハッカソン、開催中！
         </h3>
-        <p className="text-gray-700 mb-6">Reactでサイトを作ろう</p>
+        <p className="text-gray-700 mb-8 text-lg">Reactでサイトを作ろう</p>
         <a
           href="https://example.com/apply"
-          className="inline-block bg-teal-500 text-white px-6 py-2 rounded-full shadow-md hover:bg-teal-600 transition"
+          className="inline-block bg-emerald-500 text-white px-8 py-3 text-lg font-medium rounded-full shadow-lg hover:bg-emerald-600 transition"
         >
           参加はこちらから
         </a>

diff --git a/src/pages/Links.jsx b/src/pages/Links.jsx
@@ -1 +1,61 @@
-export default function Links() {}
+import teara from '../../public/teara.png'
+function LinkCard({ link }) {
+    return (
+    <a
+        href={link.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="block bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-md active:shadow-sm transition transform hover:translate-y-1 active:translate-y-2 duration-200 max-w-sm w-full mx-auto flex flex-col justify-between h-full"
+    >
+        <div className="relative">
+        {link.image && (
+            <img
+            src={link.image}
+            alt={link.title || link.site}
+            className="w-full h-36 object-cover"
+            />
+        )}
+
+        <h3 className="text-xl font-semibold text-gray-800 text-center my-4">
+            {link.site}
+        </h3>
+        </div>
+    </a>
+    );
+}
+export default function Links() {
+    const links = [
+        {
+            id: 1,
+            site: 'X（旧Twitter）',
+            url: 'https://x.com/teara_ocha',
+            image: teara
+        },
+        {
+            id: 2,
+            site: 'GitHub',
+            url: 'https://github.com/TEAra-official',
+            image: teara
+        }
+    ]
+
+    return(
+        <div className="bg-gradient-to-b from-green-50 to-white min-h-screen py-8 px-4 pb-20 overflow-hidden">
+        <div className="max-w-6xl mx-auto">
+          {/* スケジュールの見出し */}
+        <h1 className="text-3xl font-bold text-center mb-8">
+            TEAra Link集
+        </h1>
+
+          {/* イベントカードグリッド - レスポンシブ対応 */}
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {links.map((link) => (
+                <LinkCard key={link.id} link={link} />
+            ))}
+            </div>
+        </div>
+        </div>
+    </div>
+    )
+}
diff --git a/src/pages/Members.jsx b/src/pages/Members.jsx
@@ -1 +1,62 @@
-export default function Members() {}
+import React from 'react';
+
+export default function Members() {
+  return (
+    <main className="w-full min-h-screen bg-lime-50">
+
+      {/* 最初のセクション（枠なし） */}
+      <section className="relative py-20 px-6 bg-lime-50 overflow-hidden text-center">
+        <h2 className="text-3xl md:text-5xl font-bold mb-4 text-emerald-700">
+          TEAraメンバー紹介
+        </h2>
+        <div className="w-24 h-2 rounded-full bg-emerald-300 mb-6 mx-auto" />
+        <p className="text-base md:text-lg text-gray-700 leading-relaxed max-w-3xl mx-auto">
+          TEAraはお茶大のメンバーのみで構成されています。
+          <br />プログラミング初心者から経験者まで幅広く活動しています。
+          <br />メンバーが協力し合いながら、楽しく学び、様々なことに挑戦しています。
+        </p>
+      </section>
+
+      {/* 学科の多様性 */}
+      <section className="py-16 px-6 bg-lime-50 flex justify-center">
+        <div className="max-w-3xl w-full text-center bg-white shadow-xl rounded-3xl p-10 relative overflow-hidden">
+          <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-lime-300 via-emerald-300 to-lime-300 rounded-t-3xl" />
+
+          <h3 className="text-2xl md:text-3xl font-semibold mb-4 mt-4 text-emerald-700">
+            🌈 いろんな学科のメンバーが活躍中！
+          </h3>
+          <div className="w-20 h-1 border-b border-dotted border-emerald-300 mx-auto mb-6" />
+          <p className="text-base md:text-lg text-gray-700 leading-relaxed">
+            情報科学科に限らず、様々な学科の学生が参加しています。
+            <br />異なる専門性を持つメンバー同士が互いに刺激を与え合いながら、
+            <br />多様な視点でアイデアを形にしています。
+          </p>
+
+          <div className="absolute bottom-0 left-0 w-full h-2 bg-gradient-to-r from-lime-300 via-emerald-300 to-lime-300 rounded-b-3xl" />
+        </div>
+      </section>
+
+      {/* 学年構成 */}
+      <section className="py-16 px-6 bg-lime-50 flex justify-center">
+        <div className="max-w-3xl w-full text-center bg-white shadow-xl rounded-3xl p-10 relative overflow-hidden">
+          <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-lime-300 via-emerald-300 to-lime-300 rounded-t-3xl" />
+
+          <h3 className="text-xl md:text-3xl font-semibold mb-4 mt-4 text-emerald-700">
+            🎓 学年の構成
+          </h3>
+          <div className="w-20 h-1 border-b border-dotted border-emerald-300 mx-auto mb-6" />
+          <ul className="text-gray-700 space-y-2 text-lg">
+            <li>1年生：2名</li>
+            <li>2年生：5名</li>
+            <li>3年生：6名</li>
+            <li>4年生：8名</li>
+            <li>修士：10名程度</li>
+          </ul>
+
+          <div className="absolute bottom-0 left-0 w-full h-2 bg-gradient-to-r from-lime-300 via-emerald-300 to-lime-300 rounded-b-3xl" />
+        </div>
+      </section>
+
+    </main>
+  );
+}