69 lines
2.2 KiB
TypeScript
Executable File
69 lines
2.2 KiB
TypeScript
Executable File
|
|
import React from 'react';
|
|
|
|
interface WelcomeSectionProps {
|
|
onStartClick?: () => void;
|
|
onNext?: () => void;
|
|
}
|
|
|
|
const WelcomeSection: React.FC<WelcomeSectionProps> = () => {
|
|
const features = [
|
|
{
|
|
id: 1,
|
|
title: '비즈니스 핵심 정보 분석',
|
|
description: '홈페이지, 네이버 지도, 블로그 등의\nURL을 입력하세요',
|
|
iconBg: '#9BCACC',
|
|
icon: '/assets/images/icon-analysis.svg'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '홍보 콘텐츠 자동 제작',
|
|
description: '분석된 정보를 바탕으로\n비즈니스에 맞는 음악, 자막, 노래, 영상을\n자동으로 제작해요',
|
|
iconBg: '#DFC7FD',
|
|
icon: '/assets/images/icon-content.svg'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '멀티채널 자동 배포',
|
|
description: '완성된 영상은 다운로드하거나\n바로 SNS에 업로드 할 수 있어요',
|
|
iconBg: '#D4FDF3',
|
|
icon: '/assets/images/icon-deploy.svg'
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="welcome-section">
|
|
<div className="welcome-content">
|
|
{/* Star Icon - Top Center */}
|
|
<div className="welcome-star">
|
|
<img src="/assets/images/star-icon.svg" alt="star" />
|
|
</div>
|
|
|
|
{/* Header */}
|
|
<div className="welcome-header">
|
|
<h2 className="welcome-title">ADO2.AI에 오신 것을 환영합니다.</h2>
|
|
<p className="welcome-subtitle">분석, 제작, 배포까지 콘텐츠 마케팅의 전과정을 자동화</p>
|
|
</div>
|
|
|
|
{/* Feature Cards */}
|
|
<div className="feature-grid">
|
|
{features.map((feature) => (
|
|
<div key={feature.id} className="feature-card">
|
|
<div className="feature-number-badge">
|
|
<span>{feature.id}</span>
|
|
</div>
|
|
<h3 className="feature-card-title">{feature.title}</h3>
|
|
<div className="feature-icon-box" style={{ backgroundColor: feature.iconBg }}>
|
|
<img src={feature.icon} alt={feature.title} className="feature-icon-img" />
|
|
</div>
|
|
<p className="feature-card-description">{feature.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WelcomeSection;
|