Ai

README.md

@@ -1,15 +1,18 @@
 # TEAra Homepage
 
-お茶の水女子大学の学生向けコミュニティ **TEAra** のWebサイトです 🌿  
+お茶の水女子大学の学生向けコミュニティ **TEAra** のWebサイトです 🌿
 React + Vite + Tailwind CSS を使って作られています。
 
 ---
 
 ## 📌 このリポジトリについて
 
+
 - サークル紹介やイベント情報、新歓の告知などを発信するWebサイトです
 - 初心者でも読みやすく、改良・参加しやすいコード構成を意識しています
 - **2025春のハッカソン**向けに作成されました！
+- teamAのリポジトリです！
+- です！
 
 ---
 

src/App.jsx

@@ -3,6 +3,7 @@ import Header from "./components/Header";
 import Navbar from "./components/Navbar";
 import Home from "./pages/Home";
 import Schedule from "./pages/Schedule";
+import Records from "./pages/Records";
 import Members from "./pages/Members";
 import News from "./pages/News";
 import Links from "./pages/Links";
@@ -15,6 +16,7 @@ export default function App() {
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/schedule" element={<Schedule />} />
+        <Route path="/records" element={<Records />} />
         <Route path="/members" element={<Members />} />
         <Route path="/news" element={<News />} />
         <Route path="/links" element={<Links />} />

src/components/Navbar.jsx

@@ -36,6 +36,9 @@ export default function Navbar() {
           <li>
             <Link to="/schedule">スケジュール</Link>
           </li>
+          <li>
+            <Link to="/records">活動記録</Link>
+          </li>
           <li>
             <Link to="/members">members</Link>
           </li>

src/pages/Home.jsx

@@ -4,7 +4,7 @@ export default function Home() {
       {/* セクション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">
-          ようこそ TEAra へ！
+          TEAra です！
         </h2>
         <p className="text-base md:text-lg text-gray-700 max-w-2xl">
           TEAraは、「何かを作ってみたい」「アウトプットしてみたい」――そんな想いを持つ人が集まる、お茶の水女子大学の開発コミュニティです。
@@ -21,6 +21,27 @@ export default function Home() {
           alt="TEAra Hackathon Banner"
           className="w-full max-w-3xl rounded-xl shadow-lg"
         />
+      </section>
+       <section className="flex flex-col items-center justify-center text-center py-16 px-6 bg-gradient-to-b from-red-100 to-white"
+       > 
+          <h1 className="text-3xl md:text-5xl font-bold mb-4">メンバー紹介</h1>
+          <p>１年生 ２人</p>
+          <p>２年生 ５人</p>
+          <p>３年生 ６人</p>
+          <p>４年生 ８人</p>
+          <p>修士 １０人</p>
+          <p>計 ３０人で活動しています！</p>
+          <p>情報科学科が多いですが、数学科や共創工学部の文化情報工学科もいます👑</p>
+          <p> </p>
+          <p>このホームページの担当者は</p>
+
+
+
+
+
+
+
+
       </section>
 
       {/* セクション3：CTA */}

src/pages/Links.jsx

@@ -1 +1,7 @@
-export default function Links() {}
+export default function Links() {
+    return (
+        <div>
+            hello world
+        </div>
+    )
+}

src/pages/Records.jsx

@@ -0,0 +1,103 @@
+export default function Records() {
+    // イベントデータ
+    const events = [
+        { month: "４月", name: "新歓コント大会", date: "2024-04-15", detail: "新入生歓迎の気持ちを込めて、全員で全力でコントをしました！新入生も緊張していたのか反応は薄かったけれど、やり切った達成感がありました！", image_src: ["/4_konto.png"] },
+        { month: "６月", name: "合宿", date: "2024-06-10", detail: "ロッククライミングに挑戦しました！", image_src: ["/6_rock.png"] },
+        { month: "８月", name: "夏フェス", date: "2024-08-20", detail: "ドフラミンゴもノリノリ🎵", image_src: ["/8_fes.png"] },
+        { month: "１０月", name: "親睦を深める会", date: "2024-10-05", detail: "空を飛びました", image_src: ["/10_sky.png", "/10_sky2.png", "/10_sky3.png", "/10_sky4.png"] },
+        { month: "１２月", name: "忘年会", date: "2024-12-22", detail: "ゲストはフランキーでした！", image_src: ["/12_bohnenkai2.png", "/12_bohnenkai.png"] },
+        { month: "２月", name: "寒中水泳大会", date: "2025-2-5", detail: "気温３度でしたが、絆は温まりました！", image_src: ["/2_suiei.png"] }
+    ];
+
+    // JSXとしてのページ構成
+    return (
+        <main className="text-black w-full bg-gray-50 px-4 py-10">
+            <PageTitle title="2024年度 活動記録" />
+            <p className="text-center">(※以下のボタンをクリックするとその月のレポートに飛べます)</p>
+            <br></br>
+            <EventList_button events={events} />
+            <br></br>
+            <EventList_detail events={events} />
+        </main>
+    );
+}
+
+// タイトル用コンポーネント
+function PageTitle({ title }) {
+    return <h1 className="text-3xl font-bold text-center mb-8">
+        {title}</h1>;
+}
+
+// イベントボタンリストを表示するコンポーネント
+function EventList_button({ events }) {
+    return (
+        <ul className="max-w-xl mx-auto space-y-4">
+            {events.map((event, index) => (
+                <EventButton key={index} event={event} />
+            ))}
+        </ul>
+    );
+}
+
+// イベントボタン用のコンポーネント
+// <button> はフォーム送信や操作用のコンポーネント向け。ナビゲーションには <a> を使うのが適切
+function EventButton({ event }) {
+    return (
+        <a
+            href={"#" + event.date}
+            className="group w-full relative inline-flex h-16 items-center justify-center overflow-hidden rounded-md bg-white px-6 font-medium text-black shadow-md transition-all duration-300 hover:scale-105 hover:shadow-xl"
+        >
+            <div className="transition-all duration-300 group-hover:scale-110 group-hover:font-bold group-hover:text-lg">
+                <strong>{event.month}</strong>: {event.name}
+            </div>
+        </a>
+    );
+}
+
+
+// 単一イベント詳細のリストを表示するコンポーネント
+function EventList_detail({ events }) {
+    return (
+        <ul className="max-w-3xl mx-auto space-y-4">
+            {events.map((event, index) => (
+                <div id={event.date}>
+                    <EventDetail key={index} event={event} />
+                </div>
+            ))}
+        </ul>
+    );
+}
+
+// 単一イベントの詳細用のコンポーネント
+function EventDetail({ event }) {
+    return (
+        <div className="p-4 border-t border-green-700">
+            <h2 className="text-2xl text-center font-bold">
+                {event.month}：{event.name}
+            </h2>
+            <p className="text-center">( {event.date} )</p>
+            <br></br>
+
+            <div className="text-center">
+                <p>{event.detail}</p>
+            </div>
+            <br></br>
+
+            <div className="flex flex-wrap gap-4 justify-around">
+                {
+                    event.image_src.map((src, idx) => (
+                        <img
+                            key={idx}
+                            src={src}
+                            alt={`Event image ${idx + 1}`}
+                            className="w-[200px] h-[200px] object-cover rounded"
+                        />
+                    ))
+
+                }
+            </div>
+
+        </div>
+    );
+}
+

src/pages/Schedule.jsx

@@ -1 +1,135 @@
-export default function Schedule() {}
+export default function Schedule() {
+    // イベントデータ
+    const events = [
+        { month: "４月", name: "新歓", date: "2025-04-23", detail: "", image_src: [], invite: [true, "2025/4/16"]},
+        { month: "６月", name: "合宿", date: "未定", detail: "", image_src: [], invite: [true, "2025/5/31"]},
+        { month: "８月", name: "夏フェス", date: "未定", detail: "", image_src: [], invite: [false]},
+        { month: "１０月", name: "合宿２（仮）", date: "未定", detail: "", image_src: [], invite: [false] },
+        { month: "１２月", name: "忘年会", date: "未定", detail: "", image_src: [] , invite: [false]},
+    ];
+
+    // JSXとしてのページ構成
+    return (
+        <main className="text-black w-full bg-gray-50 px-4 py-10">
+            <PageTitle title="2025年度 年間スケジュール" />
+            <Invite events={events} />
+            <br></br>
+            <p className="text-center">(※以下のボタンをクリックするとその月のイベント詳細に飛べます)</p>
+            <br></br>
+            <EventList_button events={events} />
+            <br></br>
+            <EventList_detail events={events} />
+        </main>
+    );
+}
+
+// タイトル用コンポーネント
+function PageTitle({ title }) {
+    return <h1 className="text-3xl font-bold text-center mb-8">
+        {title}</h1>;
+}
+
+// 募集中企画用コンポーネント
+function Invite({ events }) {
+    return (
+        <ul className="bg-white px-8 py-4">
+            <div className="text-2xl text-center mb-3">参加者募集中の企画↓</div>
+            <div className="text-center mb-2">Googleフォーム回答締切：</div>
+            {events.map((event, idx) => {
+                if (event.invite[0] === true) {
+                    return (
+                        <ul className="">
+                        <li key={idx} className="text-center">
+                            <a
+                                href={"https://example.com/googleform/" + idx} // 実際のフォームURLに置き換える
+                                className="text-blue-600 underline hover:text-blue-800"
+                                target="_blank" rel="noopener noreferrer"
+                            >
+                                {event.name}：　{event.invite[1]}まで
+                            </a>
+                        </li>
+                        </ul>
+                    );
+                } else {
+                    return null;
+                }
+            })}
+        </ul>
+    );
+}
+
+
+
+// イベントボタンリストを表示するコンポーネント
+function EventList_button({ events }) {
+    return (
+        <ul className="max-w-xl mx-auto space-y-4">
+            {events.map((event, index) => (
+                <EventButton key={index} event={event} />
+            ))}
+        </ul>
+    );
+}
+
+// イベントボタン用のコンポーネント
+// <button> はフォーム送信や操作用のコンポーネント向け。ナビゲーションには <a> を使うのが適切
+function EventButton({ event }) {
+    return (
+        <a
+            href={"#" + event.date}
+            className="group w-full relative inline-flex h-16 items-center justify-center overflow-hidden rounded-md bg-white px-6 font-medium text-black shadow-md transition-all duration-300 hover:scale-105 hover:shadow-xl"
+        >
+            <div className="transition-all duration-300 group-hover:scale-110 group-hover:font-bold group-hover:text-lg">
+                <strong>{event.month}</strong>: {event.name}
+            </div>
+        </a>
+    );
+}
+
+
+// 単一イベント詳細のリストを表示するコンポーネント
+function EventList_detail({ events }) {
+    return (
+        <ul className="max-w-3xl mx-auto space-y-4">
+            {events.map((event, index) => (
+                <div id={event.date}>
+                    <EventDetail key={index} event={event} />
+                </div>
+            ))}
+        </ul>
+    );
+}
+
+// 単一イベントの詳細用のコンポーネント
+function EventDetail({ event }) {
+    return (
+        <div className="p-4 border-t border-green-700">
+            <h2 className="text-2xl text-center font-bold">
+                {event.month}：{event.name}
+            </h2>
+            <p className="text-center">( {event.date} )</p>
+            <br></br>
+
+            <div className="text-center">
+                <p>{event.detail}</p>
+            </div>
+            <br></br>
+
+            <div className="flex flex-wrap gap-4 justify-around">
+                {
+                    event.image_src.map((src, idx) => (
+                        <img
+                            key={idx}
+                            src={src}
+                            alt={`Event image ${idx + 1}`}
+                            className="w-[200px] h-[200px] object-cover rounded"
+                        />
+                    ))
+
+                }
+            </div>
+
+        </div>
+    );
+}
+