ホーム エクスプローラ ヘルプ
サインイン
ehek01
/
bandosj
1
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

Hero 1차

home 6 ヶ月 前
親
cd98751810
コミット
d6a577550d
13 ファイル変更、206 行追加、15 行削除
分割表示 差分情報を表示
  1. 1 2
      index.html
  2. BIN
      public/hero.jpg
  3. BIN
      public/hero2.png
  4. 8 8
      src/App.jsx
  5. BIN
      src/assets/img.png
  6. BIN
      src/assets/logo.png
  7. 12 0
      src/componenets/business/businessItems.json
  8. 40 0
      src/componenets/business/index.jsx
  9. 23 0
      src/componenets/header/index.jsx
  10. 45 0
      src/componenets/header/menuItems.json
  11. 62 0
      src/componenets/hero/index.jsx
  12. 1 5
      src/main.jsx
  13. 14 0
      src/pages/main/index.jsx

+ 1 - 2
index.html
ファイルの表示 

@@ -2,9 +2,8 @@
 
 <html lang="en">
 
   <head>
 
     <meta charset="UTF-8" />
 
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>Vite + React</title>
 
+    <title>(주)반도산전</title>
 
   </head>
 
   <body>
 
     <div id="root"></div>

BIN
public/hero.jpg
ファイルの表示


BIN
public/hero2.png
ファイルの表示


+ 8 - 8
src/App.jsx
ファイルの表示 

@@ -1,13 +1,13 @@
 
-import { useState } from 'react'
 
+import Header from "./componenets/header/index.jsx";
 
+import Main from "./pages/main/index.jsx";
 
 
 function App() {
 
-  
-
 
-  return (
 
-    <>
 
-      
-    </>
 
-  )
 
+    return (
 
+        <>
 
+            <Header/>
 
+            <Main/>
 
+        </>
 
+    )
 
 }
 
 
 export default App

BIN
src/assets/img.png
ファイルの表示


BIN
src/assets/logo.png
ファイルの表示


+ 12 - 0
src/componenets/business/businessItems.json
ファイルの表示 

@@ -0,0 +1,12 @@
 
+[
 
+  { "label": "전기설비공사" },
 
+  { "label": "정보통신공사" },
 
+  { "label": "ICT" },
 
+  { "label": "통합보안시스템" },
 
+  { "label": "소방설비공사" },
 
+  { "label": "OSP 기간통신사업" },
 
+  { "label": "설계(CAD)\n견적(실행 제안)" },
 
+  { "label": "정보통신설비\n유지보수" },
 
+  { "label": "제품생산\nR&D" },
 
+  { "label": "친환경공사" }
 
+]

+ 40 - 0
src/componenets/business/index.jsx
ファイルの表示 

@@ -0,0 +1,40 @@
 
+import React from 'react';
 
+import businessItems from './businessItems.json';
 
+
 
+const Business = () => {
 
+    return (
 
+        <div className="h-[853px] relative bg-neutral-50">
 
+            <div className="border w-full h-20 mt-[33px] absolute">
 
+                <div className="text-zinc-900 text-5xl font-bold font-['Inter']">사업 소개</div>
 
+                <div className="text-zinc-500 text-lg font-normal font-['Inter']">반도산전이 선도하는 힘</div>
 
+            </div>
 
+            <div className="w-full h-[485px] top-[134px] absolute bg-white overflow-hidden">
 
+                {businessItems.map((item, index) => (
 
+                    <div
 
+                        key={index}
 
+                        className={`${item?.customClass || 'w-60 h-60'} absolute bg-gray-100 inline-flex flex-col justify-center items-start gap-2.5`}
 
+                        style={{
 
+                            left: item.left,
 
+                            top: item.top
 
+                        }}
 
+                    >
 
+                        <div
 
+                            className="self-stretch flex-1 bg-white outline-1 outline-offset-[-1px] flex flex-col justify-start items-start gap-4 overflow-hidden">
 
+                            <div className="self-stretch flex-1 flex flex-col justify-center items-center">
 
+                                <div
 
+                                    className="self-stretch flex-1 p-4 flex flex-col justify-start items-start gap-2 overflow-hidden">
 
+                                    <div
 
+                                        className="justify-start text-white text-xl font-semibold font-['Inter']">{item.title}</div>
 
+                                    <div className="justify-start text-gray-50 text-sm font-normal font-['Inter']">→
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                ))}
 
+            </div>
 
+        </div>
 
+    )
 
+}
 
+
 
+export default Business;

+ 23 - 0
src/componenets/header/index.jsx
ファイルの表示 

@@ -0,0 +1,23 @@
 
+import React from 'react';
 
+import logo from '../../assets/logo.png'
 
+import menuItems from './menuItems.json';
 
+
 
+const Index = () => {
 
+    return (
 
+        <div className="relative w-full h-20 bg-white outline-1 outline-offset-[-1px] outline-gray-200 overflow-hidden">
 
+            <div className="absolute w-32 left-[40px] top-[26px] inline-flex justify-start items-start gap-1">
 
+                <img className="w-10 h-7" src={logo}/>
 
+                <div className="justify-start text-gray-600 text-xl font-bold font-['Inter']">반도산전</div>
 
+            </div>
 
+            <div
 
+                className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white inline-flex justify-center items-center gap-8 overflow-hidden">
 
+                {menuItems.map((item, index) => (
 
+                    <div key={index}
 
+                         className="justify-start text-gray-600 text-base font-medium font-['Inter'] cursor-pointer hover:text-blue-600 transition-colors duration-200 select-none">{item.label}</div>
 
+                ))}
 
+            </div>
 
+        </div>
 
+    );
 
+};
 
+
 
+export default Index;

+ 45 - 0
src/componenets/header/menuItems.json
ファイルの表示 

@@ -0,0 +1,45 @@
 
+[
 
+    {
 
+        "label": "사업소개",
 
+        "href": "/company",
 
+        "children": [
 
+            { "label": "CEO인사말", "href": "/ceo" },
 
+            { "label": "연혁", "href": "/history" },
 
+            { "label": "조직도", "href": "/organization" },
 
+            { "label": "사무실 전경", "href": "/office" },
 
+            { "label": "특허/인증", "href": "/patent" },
 
+            { "label": "협력업체", "href": "/partners" },
 
+            { "label": "찾아오시는길", "href": "/location" }
 
+        ]
 
+    },
 
+    {
 
+        "label": "기업소개",
 
+        "href": "/business",
 
+        "children": [
 
+            { "label": "통합배선/CATV", "href": "/business-area" },
 
+            { "label": "CCTV/비상벨", "href": "/technology" },
 
+            { "label": "무선통신/전관방송(PA)", "href": "/technology" }
 
+        ]
 
+    },
 
+    {
 
+        "label": "지속가능경영",
 
+        "href": "/performance",
 
+        "children": []
 
+    },
 
+    {
 
+        "label": "ICT",
 
+        "href": "/support",
 
+        "children": [
 
+            { "label": "공지사항", "href": "/notice" },
 
+            { "label": "자료실", "href": "/resources" }
 
+        ]
 
+    },
 
+    {
 
+        "label": "주요실적",
 
+        "href": "/support",
 
+        "children": [
 
+            { "label": "공지사항", "href": "/notice" },
 
+            { "label": "자료실", "href": "/resources" }
 
+        ]
 
+    }
 
+]

+ 62 - 0
src/componenets/hero/index.jsx
ファイルの表示 

@@ -0,0 +1,62 @@
 
+import React, {useState, useEffect} from 'react';
 
+
 
+const images = [
 
+    '/hero.jpg',
 
+    // '/hero2.png',
 
+    '/hero.jpg',
 
+];
 
+
 
+const Hero = () => {
 
+    const [currentImageIndex, setCurrentImageIndex] = useState(0);
 
+
 
+    useEffect(() => {
 
+        const timer = setInterval(() => {
 
+            setCurrentImageIndex((prevIndex) =>
 
+                prevIndex === images.length - 1 ? 0 : prevIndex + 1
 
+            );
 
+        }, 5000);
 
+
 
+        return () => clearInterval(timer);
 
+    }, [currentImageIndex]);
 
+
 
+    const handleDotClick = (index) => {
 
+        setCurrentImageIndex(index);
 
+    };
 
+
 
+    return (
 
+        <div
 
+            style={{backgroundImage: `url(${images[currentImageIndex]})`}}
 
+            className={`bg-cover bg-center w-full h-[747px] px-20 py-14 inline-flex flex-col justify-center items-center gap-20 overflow-hidden transition-all duration-500`}>
 
+            <div
 
+                className="px-2.5 pt-20 pb-2.5 flex flex-col justify-start items-start gap-8 overflow-hidden">
 
+                <div
 
+                    className="text-center justify-center text-white text-6xl font-semibold font-['Inter']">스마트
 
+                    네트워크 리더 반도산전
 
+                </div>
 
+                <div
 
+                    className="self-stretch text-center justify-start text-zinc-100 text-xl font-normal font-['Inter']">부·울·경
 
+                    시공능력평가 1위를 넘어 대한민국 시공능력평가 1위로 도약합니다.<br/>고객의 스마트 네트워크 산업을 더욱 가치있게 만들어 나갑니다.
 
+                </div>
 
+                <div className="self-stretch p-2.5 inline-flex justify-center items-center gap-4 overflow-hidden">
 
+                    <div
 
+                        className="w-44 px-8 py-3 outline outline-offset-[-0.50px] outline-white flex justify-center items-center overflow-hidden">
 
+                        <div
 
+                            className="w-28 text-center justify-start text-white text-base font-semibold font-['Inter']">ABOUT
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div className="w-[846px] h-6 p-2.5 inline-flex justify-center items-center gap-2 overflow-hidden">
 
+                {images.map((_, index) => (
 
+                    <div
 
+                        key={index}
 
+                        onClick={() => handleDotClick(index)}
 
+                        className={`w-2 h-2 relative select-none ${index === currentImageIndex ? 'bg-white' : 'bg-white/50'} rounded cursor-pointer`}
 
+                    />
 
+                ))}
 
+            </div>
 
+        </div>
 
+    );
 
+};
 
+
 
+export default Hero;

+ 1 - 5
src/main.jsx
ファイルの表示 

@@ -3,8 +3,4 @@ import { createRoot } from 'react-dom/client'
 
 import './index.css'
 
 import App from './App.jsx'
 
 
-createRoot(document.getElementById('root')).render(
 
-  <StrictMode>
 
-    <App />
 
-  </StrictMode>,
 
-)
 
+createRoot(document.getElementById('root')).render(<App />)

+ 14 - 0
src/pages/main/index.jsx
ファイルの表示 

@@ -0,0 +1,14 @@
 
+import React from 'react';
 
+import Hero from "../../componenets/hero/index.jsx";
 
+import Business from "../../componenets/business/index.jsx";
 
+
 
+const Main = () => {
 
+    return (
 
+        <>
 
+            <Hero />
 
+            <Business />
 
+        </>
 
+    );
 
+};
 
+
 
+export default Main;