diff --git a/index.css b/index.css index cb35a9a..8c0eada 100644 --- a/index.css +++ b/index.css @@ -76,6 +76,20 @@ Layout Components ===================================================== */ +/* Landing Page Container - Free Scroll */ +.landing-container { + width: 100%; + height: 100dvh; + overflow-y: scroll; + overflow-x: hidden; + background-color: var(--color-bg-darker); +} + +.landing-section { + min-height: 100dvh; + width: 100%; +} + /* Page Container */ .page-container { display: flex; @@ -140,17 +154,16 @@ .dashboard-layout { display: flex; width: 100%; - height: 100dvh; + min-height: 100dvh; background-color: var(--color-bg-darker); color: var(--color-text-white); - overflow: hidden; } .dashboard-content { flex: 1; - height: 100%; + min-height: 0; position: relative; - overflow: hidden; + overflow-y: auto; padding-left: 0; } @@ -1780,13 +1793,15 @@ /* Analysis Container */ .analysis-container { width: 100%; - min-height: 100dvh; + height: 100dvh; color: var(--color-text-white); display: flex; flex-direction: column; padding: var(--spacing-page); background-color: var(--color-bg-dark); overflow-y: auto; + overflow-x: hidden; + box-sizing: border-box; } @media (min-width: 768px) { @@ -1831,7 +1846,7 @@ display: flex; flex-direction: column; gap: 1.5rem; - flex: 0 0 auto; + flex-shrink: 0; } @media (min-width: 1024px) { @@ -2021,51 +2036,217 @@ /* Hero Section */ .hero-section { width: 100%; - height: 100%; + min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; - background-color: var(--color-bg-dark); + background-color: #002224; color: var(--color-text-white); - padding: 0 1rem; + padding: 80px 1rem 100px; + position: relative; + overflow: hidden; + box-sizing: border-box; +} + +/* 세로가 짧은 화면 대응 */ +@media (max-height: 700px) { + .hero-section { + padding: 70px 1rem 80px; + justify-content: flex-start; + padding-top: 100px; + } +} + +@media (max-height: 600px) { + .hero-section { + padding: 60px 1rem 70px; + padding-top: 80px; + } +} + +/* Animated Background Orbs */ +.hero-bg-orbs { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + pointer-events: none; + z-index: 0; +} + +.hero-orb { + position: absolute; + border-radius: 50%; + filter: blur(80px); + opacity: 0.6; +} + +/* Purple orb - top left */ +.hero-orb-purple-1 { + width: 400px; + height: 400px; + background: #AE72F9; + top: -100px; + left: 0; + animation: float-1 20s ease-in-out infinite; +} + +/* Mint orb - top right */ +.hero-orb-mint-1 { + width: 450px; + height: 450px; + background: #94FBE0; + top: -50px; + right: -100px; + animation: float-2 25s ease-in-out infinite; +} + +/* Purple orb - bottom left */ +.hero-orb-purple-2 { + width: 500px; + height: 500px; + background: #AE72F9; + bottom: -100px; + left: -100px; + animation: float-3 22s ease-in-out infinite; +} + +/* Mint orb - bottom right */ +.hero-orb-mint-2 { + width: 400px; + height: 400px; + background: #94FBE0; + bottom: -50px; + right: 5%; + animation: float-4 18s ease-in-out infinite; +} + +@keyframes float-1 { + 0% { + transform: translate(0, 0); + } + 33% { + transform: translate(200px, 150px); + } + 66% { + transform: translate(100px, 250px); + } + 100% { + transform: translate(0, 0); + } +} + +@keyframes float-2 { + 0% { + transform: translate(0, 0); + } + 33% { + transform: translate(-180px, 200px); + } + 66% { + transform: translate(-250px, 100px); + } + 100% { + transform: translate(0, 0); + } +} + +@keyframes float-3 { + 0% { + transform: translate(0, 0); + } + 33% { + transform: translate(220px, -180px); + } + 66% { + transform: translate(150px, -280px); + } + 100% { + transform: translate(0, 0); + } +} + +@keyframes float-4 { + 0% { + transform: translate(0, 0); + } + 33% { + transform: translate(-200px, -220px); + } + 66% { + transform: translate(-280px, -120px); + } + 100% { + transform: translate(0, 0); + } +} + +.hero-bg-blur { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 200px; + background: linear-gradient(180deg, rgba(0, 34, 36, 0) 0%, rgba(0, 34, 36, 1) 100%); + pointer-events: none; + z-index: 2; +} + +.hero-content { + display: flex; + flex-direction: column; + align-items: center; + z-index: 10; position: relative; } -.hero-title { - font-family: 'Playfair Display', serif; - font-style: italic; - font-size: 3.75rem; - font-weight: 700; +.hero-logo { + width: 280px; + height: auto; margin-bottom: 1rem; - letter-spacing: -0.025em; - text-align: center; - line-height: 1; } @media (min-width: 640px) { - .hero-title { - font-size: 4.5rem; + .hero-logo { + width: 400px; } } @media (min-width: 768px) { - .hero-title { - font-size: 6rem; + .hero-logo { + width: 500px; } } @media (min-width: 1024px) { - .hero-title { - font-size: 8rem; + .hero-logo { + width: 554px; + } +} + +/* 세로가 짧은 화면에서 로고 크기 축소 */ +@media (max-height: 700px) { + .hero-logo { + width: 240px; + margin-bottom: 0.5rem; + } +} + +@media (max-height: 600px) { + .hero-logo { + width: 200px; + margin-bottom: 0.5rem; } } .hero-subtitle { font-size: var(--text-sm); font-weight: 300; - margin-bottom: 3rem; - opacity: 0.8; + margin-bottom: 2rem; + color: rgba(255, 255, 255, 0.8); text-align: center; max-width: 32rem; } @@ -2073,41 +2254,64 @@ @media (min-width: 640px) { .hero-subtitle { font-size: var(--text-base); + margin-bottom: 3rem; } } @media (min-width: 768px) { .hero-subtitle { - font-size: var(--text-xl); + font-size: var(--text-lg); } } /* Hero Form */ .hero-form { width: 100%; - max-width: 24rem; + max-width: 400px; display: flex; flex-direction: column; - gap: 0.75rem; + align-items: center; + gap: 8px; +} + +/* 세로가 짧은 화면에서 폼 간격 조정 */ +@media (max-height: 700px) { + .hero-form { + gap: 6px; + max-width: 350px; + } +} + +@media (max-height: 600px) { + .hero-form { + gap: 4px; + max-width: 320px; + } +} + +.hero-input-label { + font-size: 14px; + font-weight: 600; + color: #ffffff; + letter-spacing: -0.006em; +} + +.hero-input-wrapper { + width: 100%; + background-color: #ffffff; + border-radius: 999px; + padding: 11px 24px; } .hero-input { width: 100%; - padding: 0.75rem 1.5rem; - border-radius: var(--radius-full); - background-color: var(--color-text-white); - color: #1f2937; - text-align: center; - font-weight: 500; - font-size: var(--text-sm); + background: transparent; border: none; -} - -@media (min-width: 640px) { - .hero-input { - padding: 1rem 1.5rem; - font-size: var(--text-base); - } + color: #6AB0B3; + font-size: 14px; + font-weight: 600; + letter-spacing: -0.006em; + text-align: left; } .hero-input:focus { @@ -2115,11 +2319,19 @@ } .hero-input::placeholder { - color: #9ca3af; + color: #6AB0B3; } .hero-input.error { - box-shadow: 0 0 0 2px #ef4444; + box-shadow: none; +} + +.hero-input-hint { + font-size: 12px; + font-weight: 400; + color: #CEE5E6; + letter-spacing: -0.006em; + margin-bottom: 16px; } .hero-error { @@ -2130,86 +2342,93 @@ .hero-button { width: 100%; - padding: 0.75rem 1.5rem; - border-radius: var(--radius-full); - background-color: var(--color-purple); - color: var(--color-text-white); - font-weight: 700; - font-size: var(--text-sm); - box-shadow: var(--shadow-purple); + padding: 11px 16px; + border-radius: 999px; + background-color: #AE72F9; + color: #ffffff; + font-weight: 600; + font-size: 14px; + letter-spacing: -0.006em; + box-shadow: 0px 4px 24px 0px rgba(174, 114, 249, 0.4); transition: all var(--transition-normal); border: none; cursor: pointer; } -@media (min-width: 640px) { - .hero-button { - padding: 1rem 1.5rem; - font-size: var(--text-base); - } -} - .hero-button:hover { - background-color: var(--color-purple-hover); + background-color: #9a5ef0; } .hero-button:active { - transform: scale(0.95); + transform: scale(0.98); } /* Scroll Indicator */ .scroll-indicator { position: absolute; - bottom: 1.5rem; + bottom: 2rem; display: flex; flex-direction: column; align-items: center; - gap: 0.5rem; - opacity: 0.4; + gap: 12px; transition: opacity var(--transition-normal); cursor: pointer; - animation: bounce 1s infinite; background: none; border: none; - color: inherit; + color: #9BCACC; + z-index: 10; } @media (min-width: 640px) { .scroll-indicator { - bottom: 2.5rem; + bottom: 3rem; + } +} + +/* 세로가 짧은 화면에서 스크롤 인디케이터 조정 */ +@media (max-height: 700px) { + .scroll-indicator { + bottom: 1rem; + gap: 8px; + } +} + +@media (max-height: 600px) { + .scroll-indicator { + bottom: 0.5rem; + gap: 4px; + } + + .scroll-indicator-text { + font-size: 10px; + } + + .scroll-indicator-icon { + width: 32px; + height: 32px; } } .scroll-indicator:hover { - opacity: 1; + opacity: 0.8; } .scroll-indicator-text { - font-size: 10px; - font-weight: 300; -} - -@media (min-width: 640px) { - .scroll-indicator-text { - font-size: var(--text-xs); - } + font-size: 12px; + font-weight: 400; + letter-spacing: -0.006em; + color: #9BCACC; } .scroll-indicator-icon { - width: 2rem; - height: 2rem; - border: 1px solid var(--color-text-white); - border-radius: var(--radius-full); + width: 40px; + height: 40px; + border: 1px solid #9BCACC; + border-radius: 999px; display: flex; align-items: center; justify-content: center; -} - -@media (min-width: 640px) { - .scroll-indicator-icon { - width: 2.5rem; - height: 2.5rem; - } + animation: bounce 2s infinite; } @keyframes bounce { @@ -2217,7 +2436,7 @@ transform: translateY(0); } 50% { - transform: translateY(-10px); + transform: translateY(-8px); } } @@ -2228,17 +2447,55 @@ /* Welcome Section */ .welcome-section { width: 100%; - height: 100%; + min-height: 100dvh; display: flex; flex-direction: column; + align-items: center; + justify-content: flex-start; background-color: #002224; color: var(--color-text-white); - overflow: hidden; + padding: 0; + position: relative; +} + +.welcome-content { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + padding: 2rem 1rem; + position: relative; +} + +/* Star Icon - positioned at top center based on Figma (y: 144) */ +.welcome-star { + position: absolute; + top: 60px; + left: 50%; + transform: translateX(-50%); + width: 40px; + height: 40px; + z-index: 1; +} + +@media (min-width: 768px) { + .welcome-star { + top: 80px; + } +} + +.welcome-star img { + width: 100%; + height: 100%; + object-fit: contain; } .welcome-header { - margin-bottom: 2rem; text-align: center; + margin-bottom: 2rem; + z-index: 1; } @media (min-width: 768px) { @@ -2247,19 +2504,6 @@ } } -.welcome-icon { - display: inline-block; - margin-bottom: 1rem; - width: 40px; - height: 40px; -} - -.welcome-icon img { - width: 100%; - height: 100%; - object-fit: contain; -} - .welcome-title { font-size: 1.5rem; font-weight: 600; @@ -2297,7 +2541,7 @@ @media (min-width: 768px) { .welcome-subtitle { - font-size: var(--text-lg); + font-size: 1.5rem; } } @@ -2307,10 +2551,10 @@ flex-direction: column; gap: 1rem; width: 100%; - max-width: 72rem; - margin: 0 auto 2rem; - overflow-y: auto; - padding-right: 0.25rem; + max-width: 1144px; + margin: 0 auto; + z-index: 1; + padding: 0 1rem; } @media (min-width: 640px) { @@ -2322,13 +2566,165 @@ @media (min-width: 768px) { .feature-grid { flex-direction: row; - gap: 2rem; - overflow: visible; + gap: 24px; justify-content: center; + padding: 0 2rem; + } +} + +@media (min-width: 1024px) { + .feature-grid { + gap: 32px; + padding: 0; } } /* Feature Card */ +.feature-card { + position: relative; + background-color: #01393B; + border-radius: 40px; + padding: 24px 32px; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 16px; + width: 100%; + flex: 1; +} + +@media (min-width: 768px) { + .feature-card { + flex: 1; + max-width: 280px; + min-height: 340px; + padding: 24px 24px; + gap: 20px; + } +} + +@media (min-width: 1024px) { + .feature-card { + max-width: 360px; + min-height: 440px; + padding: 24px 40px; + gap: 24px; + } +} + +.feature-number-badge { + width: 32px; + height: 32px; + flex-shrink: 0; + border-radius: 999px; + border: 1px solid #9BCACC; + display: flex; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + .feature-number-badge { + width: 36px; + height: 36px; + } +} + +@media (min-width: 1024px) { + .feature-number-badge { + width: 40px; + height: 40px; + } +} + +.feature-number-badge span { + font-size: 16px; + font-weight: 600; + color: #9BCACC; + letter-spacing: -0.006em; +} + +@media (min-width: 1024px) { + .feature-number-badge span { + font-size: 20px; + } +} + +.feature-card-title { + font-size: 16px; + font-weight: 600; + color: #E5F1F2; + letter-spacing: -0.006em; + line-height: 1.19; +} + +@media (min-width: 768px) { + .feature-card-title { + font-size: 18px; + } +} + +@media (min-width: 1024px) { + .feature-card-title { + font-size: 24px; + } +} + +.feature-icon-box { + width: 100px; + height: 100px; + border-radius: 32px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +@media (min-width: 768px) { + .feature-icon-box { + width: 120px; + height: 120px; + border-radius: 36px; + } +} + +@media (min-width: 1024px) { + .feature-icon-box { + width: 160px; + height: 160px; + border-radius: 40px; + } +} + +.feature-icon-img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.feature-card-description { + font-size: 12px; + font-weight: 400; + color: #E5F1F2; + letter-spacing: -0.006em; + line-height: 1.45; + white-space: pre-line; +} + +@media (min-width: 768px) { + .feature-card-description { + font-size: 14px; + } +} + +@media (min-width: 1024px) { + .feature-card-description { + font-size: 16px; + } +} + +/* Legacy feature-item styles (for backward compatibility) */ .feature-item { position: relative; background-color: #01393B; @@ -2514,15 +2910,24 @@ /* Display Section */ .display-section { width: 100%; - height: 100%; + min-height: 100dvh; display: flex; flex-direction: column; + justify-content: flex-start; background-color: #002224; color: var(--color-text-white); position: relative; overflow: hidden; } +.display-section .content-safe-area { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + /* Display Frames Container */ .display-frames { display: flex; @@ -3113,13 +3518,11 @@ /* Dashboard Container */ .dashboard-container { width: 100%; - height: 100%; padding: 0.75rem; display: flex; flex-direction: column; background-color: var(--color-bg-dark); color: var(--color-text-white); - overflow: hidden; } @media (min-width: 640px) { @@ -3718,33 +4121,120 @@ text-decoration: underline; } +/* ===================================================== + Footer Component + ===================================================== */ + +/* Landing Footer */ +.landing-footer { + width: 100%; + background-color: #002224; + padding: 40px 1.5rem; +} + +@media (min-width: 768px) { + .landing-footer { + padding: 48px 5rem; + } +} + +@media (min-width: 1024px) { + .landing-footer { + padding: 60px 148px; + } +} + +.footer-content { + display: flex; + flex-direction: column; + gap: 2rem; + max-width: 1144px; + margin: 0 auto; +} + +@media (min-width: 768px) { + .footer-content { + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + gap: 4rem; + } +} + +.footer-left { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.footer-logo { + height: 24px; + width: auto; + object-fit: contain; +} + +.footer-copyright { + font-size: 14px; + font-weight: 400; + color: #379599; + letter-spacing: -0.006em; + line-height: 1.19; +} + +.footer-right { + display: flex; + flex-direction: column; + gap: 4px; +} + +.footer-info { + font-size: 12px; + font-weight: 400; + color: #CEE5E6; + letter-spacing: -0.006em; + line-height: 1.19; +} + +@media (min-width: 768px) { + .footer-info { + font-size: 14px; + } +} + /* ===================================================== Header Component ===================================================== */ /* Landing Header */ .landing-header { - width: 100%; - padding: 1rem 1.5rem; + width: calc(100% - 2rem); + max-width: 1280px; + padding: 12px 12px 12px 24px; display: flex; justify-content: space-between; align-items: center; - position: absolute; - top: 0; - left: 0; - z-index: 20; + position: fixed; + top: 16px; + left: 50%; + transform: translateX(-50%); + z-index: 100; + background: rgba(0, 34, 36, 0.3); + border: 1px solid rgba(229, 241, 242, 0.2); + border-radius: 999px; + backdrop-filter: blur(40px); + -webkit-backdrop-filter: blur(40px); } -@media (min-width: 640px) { +@media (min-width: 768px) { .landing-header { - padding: 1.5rem 2rem; + width: calc(100% - 10rem); } } .header-logo { display: flex; align-items: center; - height: 1rem; + height: 16px; } .header-logo img { @@ -3754,12 +4244,12 @@ } .header-login-btn { - padding: 0.625rem 1.5rem; - border-radius: var(--radius-full); + padding: 10px 24px; + border-radius: 999px; background-color: #94FBE0; color: #000000; font-weight: 600; - font-size: var(--text-sm); + font-size: 14px; border: none; cursor: pointer; transition: all var(--transition-normal); diff --git a/public/assets/images/castad-logo-large.svg b/public/assets/images/castad-logo-large.svg new file mode 100644 index 0000000..ba2545b --- /dev/null +++ b/public/assets/images/castad-logo-large.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/hero-background.png b/public/assets/images/hero-background.png new file mode 100644 index 0000000..f35515c Binary files /dev/null and b/public/assets/images/hero-background.png differ diff --git a/src/App.tsx b/src/App.tsx index 80ffe06..c06ae1d 100755 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ import React, { useRef, useState, useEffect } from 'react'; +import Header from './components/Header'; import HeroSection from './pages/Landing/HeroSection'; import WelcomeSection from './pages/Landing/WelcomeSection'; import DisplaySection from './pages/Landing/DisplaySection'; @@ -112,21 +113,22 @@ const App: React.FC = () => { } return ( -
-
+
+
+
scrollToSection(1)} error={error} />
-
+
scrollToSection(0)} onNext={() => scrollToSection(0)} />
-
+
scrollToSection(0)} />
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..875842f --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,24 @@ + +import React from 'react'; + +const Footer: React.FC = () => { + return ( +
+
+
+ CASTAD +

Copyright ⓒ O2O Inc. All rights reserved

+
+
+

사업자 등록번호 : 620-87-00810 | 대표 : 안성민

+

본사 : 41593 대구광역시 북구 옥산로 111, 5층 유니콘랩 대구 A05호

+

연구소 : 13453 경기 성남시 수정구 금토로 32 (금토동) (주)KT 판교빌딩 504호~505호 (East)

+

전화 : 070-4260-8310 | 010-2755-6463

+

이메일 : o2oteam@o2o.kr

+
+
+
+ ); +}; + +export default Footer; diff --git a/src/pages/Dashboard/GenerationFlow.tsx b/src/pages/Dashboard/GenerationFlow.tsx index 605a65d..ee336f4 100755 --- a/src/pages/Dashboard/GenerationFlow.tsx +++ b/src/pages/Dashboard/GenerationFlow.tsx @@ -230,9 +230,9 @@ const GenerationFlow: React.FC = ({ onHome, initialActiveIt }; return ( -
+
-
+
{renderContent()}
diff --git a/src/pages/Landing/DisplaySection.tsx b/src/pages/Landing/DisplaySection.tsx index 87a0f4c..6577952 100755 --- a/src/pages/Landing/DisplaySection.tsx +++ b/src/pages/Landing/DisplaySection.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Header from '../../components/Header'; +import Footer from '../../components/Footer'; interface DisplaySectionProps { onStartClick?: () => void; @@ -15,9 +15,7 @@ const DisplaySection: React.FC = ({ onStartClick }) => { return (
-
- -
+
{/* Main visual frames container */}
{frames.map((frame, index) => ( @@ -35,6 +33,7 @@ const DisplaySection: React.FC = ({ onStartClick }) => { 시작하기
+
); }; diff --git a/src/pages/Landing/HeroSection.tsx b/src/pages/Landing/HeroSection.tsx index f581d52..9479ae2 100755 --- a/src/pages/Landing/HeroSection.tsx +++ b/src/pages/Landing/HeroSection.tsx @@ -41,52 +41,66 @@ const HeroSection: React.FC = ({ onAnalyze, onNext, error: ext return (
-
- {/* Title */} -

CASTAD

+ {/* Animated background orbs */} +
+
+
+
+
+
+ {/* Background blur overlay */} +
+ +
+ {/* Logo Image */} + CASTAD - {/* Subtitle */} -

- Marketing Automation for Location Based Business -

{/* Input Form */}
- { - setUrl(e.target.value); - if (localError) setLocalError(''); - }} - placeholder="URL 입력" - className={`hero-input ${error ? 'error' : ''}`} - /> + URL 입력 +
+ { + setUrl(e.target.value); + if (localError) setLocalError(''); + }} + placeholder="https://www.castad.com" + className={`hero-input ${error ? 'error' : ''}`} + /> +
+ URL에서 가져온 정보로 영상이 자동 생성됩니다. {error && (

{error}

)}
{/* Footer Indicator */} diff --git a/src/pages/Landing/WelcomeSection.tsx b/src/pages/Landing/WelcomeSection.tsx index c8201e5..9efe40c 100755 --- a/src/pages/Landing/WelcomeSection.tsx +++ b/src/pages/Landing/WelcomeSection.tsx @@ -1,66 +1,65 @@ import React from 'react'; -import Header from '../../components/Header'; interface WelcomeSectionProps { onStartClick?: () => void; onNext?: () => void; } -const WelcomeSection: React.FC = ({ onStartClick, onNext }) => { +const WelcomeSection: React.FC = () => { const features = [ { id: 1, title: '비즈니스 핵심 정보 분석', description: '홈페이지, 네이버 지도, 블로그 등의\nURL을 입력하세요', - icon: '/assets/images/icon-analysis.svg', - iconBg: '#9BCACC' + iconBg: '#9BCACC', + icon: '/assets/images/icon-analysis.svg' }, { id: 2, title: '홍보 콘텐츠 자동 제작', description: '분석된 정보를 바탕으로\n비즈니스에 맞는 음악, 자막, 노래, 영상을\n자동으로 제작해요', - icon: '/assets/images/icon-content.svg', - iconBg: '#DFC7FD' + iconBg: '#DFC7FD', + icon: '/assets/images/icon-content.svg' }, { id: 3, title: '멀티채널 자동 배포', description: '완성된 영상은 다운로드하거나\n바로 SNS에 업로드 할 수 있어요', - icon: '/assets/images/icon-deploy.svg', - iconBg: '#D4FDF3' + iconBg: '#D4FDF3', + icon: '/assets/images/icon-deploy.svg' }, ]; return (
-
+
+ {/* Star Icon - Top Center */} +
+ star +
-
+ {/* Header */}
-
- star -

CASTAD에 오신 것을 환영합니다.

분석, 제작, 배포까지 콘텐츠 마케팅의 전과정을 자동화

+ {/* Feature Cards */}
{features.map((feature) => ( -
-
{feature.id}
-

{feature.title}

-
- {feature.title} +
+
+ {feature.id}
-

{feature.description}

+

{feature.title}

+
+ {feature.title} +
+

{feature.description}

))}
- -
);