add Footer

swlab-main/src/App.jsx

@@ -11,7 +11,7 @@ function App () {
     <>
       <Header />
       <Banner />
-      <Section gap='3rem'>
+      <Section title='Products' gap='3rem'>
         <Card
           title='BXM'
           subTitle='Business eXcellence Framework'

swlab-main/src/components/Footer.jsx

 // @ts-nocheck
 import styled from 'styled-components'
-import logoImg from '../assets/images/logo.png'
+import Logo from './Logo'
 
 export default function Footer () {
   return <Wrapper>
-    <LogoWrap>
-      <Logo className={clsx({ active: scrollY > 10 })} image={ scrollY > 10 ? colorLogoImg : logoImg} />
-      <LogoTitpeWrap>
-        <LogoTitle type='main'>SWLab</LogoTitle>
-        <LogoTitle type='sub'>Bankware Global</LogoTitle>
-      </LogoTitpeWrap>
-    </LogoWrap>
+    <Logo />
+    <CopyRight>Copyright© Bankwareglobal All Rights Reserved.</CopyRight>
   </Wrapper>
 }
 
@@ -21,4 +16,11 @@ const Wrapper = styled.div`
     height: auto;
     padding: 2.25rem 5rem;
     font-size: 1.125rem;
+    display: flex;
+    align-items: center;
+`
+const CopyRight = styled.p`
+  color: #fff;
+  font-size: 14px;
+  font-weight: 400;
 `

swlab-main/src/components/Header.jsx

 // @ts-nocheck
 import { useState, useEffect } from 'react'
-import clsx from 'clsx'
 import styled from 'styled-components'
-import logoImg from '../assets/images/logo.png'
-import colorLogoImg from '../assets/images/logo_color.png'
+import clsx from 'clsx'
+
 import Nav from './Nav'
+import Logo from './Logo'
 
 export default function Header () {
   const [scrollY, setScrollY] = useState(0)
@@ -25,13 +25,7 @@ export default function Header () {
 
   return (
     <Wrapper className={clsx({ active: scrollY > 10 })}>
-      <LogoWrap>
-        <Logo className={clsx({ active: scrollY > 10 })} image={ scrollY > 10 ? colorLogoImg : logoImg} />
-        <LogoTitpeWrap>
-          <LogoTitle type='main'>SWLab</LogoTitle>
-          <LogoTitle type='sub'>Bankware Global</LogoTitle>
-        </LogoTitpeWrap>
-      </LogoWrap>
+      <Logo active={scrollY > 10} />
       <Nav />
     </Wrapper>
   )
@@ -60,34 +54,3 @@ const Wrapper = styled.div`
       transition: background-color 1s, box-shadow .2s, max-height .8s;
     }
 `
-const Logo = styled.div`
-    margin-top: 10px;
-    margin-right: 6px;
-    width: 35px;
-    height: 44px;
-    background-image: url(${props => props.image});
-    background-size: contain;
-    background-repeat: no-repeat;
-
-    &.active {
-      width: 52px;
-      height: 52px;
-    }
-`
-const LogoWrap = styled.div`
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    width: 300px;
-    height: 60px;
-    margin-top: -8px;
-`
-const LogoTitpeWrap = styled.div`
-    display: flex;
-    flex-direction: column;
-`
-const LogoTitle = styled.span`
-    font-size: ${(props) => (props.type === 'main' ? '33px' : '14px')};
-    font-weight: ${(props) => (props.type === 'main' ? 600 : 400)};
-    margin-top: ${(props) => (props.type !== 'main' && '-4px')}
-`

swlab-main/src/components/Logo.jsx

+// @ts-nocheck
+import styled from 'styled-components'
+import logoImg from '../assets/images/logo.png'
+import colorLogoImg from '../assets/images/logo_color.png'
+import clsx from 'clsx'
+
+export default function Logo (props) {
+  const { active = false } = props
+
+  return (<Wrapper>
+    <Image className={clsx({ active: active })} image={ active ? colorLogoImg : logoImg} />
+    <TitleWrap>
+      <Title type='main'>SWLab</Title>
+      <Title type='sub'>Bankware Global</Title>
+    </TitleWrap>
+  </Wrapper>)
+}
+
+const Image = styled.div`
+    margin-top: 10px;
+    margin-right: 6px;
+    width: 35px;
+    height: 44px;
+    background-image: url(${props => props.image});
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    &.active {
+      width: 52px;
+      height: 52px;
+    }
+`
+const Wrapper = styled.div`
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    width: 300px;
+    height: 60px;
+    margin-top: -8px;
+`
+const TitleWrap = styled.div`
+    display: flex;
+    flex-direction: column;
+`
+const Title = styled.span`
+    font-size: ${(props) => (props.type === 'main' ? '33px' : '14px')};
+    font-weight: ${(props) => (props.type === 'main' ? 600 : 400)};
+    margin-top: ${(props) => (props.type !== 'main' && '-4px')}
+`

swlab-main/src/components/Section.jsx

@@ -2,18 +2,30 @@
 import styled from 'styled-components'
 
 export default function Section (props) {
-  const { gap } = props
+  const { gap, title } = props
 
-  return <Wrapper gap={gap}>
-    {props.children}
+  return <Wrapper>
+    <Title>{title}</Title>
+    <Contents gap={gap}>
+      {props.children}
+    </Contents>
   </Wrapper>
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.section`
     display: flex;
-    flex-direction: ${props => props.flexDirection};
+    flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: ${props => props.gap};
     padding: 80px 0;
 `
+const Title = styled.h1`
+  font-size: 4rem;
+  font-weight: 700;
+`
+const Contents = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: ${props => props.gap};
+`