페이지 연결 및 하단바 추가

spirograph/src/components/Header/Header.jsx

@@ -1,138 +1,137 @@
 import * as React from "react";
-import '../../pages/main/main.css';
-import './Header.css';
-
+import "../../pages/main/main.css";
+import "./Header.css";
 import { useNavigate } from "react-router-dom";
 
-
 export const Header = () => {
-
-    const navigate = useNavigate();
-    return (
-
-
-        <div className="flex flex-col px-5 w-full max-md:max-w-full">
-        <div className="flex gap-5 items-start text-sm font-bold text-white max-md:flex-wrap">
-            <div className="flex flex-col">
-            <div className="img-container">
+  const navigate = useNavigate();
+  return (
+    <div className="flex flex-col px-5 w-full max-w-full">
+      <div className="flex gap-5 items-start text-sm font-bold text-white flex-wrap">
+        <div className="flex flex-col">
+          <div className="img-container">
             <img
-                loading="lazy"
-                src="https://cdn.builder.io/api/v1/image/assets/TEMP/e273b21e7a814573f6043f3bb8a5765e678dbd03a7dcdd8675469b73c1b547a1?"
-                className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[218px]"
-                style={{height: "0px"}}
+              loading="lazy"
+              src="https://cdn.builder.io/api/v1/image/assets/TEMP/e273b21e7a814573f6043f3bb8a5765e678dbd03a7dcdd8675469b73c1b547a1?"
+              className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[218px]"
+              style={{ height: "0px" }}
             />
-            <div className="mt-1 text-custom text-left mr-14" onClick={()=>navigate('./LogicPage')}>Symbol Logic</div>
+            <div
+              className="mt-1 text-custom text-left"
+              onClick={() => navigate("./LogicPage")}
+            >
+              Symbol Logic
             </div>
-            </div>
-            <div className="flex flex-col whitespace-nowrap">
-            <div className="img-container">
+          </div>
+        </div>
+        <div className="flex flex-col whitespace-nowrap">
+          <div className="img-container">
             <img
-                loading="lazy"
-                src="https://cdn.builder.io/api/v1/image/assets/TEMP/9c39689acba82139b57946ceeac68a4e60177d5b1f6190eb7594a0f5a99471a0?"
-                className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[217px]"
-                style={{height: "0px"}}
+              loading="lazy"
+              src="https://cdn.builder.io/api/v1/image/assets/TEMP/9c39689acba82139b57946ceeac68a4e60177d5b1f6190eb7594a0f5a99471a0?"
+              className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[217px]"
+              style={{ height: "0px" }}
             />
             <div className="mt-1 text-custom text-left">ABOUT</div>
-            </div>
-            </div>
-            <div className="flex flex-col">
-            <div className="img-container">
+          </div>
+        </div>
+        <div className="flex flex-col">
+          <div className="img-container">
             <img
-                loading="lazy"
-                src="https://cdn.builder.io/api/v1/image/assets/TEMP/e273b21e7a814573f6043f3bb8a5765e678dbd03a7dcdd8675469b73c1b547a1?"
-                className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[218px]"
-                style={{height: "0px"}}
+              loading="lazy"
+              src="https://cdn.builder.io/api/v1/image/assets/TEMP/e273b21e7a814573f6043f3bb8a5765e678dbd03a7dcdd8675469b73c1b547a1?"
+              className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[218px]"
+              style={{ height: "0px" }}
             />
             <div className="mt-1 text-custom text-left">Business Model</div>
-            </div>
-            </div>
-            <div className="flex flex-col whitespace-nowrap">
-            <div className="img-container">
+          </div>
+        </div>
+        <div className="flex flex-col whitespace-nowrap">
+          <div className="img-container">
             <img
-                loading="lazy"
-                src="https://cdn.builder.io/api/v1/image/assets/TEMP/e273b21e7a814573f6043f3bb8a5765e678dbd03a7dcdd8675469b73c1b547a1?"
-                className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[218px]"
-                style={{height: "0px"}}
+              loading="lazy"
+              src="https://cdn.builder.io/api/v1/image/assets/TEMP/e273b21e7a814573f6043f3bb8a5765e678dbd03a7dcdd8675469b73c1b547a1?"
+              className="self-center border border-solid border-stone-500 stroke-[1px] stroke-stone-500 w-[218px]"
+              style={{ height: "0px" }}
             />
             <div className="mt-1 text-custom text-left">CONTACT</div>
-            </div>
-            </div>
-            <div className="flex flex-col whitespace-nowrap max-md:max-w-full">
-            <div className="img-container">
+          </div>
+        </div>
+        <div className="flex flex-col max-w-full">
+          <div className="img-container">
             <img
-                loading="lazy"
-                src="https://cdn.builder.io/api/v1/image/assets/TEMP/eb85f72d64de93b50a22883e92d0bd681d50f84e866a50349337a0eff12d5a74?"
-                className="w-full border border-solid border-stone-500 stroke-[1px] stroke-stone-500 max-md:max-w-full"
-                style={{height: "0px"}}
+              loading="lazy"
+              src="https://cdn.builder.io/api/v1/image/assets/TEMP/eb85f72d64de93b50a22883e92d0bd681d50f84e866a50349337a0eff12d5a74?"
+              className="w-full border border-solid border-stone-500 stroke-[1px] stroke-stone-500 max-w-full"
+              style={{ height: "0px" }}
             />
-            <div className="mt-1 text-custom max-md:max-w-full text-left">SHOP</div>
-            </div>
-            </div>
-            <div className="flex flex-col self-stretch text-lg">
-            <div className="img-container">
+            <div className="mt-1 text-custom max-w-full text-left">SHOP</div>
+          </div>
+        </div>
+        <div className="flex flex-col self-end text-lg fixed top-[1.5vh] right-[1.5vw] max-w-full">
+          <div className="img-container">
             <img
-                loading="lazy"
-                src="https://cdn.builder.io/api/v1/image/assets/TEMP/7aa30990a4364aea264e71e50ad7f68ba74024395d1b99a9a0c940b6cb3c347f?"
-                className="w-full border border-solid border-stone-500 stroke-[1px] stroke-stone-500"
-                style={{height: "0px"}}
+              loading="lazy"
+              src="https://cdn.builder.io/api/v1/image/assets/TEMP/7aa30990a4364aea264e71e50ad7f68ba74024395d1b99a9a0c940b6cb3c347f?"
+              className="w-full border border-solid border-stone-500 stroke-[1px] stroke-stone-500"
+              style={{ height: "0px" }}
             />
             <div className="mt-1.5 text-left">MADE GRAPHIC &gt;</div>
-            </div>
-            </div>
-        </div>
-        <div className="flex self-start mt-12   max-md:flex-wrap max-md:mt-10 ">
-            {/*(<div className="flex-auto text-9xl italic font-black text-white leading-[77px] max-md:text-4xl max-md:leading-7">*/}
-
-                <img src="/assets/images/newSymbol.svg" alt="Symbol" className="symbol-img" />
-
-            {/*</div>*/}
-            <div className="flex-auto self-start ml-4 mt-0 max-md:max-w-full">
-            <div className="flex max-md:flex-col max-md:gap-0">
-                <div className="flex flex-col w-[35%] max-md:ml-0 max-md:w-full">
-                <div className="firstExplanation">
-                <div className="text-custom ml-7 text-left font-medium leading-custom text-neutral-400 max-md:mt-6">
-                    ‘The Symbol’ 은 자신의 아이덴티티를 활용하여 ai 어시스턴트의{" "}
-                    인터페이스를 커스텀을 도와주는 디자인 스튜디오 입니다. {"     "}도형 ‘원'
-                    을 기반으로 그래픽이 생성 되며 추가로 개인의 맞춤 성향을 위한
-                    ai가  커스텀을 도와줍니다. 우리의 ‘The Symbol ’을 통해 자신만의 ‘ai{" "}
-
-                    어시스턴트’를 제작해보세요 !
-                </div>
-                </div>
-                </div>
-                <div className="flex flex-col ml-5 w-[50%] max-md:ml-0 max-md:w-full">
-                <div className="text-custom text-left ml-1 font-medium leading-custom text-neutral-400 max-md:mt-6 max-md:max-w-full">
-                    &quot;'The Symbol'은 생년월일, 개인명에 근거하여 생성되는
-                    상징물로서, 하이포 사이클로이드의 {" "}
-                    기하학적 특성에서 착안했다. 하이포 사이클로이드는 큰 원의 내부를
-                    맴도는 작은 원의 경계에 {" "}
-                    위치한 점의 궤적으로 정의된다. 이 궤적은 개별적 존재가 사회에서
-                    자신만의 신념, 가치관, 이데올{" "}로기를 바탕으로 경로를 그려 나가는
-                    과정과 상통합니다. 다양한 이념과 삶의 정의를 지닌 우리는{" "}
-                    서로 연계되어 있음에도 불구하고 조화를 이루며 사회를 형성합니다.{" "}
-                </div>
-                </div>
-            </div>
-            </div>
-            <div className="flex flex-col text-left text-custom text-neutral-400 my-auto font-medium leading-4 mr-14 mb-8">
+          </div>
+          <div className="flex flex-col text-left text-custom text-neutral-400 font-medium leading-4 mb-8">
             <div className="flex">
-                <div className="flex flex-col mr-4">
-                <div className="text-nowrap">_hhesta ©</div>
-                <div className="text-nowrap">1999-2024</div>
-                </div>
-                <div className="text-3xl text-custom font-thin leading-9 text-gray-200 mr-4">/</div>
-                <div className="flex flex-col">
-                <div className="text-nowrap">_hhesta ©</div>
-                <div className="text-nowrap">1999-2024</div>
-                </div>
+              <div className="flex flex-col mr-4">
+                <div className="whitespace-nowrap">_hhesta ©</div>
+                <div className="whitespace-nowrap">1999-2024</div>
+              </div>
+              <div className="text-3xl text-custom font-thin leading-9 text-gray-200 mr-4">
+                /
+              </div>
+              <div className="flex flex-col">
+                <div className="whitespace-nowrap">_hhesta ©</div>
+                <div className="whitespace-nowrap">1999-2024</div>
+              </div>
             </div>
             <div className="mt-6 text-white">
-                INCHEON Metropolitan City, <br />
-                South KOREA
-            </div>
+              INCHEON Metropolitan City, <br />
+              South KOREA
             </div>
+          </div>
         </div>
+      </div>
+      <div className="flex self-start mt-12 flex-wrap mt-10">
+        <img
+          src="/assets/images/newSymbol.svg"
+          alt="Symbol"
+          className="symbol-img"
+        />
+        <div className="flex-auto self-start ml-4 mt-0 max-w-full">
+          <div className="flex flex-col max-w-full">
+            <div className="flex flex-col w-[35%] max-w-full">
+              <div className="firstExplanation">
+                <div className="text-custom ml-7 text-left font-medium leading-custom text-neutral-400 mt-6">
+                  ‘The Symbol’ 은 자신의 아이덴티티를 활용하여 ai 어시스턴트의
+                  인터페이스를 커스텀을 도와주는 디자인 스튜디오 입니다. 도형
+                  ‘원' 을 기반으로 그래픽이 생성 되며 추가로 개인의 맞춤 성향을
+                  위한 ai가 커스텀을 도와줍니다. 우리의 ‘The Symbol ’을 통해
+                  자신만의 ‘ai 어시스턴트’를 제작해보세요 !
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-col ml-5 w-[50%] max-w-full">
+              <div className="text-custom text-left ml-1 font-medium leading-custom text-neutral-400 mt-6 max-w-full">
+                "The Symbol'은 생년월일, 개인명에 근거하여 생성되는 상징물로서,
+                하이포 사이클로이드의 기하학적 특성에서 착안했다. 하이포
+                사이클로이드는 큰 원의 내부를 맴도는 작은 원의 경계에 위치한
+                점의 궤적으로 정의된다. 이 궤적은 개별적 존재가 사회에서
+                자신만의 신념, 가치관, 이데올로기를 바탕으로 경로를 그려 나가는
+                과정과 상통합니다. 다양한 이념과 삶의 정의를 지닌 우리는 서로
+                연계되어 있음에도 불구하고 조화를 이루며 사회를 형성합니다.
+              </div>
+            </div>
+          </div>
         </div>
-
-    )
-    }
+      </div>
+    </div>
+  );
+};

spirograph/src/components/NavBar/Navbar.jsx

@@ -3,9 +3,9 @@ import React, { useState, useEffect } from "react";
 import * as S from "./styles";
 import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
-import Horizon from "./horizon";
-import Logo from "../../assets/brandingImg/RealSymbol.png";
-export const ImageWrapper = styled.div`
+import Horizon from "../../components/NavBar/horizon";
+import Logo from "../../assets/brandingImg/Logoo.svg";
+const ImageWrapper = styled.div`
   display: flex;
   width: 100%;
   //원래 1.69
@@ -14,22 +14,23 @@ export const ImageWrapper = styled.div`
   margin-left: 2.5rem;
   height: 100%;
 `;
-export const Image = styled.img`
+const Image = styled.img`
   display: block;
   width: auto;
 `;
-export const Group = styled.div`
+const Group = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   margin-right: 1.25rem;
   margin-bottom: 7.94rem;
+  text-align: start;
   &:hover {
     background-color: #fff;
     transition: background-color 0.8s;
   }
 `;
-export function Nav() {
+const Navbar = () => {
   const navigate = useNavigate();
   const [topOffset, setTopOffset] = useState(0);
   const [lastScrollY, setLastScrollY] = useState(0);
@@ -99,6 +100,6 @@ export function Nav() {
       </Group>
     </S.NavBar>
   );
-}
+};
 
-export default Nav;
+export default Navbar;

spirograph/src/components/NavBar/styles.jsx

@@ -22,7 +22,6 @@ export const NavMenu = styled.div`
   cursor: pointer;
   font-size: 1rem;
   font-family: "Pretendard-Regular";
-  height: 1rem;
   padding: 0.5rem 0;
   &:hover {
     background-color: #fff;

spirograph/src/components/UnderBar/Bar.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+const Bar = () => {
+  return (
+    <div className="flex justify-center items-center px-16 py-1.5 mt-20 w-full text-xs font-bold whitespace-nowrap bg-neutral-900 text-zinc-500 max-md:px-5 max-md:mt-10 max-md:max-w-full">
+      <div className="flex gap-5 justify-between items-center w-full max-w-[1688px] max-md:flex-wrap max-md:max-w-full">
+        <div className="self-stretch my-auto text-neutral-400">Cooperation</div>
+        <img
+          loading="lazy"
+          src="/assets/images/underbar6.png"
+          className="shrink-0 self-stretch my-auto max-w-full aspect-[5.56] w-[108px]"
+          alt=""
+        />
+        <div className="shrink-0 self-stretch my-auto aspect-[2.7] w-[38px] text-neutral-400">
+          PBG
+        </div>
+        <img
+          loading="lazy"
+          src="/assets/images/underbar3.png"
+          className="shrink-0 self-stretch my-auto w-11 aspect-[1.3]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar8.png"
+          className="shrink-0 self-stretch my-auto w-11 aspect-[1.22]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="https://cdn.builder.io/api/v1/image/assets/TEMP/6a42bfc30eb6305c7456a0f42dd7fbe1f7ca1ec10490ed4b86f4050ba7559cc0?"
+          className="shrink-0 self-stretch my-auto w-10 aspect-[1.59]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar5.png"
+          className="shrink-0 self-stretch my-auto aspect-[0.88] w-[23px]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar7.png"
+          className="shrink-0 self-stretch my-auto aspect-[2.56] w-[66px]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar4.png"
+          className="shrink-0 self-stretch my-auto aspect-[0.93] w-[30px]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar111.svg"
+          className="shrink-0 self-stretch bg-blend-multiply aspect-square w-[41px]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar12.png"
+          className="shrink-0 self-stretch my-auto aspect-[3.85] w-[84px]"
+          alt=""
+        />
+        <img
+          loading="lazy"
+          src="/assets/images/underbar2.png"
+          className="shrink-0 self-stretch my-auto aspect-[1.75] w-[51px]"
+          alt=""
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Bar;