duckil_plm/plm-app/src/app/page.tsx

274 lines
9.6 KiB
TypeScript
Raw Normal View History

2024-12-12 18:31:36 +09:00
// 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'
2024-12-12 18:31:36 +09:00
export default function Home() {
//최초 페이지 접근시 로그인 페이지로 리다이렉트
redirect('/login')
2024-12-12 18:31:36 +09:00
// 산업 분야별 솔루션 데이터
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-12-13 10:57:13 +09:00
© 2024 PLM. All rights reserved.
2024-12-12 18:31:36 +09:00
</div>
</div>
</footer>
</div>
);
}