274 lines
9.6 KiB
TypeScript
274 lines
9.6 KiB
TypeScript
// src/app/page.tsx (랜딩 페이지)
|
|
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import {
|
|
Factory,
|
|
Battery,
|
|
LineChart,
|
|
Settings,
|
|
ChevronRight,
|
|
Lightbulb,
|
|
BarChart3,
|
|
} from "lucide-react";
|
|
|
|
|
|
import { redirect } from 'next/navigation'
|
|
|
|
|
|
export default function Home() {
|
|
|
|
//최초 페이지 접근시 로그인 페이지로 리다이렉트
|
|
redirect('/login')
|
|
|
|
// 산업 분야별 솔루션 데이터
|
|
const industries = [
|
|
{
|
|
title: "제조업",
|
|
icon: <Factory className="h-12 w-12 mb-4 text-blue-600" />,
|
|
description: "생산 공정 최적화와 에너지 효율 향상으로 제조 경쟁력 강화",
|
|
features: ["실시간 에너지 모니터링", "설비별 효율 분석", "원단위 관리"],
|
|
},
|
|
{
|
|
title: "화학/정유",
|
|
icon: <Battery className="h-12 w-12 mb-4 text-blue-600" />,
|
|
description: "공정 에너지 최적화 및 안전한 운영 지원",
|
|
features: ["공정 최적화", "에너지 회수 분석", "규제 대응"],
|
|
},
|
|
{
|
|
title: "반도체/디스플레이",
|
|
icon: <Settings className="h-12 w-12 mb-4 text-blue-600" />,
|
|
description: "클린룸 및 유틸리티 시스템의 효율적 운영",
|
|
features: ["클린룸 에너지 관리", "유틸리티 최적화", "품질 연계 분석"],
|
|
},
|
|
];
|
|
|
|
// 주요 기능 데이터
|
|
const features = [
|
|
{
|
|
icon: <LineChart className="h-6 w-6 text-blue-600" />,
|
|
title: "실시간 모니터링",
|
|
description: "설비와 에너지 사용량을 실시간으로 모니터링",
|
|
},
|
|
{
|
|
icon: <BarChart3 className="h-6 w-6 text-blue-600" />,
|
|
title: "데이터 분석",
|
|
description: "AI 기반 에너지 사용 패턴 분석 및 최적화",
|
|
},
|
|
{
|
|
icon: <Lightbulb className="h-6 w-6 text-blue-600" />,
|
|
title: "절감 방안 도출",
|
|
description: "맞춤형 에너지 절감 방안 제시",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
{/* Hero Section */}
|
|
<div className="relative h-screen flex items-center justify-center bg-gradient-to-r from-blue-600 to-blue-800">
|
|
<div className="absolute inset-0 bg-black/50" />
|
|
<div className="relative z-10 text-center text-white px-4 max-w-4xl mx-auto">
|
|
<h1 className="text-5xl font-bold mb-6">
|
|
Factory Energy Management System
|
|
</h1>
|
|
<p className="text-xl mb-8 leading-relaxed">
|
|
최첨단 AI 기술로 구현하는 스마트 에너지 관리 시스템으로 비용 절감과
|
|
효율성을 극대화하세요
|
|
</p>
|
|
<div className="space-x-4">
|
|
<Link href="/login">
|
|
<Button size="lg" className="bg-blue-500 hover:bg-blue-600">
|
|
시작하기
|
|
<ChevronRight className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
className="text-white border-white hover:bg-white/10"
|
|
>
|
|
자세히 보기
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features Section */}
|
|
<div className="py-20 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">주요 기능</h2>
|
|
<p className="text-xl text-gray-600">
|
|
스마트한 에너지 관리를 위한 핵심 기능을 제공합니다
|
|
</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{features.map((feature, index) => (
|
|
<Card
|
|
key={index}
|
|
className="text-center p-6 hover:shadow-lg transition-shadow"
|
|
>
|
|
<CardContent>
|
|
<div className="flex justify-center mb-4">{feature.icon}</div>
|
|
<h3 className="text-xl font-semibold mb-2">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-gray-600">{feature.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Industries Section */}
|
|
<div className="py-20 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
|
산업별 맞춤 솔루션
|
|
</h2>
|
|
<p className="text-xl text-gray-600">
|
|
다양한 산업 분야의 특성을 고려한 최적화된 솔루션을 제공합니다
|
|
</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{industries.map((industry, index) => (
|
|
<Card key={index} className="hover:shadow-lg transition-shadow">
|
|
<CardContent className="p-6">
|
|
<div className="text-center">
|
|
{industry.icon}
|
|
<h3 className="text-xl font-semibold mb-3">
|
|
{industry.title}
|
|
</h3>
|
|
<p className="text-gray-600 mb-4">{industry.description}</p>
|
|
</div>
|
|
<ul className="space-y-2">
|
|
{industry.features.map((feature, idx) => (
|
|
<li key={idx} className="flex items-center text-gray-700">
|
|
<ChevronRight className="h-4 w-4 text-blue-600 mr-2" />
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Benefits Section */}
|
|
<div className="py-20 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">도입 효과</h2>
|
|
<p className="text-xl text-gray-600">
|
|
FEMS 도입을 통해 기대할 수 있는 핵심 가치
|
|
</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-4 gap-8">
|
|
{[
|
|
{
|
|
title: "에너지 비용 절감",
|
|
value: "15~25%",
|
|
description: "연간 에너지 비용 절감",
|
|
},
|
|
{
|
|
title: "설비 효율 개선",
|
|
value: "20%",
|
|
description: "설비 운영 효율 향상",
|
|
},
|
|
{
|
|
title: "탄소 배출 감축",
|
|
value: "30%",
|
|
description: "온실가스 배출량 감축",
|
|
},
|
|
{
|
|
title: "투자비 회수",
|
|
value: "2년",
|
|
description: "평균 투자비 회수 기간",
|
|
},
|
|
].map((benefit, index) => (
|
|
<Card
|
|
key={index}
|
|
className="text-center hover:shadow-lg transition-shadow"
|
|
>
|
|
<CardContent className="p-6">
|
|
<div className="text-4xl font-bold text-blue-600 mb-2">
|
|
{benefit.value}
|
|
</div>
|
|
<h3 className="text-lg font-semibold mb-2">
|
|
{benefit.title}
|
|
</h3>
|
|
<p className="text-gray-600">{benefit.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA Section */}
|
|
<div className="py-20 bg-blue-600">
|
|
<div className="max-w-4xl mx-auto px-4 text-center text-white">
|
|
<h2 className="text-3xl font-bold mb-4">지금 바로 시작하세요</h2>
|
|
<p className="text-xl mb-8">
|
|
스마트한 에너지 관리의 시작, FEMS가 함께합니다
|
|
</p>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="text-white border-white hover:bg-white/10"
|
|
>
|
|
무료 상담 신청
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-gray-900 text-gray-300 py-12">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<div className="grid md:grid-cols-4 gap-8">
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-4">About Us</h3>
|
|
<p className="text-sm">
|
|
최첨단 기술로 에너지 관리의 혁신을 선도하는 기업입니다.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-4">Solutions</h3>
|
|
<ul className="space-y-2 text-sm">
|
|
<li>제조업</li>
|
|
<li>화학/정유</li>
|
|
<li>반도체/디스플레이</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-4">Support</h3>
|
|
<ul className="space-y-2 text-sm">
|
|
<li>기술지원</li>
|
|
<li>교육</li>
|
|
<li>문의하기</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-4">Contact</h3>
|
|
<ul className="space-y-2 text-sm">
|
|
<li>contact@fems.com</li>
|
|
<li>02-123-4567</li>
|
|
<li>서울시 강남구 테헤란로</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="border-t border-gray-800 mt-8 pt-8 text-sm text-center">
|
|
© 2024 PLM. All rights reserved.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|