Startseite Erkunden Hilfe
Anmelden
ehek01
/
bandosj
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

오버랩 메뉴 1차

home vor 6 Monaten
Ursprung
a54e3c58d0
Commit
115237df50
5 geänderte Dateien mit 108 neuen und 23 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 1 0
      index.html
  2. 9 0
      src/componenets/DarkOverlay.jsx
  3. 39 12
      src/componenets/business/index.jsx
  4. 56 8
      src/componenets/header/index.jsx
  5. 3 3
      src/componenets/hero/index.jsx

+ 1 - 0
index.html
Datei anzeigen 

@@ -3,6 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
 
     <title>(주)반도산전</title>
 
   </head>
 
   <body>

+ 9 - 0
src/componenets/DarkOverlay.jsx
Datei anzeigen 

@@ -0,0 +1,9 @@
 
+import React from 'react';
 
+
 
+const DarkOverlay = () => {
 
+    return (
 
+        <div className="absolute inset-0 bg-black/40" />
 
+    );
 
+};
 
+
 
+export default DarkOverlay;

+ 39 - 12
src/componenets/business/index.jsx
Datei anzeigen 

@@ -1,5 +1,6 @@
 
 import React from 'react';
 
 import businessItems from './businessItems.json';
 
+import DarkOverlay from "../DarkOverlay.jsx";
 
 
 const Business = () => {
 
     return (
 
@@ -9,7 +10,7 @@ const Business = () => {
 
                 {/* 텍스트 영역 */}
 
                 <div className="space-y-2 mb-4">
 
                     <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 className="text-zinc-500 text-lg font-bold font-['Inter']">반도산전이 선도하는 힘</div>
 
                 </div>
 
 
                 {/* 이미지 영역 */}
 
@@ -18,10 +19,12 @@ const Business = () => {
 
                         <a
 
                             key={index}
 
                             href={item.url}
 
-                            className="flex-[0_0_calc((100%-24px)/5)] bg-cover bg-center aspect-[16/10] cursor-pointer"
 
+                            className="relative flex-[0_0_calc((100%-24px)/5)] bg-cover bg-center aspect-[16/10] cursor-pointer"
 
                             style={{backgroundImage: `url(${item.image})`}}
 
                         >
 
-                            <div className="p-4">
 
+                            <DarkOverlay />
 
+                            
+                            <div className="relative p-4">
 
                                 <div className="text-white text-xl font-bold font-['Inter'] whitespace-pre-line">{item.label}</div>
 
                                 <div className="text-white text-lg font-bold font-['Inter']">→</div>
 
                             </div>
 
@@ -33,18 +36,42 @@ const Business = () => {
 
             {/* 반도산전은 */}
 
             <div>
 
                 {/* 텍스트 영역 */}
 
-                <div className="space-y-2 mb-4">
 
+                <div className="space-y-2 mb-2.5 pb-10">
 
                     <div className="text-zinc-900 text-5xl font-bold font-['Inter']">반도산전은</div>
 
                 </div>
 
-                <div className="grid grid-cols-4">
 
-                    {[...Array(4)].map((_, index) => (
 
-                        <div key={index} className="relative w-72 h-96 bg-gray-200 rounded-md">
 
-                            <div className="w-56 h-64 left-[38px] top-[32px] absolute overflow-hidden">
 
-                                <div className="left-[48px] top-[69px] absolute justify-start text-blue-700 text-8xl font-semibold font-['Inter']">1위</div>
 
-                            </div>
 
-                            <div className="left-[54px] top-[296px] absolute text-center justify-start text-black text-4xl font-semibold font-['Inter']">통신공사 부문</div>
 
+                <div className="grid grid-cols-4 gap-4">
 
+                    <div className="h-96 p-9 text-center bg-gray-200 rounded-md flex flex-col justify-center gap-10">
 
+                        <div className="">
 
+                            <span className="text-blue-700 text-8xl font-semibold font-['Inter']">1</span>
 
+                            <span className="text-blue-700 text-6xl font-semibold font-['Inter']">st</span>
 
                         </div>
 
-                    ))}
 
+                        <div className="self-stretch text-center justify-start">
 
+                            <span className="text-black text-2xl font-bold font-['Inter']">부산 · 울산 · 경남</span>
 
+                            <br/>
 
+                            <span className="text-black text-4xl font-semibold font-['Inter']">시공능력평가</span>
 
+                        </div>
 
+                    </div>
 
+                    <div className="h-96 p-9 text-center bg-gray-200 rounded-md flex flex-col justify-center gap-10">
 
+                        <div className="">
 
+                            <span className="text-blue-700 text-8xl font-semibold font-['Inter']">947</span>
 
+                            <span className="text-blue-700 text-6xl font-semibold font-['Inter']">억</span>
 
+                        </div>
 
+                        <div className="text-black text-4xl font-semibold font-['Inter']">통신공사 부문</div>
 
+                    </div>
 
+                    <div className="h-96 p-9 text-center bg-gray-200 rounded-md flex flex-col justify-center gap-10">
 
+                        <div className="">
 
+                            <span className="text-blue-700 text-8xl font-semibold font-['Inter']">27</span>
 
+                            <span className="text-blue-700 text-6xl font-semibold font-['Inter']">년</span>
 
+                        </div>
 
+                        <div className="text-black text-4xl font-semibold font-['Inter']">통신공사 부문</div>
 
+                    </div>
 
+                    <div className="h-96 p-9 text-center bg-gray-200 rounded-md flex flex-col justify-center gap-10">
 
+                        <div className="">
 
+                            <span className="text-blue-700 text-8xl font-semibold font-['Inter']">1</span>
 
+                            <span className="text-blue-700 text-6xl font-semibold font-['Inter']">st</span>
 
+                        </div>
 
+                        <div className="text-black text-4xl font-semibold font-['Inter']">통신공사 부문</div>
 
+                    </div>
 
                 </div>
 
             </div>
 
         </div>

+ 56 - 8
src/componenets/header/index.jsx
Datei anzeigen 

@@ -4,26 +4,74 @@ import menuItems from './menuItems.json';
 
 
 const Index = () => {
 
     return (
 
-        <div className="relative flex items-center h-20 w-full">
 
+        <div className="fixed top-0 left-0 right-0 flex items-center h-20 w-full bg-white z-50">
 
             {/* 로고 영역 */}
 
             <div className="absolute left-[40px] top-[26px] flex items-center gap-1 w-32">
 
-                <img className="w-10 h-7" src={logo} />
 
+                <img className="w-10 h-7" src={logo}/>
 
                 <div className="text-gray-600 text-xl font-bold font-['Inter']">반도산전</div>
 
             </div>
 
 
             {/* 메뉴 영역 */}
 
             <nav className="flex justify-center items-center w-full h-full">
 
                 {menuItems.map((item, index) => (
 
-                    <div
 
-                        key={index}
 
-                        className="px-[3vw] text-gray-600 font-medium font-['Inter'] cursor-pointer hover:text-blue-600"
 
-                    >
 
-                        {item.label}
 
+                    <div key={index} className="relative flex flex-col items-center px-[3vw] group cursor-pointer">
 
+                        <div className="text-gray-600 font-bold font-['Inter'] group-hover:text-blue-600">
 
+                            {item.label}
 
+                        </div>
 
+
 
+                        {/* 각 메뉴 하위에 있는 오버랩 메뉴 */}
 
+                        <div
 
+                            id="overlab-menu"
 
+                            className="absolute top-full mt-7 w-32 bg-blue-900 shadow-lg text-white hidden group-hover:flex flex-col items-start p-4 z-40"
 
+                        >
 
+                            <div className="text-md font-light font-['Inter']">CEO 인사말</div>
 
+                            <div className="text-md font-light font-['Inter']">협력사</div>
 
+                            <div className="text-md font-light font-['Inter']">연혁</div>
 
+                            <div className="text-md font-light font-['Inter']">찾아오시는 길</div>
 
+                            <div className="text-md font-light font-['Inter']">조직도</div>
 
+                            <div className="text-md font-light font-['Inter']">사무실 전경</div>
 
+                        </div>
 
                     </div>
 
                 ))}
 
             </nav>
 
+
 
+            {/* 오버랩 메뉴 */}
 
+            <div className="border w-full h-[50vh] absolute bg-blue-900 top-20">
 
+                {/*<div className="w-[736px] h-72 left-[272px] top-0 absolute">*/}
 
+                {/*    <div className="w-32 py-6 left-0 top-0 absolute shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] inline-flex flex-col justify-center items-center gap-5 overflow-hidden">*/}
 
+                {/*        <div className="self-stretch justify-start text-white text-xl font-light font-['Inter']">대표 시공사례</div>*/}
 
+                {/*    </div>*/}
 
+                {/*    <div className="w-32 py-6 left-[147.20px] top-0 absolute shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] inline-flex flex-col justify-center items-center gap-5 overflow-hidden">*/}
 
+                {/*        <div className="self-stretch justify-start text-white text-xl font-light font-['Inter']">CEO 인사말</div>*/}
 
+                {/*        <div className="self-stretch justify-start text-white text-xl font-light font-['Inter']">협력사</div>*/}
 
+                {/*        <div className="self-stretch justify-start text-white text-xl font-light font-['Inter']">연혁</div>*/}
 
+                {/*        <div className="self-stretch justify-start text-white text-xl font-light font-['Inter']">찾아오시는 길</div>*/}
 
+                {/*        <div className="self-stretch justify-start text-white text-xl font-light font-['Inter']">조직도</div>*/}
 
+                {/*        <div className="self-stretch justify-start text-white text-xl font-light font-['Inter']">사무실 전경</div>*/}
 
+                {/*    </div>*/}
 
+                {/*    <div*/}
 
+                {/*        className="w-32 py-6 left-[294.40px] top-0 absolute shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] inline-flex flex-col justify-center items-center gap-5 overflow-hidden">*/}
 
+                {/*        <div className="self-stretch justify-start text-white text-xl font-light font-['Inter']">준법경영*/}
 
+                {/*        </div>*/}
 
+                {/*        <div className="self-stretch justify-start text-white text-xl font-light font-['Inter']">ESG*/}
 
+                {/*            보고서*/}
 
+                {/*        </div>*/}
 
+                {/*    </div>*/}
 
+                {/*    <div*/}
 
+                {/*        className="w-32 py-6 left-[441.60px] top-0 absolute shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] inline-flex flex-col justify-center items-center gap-5 overflow-hidden">*/}
 
+                {/*        <div className="self-stretch justify-start text-white text-xl font-light font-['Inter']">ICT*/}
 
+                {/*        </div>*/}
 
+                {/*    </div>*/}
 
+                {/*    <div*/}
 
+                {/*        className="w-32 py-6 left-[588.80px] top-0 absolute shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] inline-flex flex-col justify-center items-center gap-5 overflow-hidden">*/}
 
+                {/*        <div className="self-stretch justify-start text-white text-xl font-light font-['Inter']">인증서 및*/}
 
+                {/*            면허*/}
 
+                {/*        </div>*/}
 
+                {/*    </div>*/}
 
+                {/*</div>*/}
 
+            </div>
 
         </div>
 
     );
 
 };
 
 
-export default Index;
 
+export default Index;

+ 3 - 3
src/componenets/hero/index.jsx
Datei anzeigen 

@@ -1,4 +1,5 @@
 
 import React, {useState, useEffect} from 'react';
 
+import DarkOverlay from "../DarkOverlay.jsx";
 
 
 const images = [
 
     '/hero.jpg',
 
@@ -26,10 +27,9 @@ const Hero = () => {
 
     return (
 
         <div
 
             style={{ backgroundImage: `url(${images[currentImageIndex]})` }}
 
-            className="relative w-full h-[calc(100vh-80px)] bg-cover bg-center inline-flex flex-col justify-center items-center"
 
+            className="relative w-full h-screen bg-cover bg-center inline-flex justify-center items-center"
 
         >
 
-            {/* 🔹 검은 반투명 오버레이 */}
 
-            <div className="absolute inset-0 bg-black/40" />
 
+            <DarkOverlay />
 
 
             {/* 🔹 콘텐츠 */}
 
             <div className="relative flex flex-col gap-10">