ISLAND-IDs · rrayy-25809 · Oct 6, 2025 · Sep 30, 2025 · Sep 30, 2025 · Sep 30, 2025
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 ISLAND
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,12 +15,14 @@
     "react-dom": "^19.1.1",
     "react-i18next": "^15.7.3",
     "react-router-dom": "^7.9.1",
-    "soundcloud.ts": "^0.6.5"
+    "soundcloud.ts": "^0.6.5",
+    "swiper": "^12.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
+    "@types/swiper": "^5.4.3",
     "@vitejs/plugin-react": "^5.0.0",
     "eslint": "^9.33.0",
     "eslint-plugin-react-hooks": "^5.2.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -26,12 +26,20 @@ function App() {
         <Outlet />
       </main>
       <footer>
-        <div className="container">
-            <div className="footer-content">
-                <p data-ko="© 2025 ISLAND 레이블. 모든 권리 보유." data-en="© 2025 ISLAND Label. All Rights Reserved.">© 2025 ISLAND 레이블. 모든 권리 보유.</p>
-            </div>
+        <div className="footer-content">
+          <p className="social">
+            <a href="https://soundcloud.com/island-promotion" target="_blank">SoundCloud</a>·
+            <a href="https://discord.gg/B55PyFm7nW" target="_blank">Discord</a>·
+            <a href="https://instagram.com/island.ids" target="_blank">Instagram</a>
+          </p>
+          <p className="contact">
+            <a href="mailto:contact@islandlabel.com">contact@islandlabel.com</a>
+          </p>
+          <p className="license">
+            © 2025 ISLAND · MIT License
+          </p>
         </div>
-    </footer>
+      </footer>
     </div>
   );
 }

diff --git a/src/components/componets.scss b/src/components/componets.scss
@@ -0,0 +1,33 @@
+.release-card {
+    cursor: pointer;
+
+    width: 400px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    transition: all 0.4s ease;
+    padding: 5px;
+
+    &:hover {
+        transform: translateY(-10px);
+    }
+
+    .release-image {
+        width: 84%;
+        margin-left: 8%;
+        aspect-ratio: 1;
+        margin-bottom: 10px;
+        opacity: 0.5;
+    }
+
+    h3 {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+    .release-artist {
+        font-size: 12px;
+        opacity: 0.4;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+}
diff --git a/src/components/ID.tsx → src/components/song_card.tsx b/src/components/ID.tsx → src/components/song_card.tsx
@@ -1,10 +1,12 @@
+import "./componets.scss";
+
 type Props = {
-  Song_Name?: string;
-  Artist_Name?: string;
-  Cover_Art?: string;
+  Song_Name: string;
+  Artist_Name: string;
+  Cover_Art: string;
 };
-
-function ID({ Song_Name, Artist_Name, Cover_Art}: Props) {
+// TODO: 사클 API로 곡 데이터 만으로도 커버 아트 가져올 수 있게 바꾸기
+function Song_card({ Song_Name, Artist_Name, Cover_Art}: Props) {
   return (
     <div className="release-card">
       <img className="release-image" src={Cover_Art} alt={Song_Name} />
@@ -16,4 +18,4 @@ function ID({ Song_Name, Artist_Name, Cover_Art}: Props) {
   );
 }
 
-export default ID;
+export default Song_card;
diff --git a/src/language/en.json b/src/language/en.json
@@ -3,5 +3,16 @@
     "home": "Home",
     "submit_id": "ID Submission",
     "about_island": "About ISLAND",
-    "sub_title" : "PROMOTING OUR FUTURE"
+    "sub_title" : "PROMOTING OUR FUTURE",
+    "releases": "Releases",
+    "what_is_ISLAND": " explores and showcases the latest electronic music trends, focusing on Future Bounce and Bass House, and is currently growing from a promotional channel to a full-fledged music label.",
+    "support_other_genres": "In addition to EDM, we are also striving to support the synthetic genre SoundMad, and are aiming to enter the global market outside of Korea in all genres.",
+    "what_we_do": "What We Do",
+    "promotion":"ID, 183 promotion",
+    "promotion_desc":"ID, 183 promotion using soundcloud",
+    "support":"Artist Support",
+    "support_desc":"Support for in-production tracks, feedback, collaboration opportunities",
+    "label":"Label Transition",
+    "label_desc":"We aim to become a label for growing artists",
+    "operators": "Operators"
 }
diff --git a/src/language/ko.json b/src/language/ko.json
@@ -3,5 +3,16 @@
     "home": "홈",
     "submit_id": "ID 제출",
     "about_island": "ISLAND 소개",
-    "sub_title" : "음악의 새로운 지평을 탐험하다"
+    "sub_title" : "음악의 새로운 지평을 탐험하다",
+    "releases": "발매곡",
+    "what_is_ISLAND": "는 Future Bounce, Bass House를 중심으로 최신 전자음악 트렌드를 발굴하고 소개하며, 현재 프로모션 채널에서 본격적인 음악 레이블로 성장하고 있습니다.",
+    "support_other_genres": "EDM외에도 합성장르인 SoundMad 또한 지원하고자 노력하고 있으며, 모든 장르에서 한국 외 글로벌 시장 진출을 목표로 하고 있습니다.",
+    "what_we_do": "우리가 하는 일",
+    "promotion":"ID, 183 프로모션",
+    "promotion_desc":"소셜 미디어를 활용한 ID 홍보",
+    "support":"아티스트 지원",
+    "support_desc":"자체제작 음향 소프트웨어 지원, 피드백 제공, 협업 기회",
+    "label":"음반사로 전환",
+    "label_desc":"성장하는 아티스트를 위한 음반사화 추진",
+    "operators": "운영진"
 }
diff --git a/src/main.tsx b/src/main.tsx
@@ -4,15 +4,16 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import App from './App'; // 최상위 레이아웃 컴포넌트, 공통 레이아웃
 import HomePage from './pages/Home';
 import SubmitPage from './pages/id_submit';
+import About from './pages/about';
 
 const router = createBrowserRouter([
   {
     path: '/',
     element: <App />,
     children: [
-      { index: true, element: <HomePage /> },
+      { index: true, element: <HomePage/> },
       { path: 'submission', element: <SubmitPage /> },
-      // { path: 'about', element: <AboutPage /> },
+      { path: 'about', element: <About/> },
     ],
   },
 ]);

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,23 +1,65 @@
 import { useTranslation } from "react-i18next";
+import { Swiper, SwiperSlide } from 'swiper/react';
+import Song_card from "../components/song_card";
+import 'swiper/swiper.css';
 import "./pages.scss";
+import { EffectCoverflow, Pagination } from 'swiper/modules';
+import releases from '../releases.json';
 
 function HomePage(){
     //API를 써서 리스트 가져오기?
     const { t } = useTranslation();
+    console.log(releases);
 
     return (
-        <div>
-            <section className="hero">
-                <div className="hero-content">
-                    <h1>ISLAND</h1>
-                    <p>{t("sub_title")}</p>
-                </div>
-            </section>
-            <section className="ID-list">
-
-            </section>
-        </div>
-    )
+      <div>
+        <section className="hero">
+          <div className="hero-content">
+            <h1>ISLAND</h1>
+            <p>{t("sub_title")}</p>
+          </div>
+        </section>
+        <section className="releases">
+          <h2 className="section-title">{t("releases")}</h2>
+          <Swiper
+            effect={"coverflow"}
+            grabCursor={true}
+            centeredSlides={true}
+            slidesPerView={"auto"}
+            coverflowEffect={{
+              rotate: 50,
+              stretch: 0,
+              depth: 100,
+              modifier: 1,
+              slideShadows: true,
+            }}
+            pagination={true}
+            modules={[EffectCoverflow, Pagination]}
+            className="list"
+          >
+            {releases.map(
+              (song, idx) => (
+                console.log("song"),
+                (
+                  <SwiperSlide key={idx}>
+                    <Song_card {...song} />
+                  </SwiperSlide>
+                )
+              )
+            )}
+          </Swiper>
+        </section>
+        <section className="ID">
+          <h2 className="section-title">ID</h2>
+          <iframe
+            width="100%"
+            height="450"
+            allow="autoplay"
+            src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/soundcloud%253Aplaylists%253A2089388063&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=false&show_reposts=false&show_teaser=false"
+          ></iframe>
+        </section>
+      </div>
+    );
 }
 
 export default HomePage;
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -0,0 +1,56 @@
+import { useTranslation } from "react-i18next";
+
+function About() {
+    const { t } = useTranslation();
+
+    return (
+        <div className="about">
+            <div className="card">
+                <h2>{t("about_island")}</h2>
+                <p className="intro-text">
+                    <strong>ISLAND IDs</strong>{t("what_is_ISLAND")}
+                </p>
+                <p className="intro-text">
+                    {t("support_other_genres")}
+                </p>
+            </div>
+            <div className="card">
+            <h2>🎵 {t("what_we_do")}</h2>
+            <div className="services">
+                <div className="service-item">
+                    <div className="service-title">{t("promotion")}</div>
+                    <div>{t("promotion_desc")}</div>
+                </div>
+                <div className="service-item">
+                    <div className="service-title">{t("support")}</div>
+                    <div>{t("support_desc")}</div>
+                </div>
+                <div className="service-item">
+                    <div className="service-title">{t("label")}</div>
+                    <div>{t("label_desc")}</div>
+                </div>
+            </div>
+        </div>
+        <div className="card">
+            <h2>👥 {t("operators")}</h2>
+            <div className="team-grid">
+                <div className="team-section">
+                    <div className="team-role">Owner</div>
+                    <a className="team-member">🎧 rrayy</a>
+                </div>
+                <div className="team-section">
+                    <div className="team-role">A&R Team</div>
+                    <a className="team-member" href="https://linktr.ee/speedymusic" target='_blank'>🎵 Speedy</a>
+                    <a className="team-member" href="https://music.hexa.cat/" target='_blank'>🎵 hexa.cat</a>
+                </div>
+                <div className="team-section">
+                    <div className="team-role">Development Team</div>
+                    <a className="team-member" href="https://litt.ly/soundsmell" target='_blank'>💻 Soundsmell</a>
+                </div>
+            </div>
+        </div>
+        </div>
+    );
+}
+
+export default About;