@@ -16,4 +18,4 @@ function ID({ Song_Name, Artist_Name, Cover_Art}: Props) {
);
}
-export default ID;
\ No newline at end of file
+export default Song_card;
\ No newline at end of file
diff --git a/src/language/en.json b/src/language/en.json
index d335f5b..2f02911 100644
--- 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"
}
\ No newline at end of file
diff --git a/src/language/ko.json b/src/language/ko.json
index 5c71e1d..6520bf1 100644
--- 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": "운영진"
}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index fded973..b5ec6aa 100644
--- 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:
,
children: [
- { index: true, element:
},
+ { index: true, element:
},
{ path: 'submission', element:
},
- // { path: 'about', element:
},
+ { path: 'about', element:
},
],
},
]);
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 0b22d65..5990a4d 100644
--- 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 (
-
-
-
-
ISLAND
-
{t("sub_title")}
-
-
-
- )
+
+
+
+
ISLAND
+
{t("sub_title")}
+
+
+ {t("releases")}
+
+ {releases.map(
+ (song, idx) => (
+ console.log("song"),
+ (
+
+
+
+ )
+ )
+ )}
+
+
+
+
+ );
}
export default HomePage;
\ No newline at end of file
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
new file mode 100644
index 0000000..1a93731
--- /dev/null
+++ b/src/pages/about.tsx
@@ -0,0 +1,56 @@
+import { useTranslation } from "react-i18next";
+
+function About() {
+ const { t } = useTranslation();
+
+ return (
+
+
+
{t("about_island")}
+
+ ISLAND IDs{t("what_is_ISLAND")}
+
+
+ {t("support_other_genres")}
+
+
+
+
🎵 {t("what_we_do")}
+
+
+
{t("promotion")}
+
{t("promotion_desc")}
+
+
+
{t("support")}
+
{t("support_desc")}
+
+
+
{t("label")}
+
{t("label_desc")}
+
+
+
+
+
+ );
+}
+
+export default About;
\ No newline at end of file
diff --git a/src/pages/pages.scss b/src/pages/pages.scss
index bbf8e0d..7a05053 100644
--- a/src/pages/pages.scss
+++ b/src/pages/pages.scss
@@ -1,4 +1,4 @@
-.hero {
+.hero { //home
height: 100vh;
display: flex;
align-items: center;
@@ -26,8 +26,27 @@
}
}
+section {
+ .section-title {
+ margin-left: 30px;
+ }
+
+ .list{
+ display: flex;
+ align-items: center;
+ padding: 10px;
+
+ .swiper-slide {
+ background-position: center;
+ background-size: cover;
+ width: 400px !important;
+ }
+ }
+}
+
.submit_form {
- margin-top: 100px;
+ background-color: azure;
+ margin-top: 85px;
width: 100%;
iframe {
@@ -41,4 +60,158 @@
margin-left: 0;
}
}
+}
+
+.about {
+ margin-top: 85px;
+ padding: 20px;
+
+ .card {
+ background: #2a2a2a;
+ border-radius: 12px;
+ padding: 30px;
+ margin-bottom: 30px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+ border: 1px solid #333;
+ animation: slideUp 0.8s ease-out;
+ }
+
+ h2 {
+ font-size: 2em;
+ margin-bottom: 20px;
+ color: #fff;
+ border-bottom: 2px solid #444;
+ padding-bottom: 10px;
+ }
+
+ .intro-text {
+ line-height: 1.8;
+ font-size: 1.1em;
+ margin-bottom: 15px;
+ }
+
+ .services {
+ display: grid;
+ gap: 15px;
+ margin-top: 20px;
+ }
+
+ .service-item {
+ background: #333;
+ padding: 20px;
+ border-radius: 8px;
+ border-left: 3px solid #666;
+ transition: transform 0.3s ease, border-color 0.3s ease;
+ }
+
+ .service-item:hover {
+ transform: translateX(5px);
+ border-left-color: #fff;
+ }
+
+ .service-title {
+ font-weight: bold;
+ font-size: 1.2em;
+ margin-bottom: 8px;
+ color: #fff;
+ }
+
+ .team-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 20px;
+ margin-top: 20px;
+ }
+
+ .team-section {
+ background: #333;
+ padding: 20px;
+ border-radius: 8px;
+ text-align: center;
+ }
+
+ .team-role {
+ font-weight: bold;
+ font-size: 1.1em;
+ color: #fff;
+ margin-bottom: 15px;
+ }
+
+ .team-member {
+ padding: 10px;
+ margin: 8px 0;
+ background: #3a3a3a;
+ border-radius: 6px;
+ transition: transform 0.2s ease;
+ color: #fff;
+ text-decoration-line: none;
+ display: block;
+ }
+
+ .team-member:hover {
+ transform: scale(1.05);
+ background: #444;
+ }
+
+ .links {
+ text-align: center;
+ margin-top: 30px;
+ }
+
+ .link-btn {
+ display: inline-block;
+ padding: 12px 30px;
+ margin: 10px;
+ background: rgba(255, 255, 255, 0.2);
+ color: #fff;
+ text-decoration: none;
+ border-radius: 25px;
+ transition: all 0.3s ease;
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ }
+
+ .link-btn:hover {
+ background: rgba(255, 215, 0, 0.3);
+ border-color: #ffd700;
+ transform: translateY(-3px);
+ box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
+ }
+
+ footer {
+ text-align: center;
+ padding: 30px;
+ font-style: italic;
+ font-size: 1.2em;
+ opacity: 0.9;
+ }
+
+ @keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+ }
+
+ @keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ @media (max-width: 768px) {
+ h1 {
+ font-size: 2.5em;
+ }
+
+ .card {
+ padding: 20px;
+ }
+
+ .team-grid {
+ grid-template-columns: 1fr;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/releases.json b/src/releases.json
new file mode 100644
index 0000000..76e5e74
--- /dev/null
+++ b/src/releases.json
@@ -0,0 +1,36 @@
+[
+ {
+ "Song_Name": "Dance VIP",
+ "Artist_Name": "rrayy",
+ "Cover_Art": "https://i1.sndcdn.com/artworks-iaMIZrXjJXGWNzuz-MkkI4g-t1080x1080.jpg",
+ "SoundCloud": "https://soundcloud.com/rrayy-25809/dance-vip-mix",
+ "Spotify": "https://open.spotify.com/track/3uPAiH1VDa0GghVW5cNYn6?si=d4d8b9eeaea94e82",
+ "AppleMusic": "https://music.apple.com/us/album/1842664455?i=1842664456"
+ },
+ {
+ "Song_Name": "Dance VIP (Extended Mix)",
+ "Artist_Name": "rrayy",
+ "Cover_Art": "https://i1.sndcdn.com/artworks-iaMIZrXjJXGWNzuz-MkkI4g-t1080x1080.jpg",
+ "SoundCloud": "https://soundcloud.com/rrayy-25809/dance-vip-extended-mix",
+ "Spotify": "https://open.spotify.com/track/7KCsdZb0spDTSn91USJxSt?si=88910dc443db4339",
+ "AppleMusic": "https://music.apple.com/us/album/1842664455?i=1842664457"
+ },
+ {
+ "Song_Name": "What I do",
+ "Artist_Name": "rrayy",
+ "Cover_Art": "https://i1.sndcdn.com/artworks-AiPihJyNUlzjqg8r-EHsWvw-t1080x1080.png",
+ "SoundCloud": "https://soundcloud.com/rrayy-25809/sets/what-i-do",
+ "Spotify": "https://open.spotify.com/track/3XTvuPi2NyLkc9oRPYnlfA?si=96fd52953e284a3a",
+ "AppleMusic": "https://music.apple.com/us/album/1838324986?i=1838324987",
+ "YouTube": "https://www.youtube.com/watch?v=HQyDUbD0Jhk"
+ },
+ {
+ "Song_Name": "Next to Me",
+ "Artist_Name": "rrayy",
+ "Cover_Art": "https://i1.sndcdn.com/artworks-XRO8yDzyLye6vppf-fXMCyw-t1080x1080.jpg",
+ "SoundCloud": "https://soundcloud.com/rrayy-25809/sets/next-to-me",
+ "Spotify": "spotify:album:7LRSgu9Eg6lNNeNcuW5JP7",
+ "AppleMusic": "https://music.apple.com/us/album/1831503753",
+ "YouTube": "https://youtu.be/abE2vMhtyHo?si=WI1W8GKQf0chfu0F"
+ }
+]
\ No newline at end of file
diff --git a/src/style.scss b/src/style.scss
index f3120f7..de80dda 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -82,14 +82,30 @@ header {
}
footer {
- padding: 60px 0;
+ padding: 30px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
+ background: #0a0a0a;
+ color: #aaa;
+ font-size: 13px;
text-align: center;
-}
+ line-height: 1.6;
-.footer-content {
- font-size: 12px;
- opacity: 0.4;
- text-transform: uppercase;
- letter-spacing: 2px;
+ a {
+ color: #aaa;
+ text-decoration: none;
+ transition: color 0.3s;
+
+ &:hover {
+ color: #fff;
+ }
+ }
+
+ .social {
+ margin-bottom: 10px;
+ letter-spacing: 1px;
+ }
+
+ .contact {
+ margin-bottom: 10px;
+ }
}
\ No newline at end of file