diff --git a/src/asset/images/area.png b/src/asset/images/area.png new file mode 100644 index 0000000..b5dfa43 Binary files /dev/null and b/src/asset/images/area.png differ diff --git a/src/asset/images/area_black.png b/src/asset/images/area_black.png new file mode 100644 index 0000000..de7b0fe Binary files /dev/null and b/src/asset/images/area_black.png differ diff --git a/src/asset/images/history.png b/src/asset/images/history.png new file mode 100644 index 0000000..3fc7496 Binary files /dev/null and b/src/asset/images/history.png differ diff --git a/src/asset/images/history_black.png b/src/asset/images/history_black.png new file mode 100644 index 0000000..ff57d3a Binary files /dev/null and b/src/asset/images/history_black.png differ diff --git a/src/asset/images/project.png b/src/asset/images/project.png new file mode 100644 index 0000000..c200308 Binary files /dev/null and b/src/asset/images/project.png differ diff --git a/src/asset/images/project_black.png b/src/asset/images/project_black.png new file mode 100644 index 0000000..d2fbf3d Binary files /dev/null and b/src/asset/images/project_black.png differ diff --git a/src/asset/scss/components/management.scss b/src/asset/scss/components/management.scss index 534e633..97dfa87 100644 --- a/src/asset/scss/components/management.scss +++ b/src/asset/scss/components/management.scss @@ -41,8 +41,8 @@ display: flex; justify-content: center; align-items: center; - width: 125px; - height: 125px; + width: 180px; + height: 180px; object-fit: cover; } diff --git a/src/asset/scss/components/siteActivityComponent.scss b/src/asset/scss/components/siteActivityComponent.scss index 1936ff5..1672f76 100644 --- a/src/asset/scss/components/siteActivityComponent.scss +++ b/src/asset/scss/components/siteActivityComponent.scss @@ -17,19 +17,21 @@ .main-info{ font-size:60px; - font-weight: bold; + font-weight: 300; color: white; + margin-bottom: 5px; } .main-info-unit{ color: white; font-size:30px; - font-weight: bold; + font-weight: 10; + margin-bottom: 10px; } .main-info-unit-writes{ color: white; font-size:15px; - font-weight: bold; + font-weight: 10; } } @@ -47,7 +49,6 @@ height: 80px; box-sizing: border-box; margin : 5px 0; - .siteActivityComponent-inner{ display: flex; @@ -56,16 +57,19 @@ .main-info{ font-size:25px; - font-weight: bold; + font-weight: 300; + margin-bottom: 0.5px; } .main-info-unit{ font-size:15px; - font-weight: bold; + font-weight: 10; + margin-bottom: 1px; } .main-info-unit-writes{ - font-size:15px; - font-weight: bold; + font-size:10px; + font-weight: 10; + } } diff --git a/src/asset/scss/pages/main.scss b/src/asset/scss/pages/main.scss index b48efd2..aec19aa 100644 --- a/src/asset/scss/pages/main.scss +++ b/src/asset/scss/pages/main.scss @@ -49,7 +49,7 @@ .second-section-writes{ font-size:20px; font-weight: bold; - // margin-top:10px; + margin-top:20px; } .siteActivityComponent-wrap{ display: flex; @@ -91,6 +91,7 @@ .second-section-title{ font-size:30px; font-weight: bold; + margin-bottom: 10px; } .second-section-writes{ font-size:20px; diff --git a/src/components/SiteActivityComponent.js b/src/components/SiteActivityComponent.js index 0aea086..7f838be 100644 --- a/src/components/SiteActivityComponent.js +++ b/src/components/SiteActivityComponent.js @@ -1,8 +1,13 @@ import React, { useState, useEffect, useRef } from 'react'; -import MoneyIcon from '@mui/icons-material/Money'; -import WorkHistoryIcon from '@mui/icons-material/WorkHistory'; -import HomeWorkIcon from '@mui/icons-material/HomeWork'; +import History from "../asset/images/history.png"; +import Project from "../asset/images/project.png"; +import Area from "../asset/images/area.png"; + + +import HistoryBlack from "../asset/images/history_black.png"; +import ProjectBlack from "../asset/images/project_black.png"; +import AreaBlack from "../asset/images/area_black.png"; @@ -36,7 +41,7 @@ function SiteActivityComponent(props) { useEffect(() => { if (isVisible) { const start = performance.now(); // 현재 시간을 기록 - const duration = 3000; // 애니메이션 지속 시간 (1.5초) + const duration = 1000; // 애니메이션 지속 시간 (1.5초) const updateCount = (timestamp) => { // timestamp : requestAnimationFrame 시작시간 const elapsed = timestamp - start; @@ -72,9 +77,10 @@ function SiteActivityComponent(props) { {props.id === "totalTurnover" &&
Write some words
} {props.id === "career" &&
Write some words
} - {props.id === "projects" && } - {props.id === "totalTurnover" && } - {props.id === "career" && } + {/*props.id === "projects" && */} + {props.id === "projects" && history} + {props.id === "totalTurnover" && history} + {props.id === "career" && history} @@ -110,7 +116,7 @@ function MobileSiteActivityComponent(props) { useEffect(() => { if (isVisible) { const start = performance.now(); // 현재 시간을 기록 - const duration = 3000; // 애니메이션 지속 시간 (1.5초) + const duration = 1000; // 애니메이션 지속 시간 (1.5초) const updateCount = (timestamp) => { // timestamp : requestAnimationFrame 시작시간 const elapsed = timestamp - start; @@ -145,9 +151,10 @@ function MobileSiteActivityComponent(props) { {props.id === "totalTurnover" &&
Write some words
} {props.id === "career" &&
Write some words
} - {props.id === "projects" && } - {props.id === "totalTurnover" && } - {props.id === "career" && } + {props.id === "projects" && history} + {props.id === "totalTurnover" && history} + {props.id === "career" && history} + diff --git a/src/data/string.js b/src/data/string.js index 4d52b4e..f7f9675 100644 --- a/src/data/string.js +++ b/src/data/string.js @@ -1,3 +1,8 @@ +// section 2 +export const section2title = "About Drim"; +export const section2Content = "드림은 건축의 완벽함을 추구하며 꾸준히 성장합니다."; + + // section 3 export const section3title = "Build Your Dream With Drim"; export const section3Content = `우리는 건물을 지어내는 일에 그치지 않고, 따뜻하고 친근한 공간을 창조하고자 합니다. diff --git a/src/pages/Main.js b/src/pages/Main.js index 68c0dfb..fd21106 100644 --- a/src/pages/Main.js +++ b/src/pages/Main.js @@ -1,5 +1,7 @@ import React, { useRef, useState, useEffect } from "react"; +import { section2title, section2Content } from '../data/string' + // component import { Slide, MobileSlide } from "../components/Slide"; import { SiteActivityComponent, MobileSiteActivityComponent } from "../components/SiteActivityComponent"; @@ -67,8 +69,8 @@ function Main() { elements.current[0] = el} />
elements.current[1] = el}>
-
About us
-
Helping our customers create a better world
+
{section2title}
+
{section2Content}
@@ -92,7 +94,7 @@ function MobileMain() {
-
About us
+
{section2title}