mirror of
https://github.com/acid-info/free.technology.git
synced 2025-02-23 15:08:28 +00:00
feat: update jobs page design
This commit is contained in:
jinhojang6
parent
b6cd4f0bd2
commit
4453c9480e
@ -1,27 +1,284 @@
|
||||
import { breakpoints, footerBUs, footerSocial } from '@/configs/ui.configs'
|
||||
import styled from '@emotion/styled'
|
||||
import Image from 'next/image'
|
||||
|
||||
export const Footer = () => {
|
||||
const handleGoToTop = () => {
|
||||
window.scrollTo(0, 0)
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<div>
|
||||
<p>Institute of Free Technology. ©{new Date().getFullYear()}</p>
|
||||
<p>IFT@contact.com</p>
|
||||
</div>
|
||||
<span>
|
||||
<p>LinkedIn</p>
|
||||
<p>Vimeo</p>
|
||||
<p>Youtube</p>
|
||||
</span>
|
||||
<Header>
|
||||
<GoToTop onClick={handleGoToTop}>
|
||||
<Image
|
||||
src="/icons/chevron.svg"
|
||||
width={14}
|
||||
height={14}
|
||||
alt="go to top"
|
||||
/>
|
||||
</GoToTop>
|
||||
</Header>
|
||||
<FooterInto>
|
||||
<FooterInfoItem>
|
||||
<h2>IFT</h2>
|
||||
</FooterInfoItem>
|
||||
<FooterInfoItem>
|
||||
<h2>Get in touch</h2>
|
||||
<Description>
|
||||
<p>
|
||||
Share our mission and want to work with us?
|
||||
<br />
|
||||
Contact the IFT to see what we can do for you and your startup.
|
||||
</p>
|
||||
<button>Email us</button>
|
||||
</Description>
|
||||
</FooterInfoItem>
|
||||
</FooterInto>
|
||||
<Bottom>
|
||||
<Org>
|
||||
<p>
|
||||
Institute of Free Technology.
|
||||
<br />©{new Date().getFullYear()}
|
||||
</p>
|
||||
<p>All Rights Reserved.</p>
|
||||
</Org>
|
||||
<Links>
|
||||
<LinksContainer>
|
||||
<h3>Infrastructure</h3>
|
||||
<LinkItems>
|
||||
{footerBUs.map((bu) => (
|
||||
<a key={bu.link} href={bu.link} target="_blank">
|
||||
{bu.name}
|
||||
</a>
|
||||
))}
|
||||
</LinkItems>
|
||||
</LinksContainer>
|
||||
<LinksContainer>
|
||||
<h3>Social</h3>
|
||||
<LinkItems>
|
||||
{footerSocial.map((item) => (
|
||||
<a key={item.link} href={item.link} target="_blank">
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</LinkItems>
|
||||
</LinksContainer>
|
||||
</Links>
|
||||
</Bottom>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const Container = styled.nav`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: black;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
padding: 16px 16px 44px 16px;
|
||||
margin-top: 204px;
|
||||
|
||||
h2 {
|
||||
padding-block: 24px;
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
line-height: 130%;
|
||||
}
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
width: 100%;
|
||||
margin-top: 74px;
|
||||
padding: 16px 8px 0 8px;
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
line-height: 122%;
|
||||
padding-block: 16px;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const Header = styled.div`
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
|
||||
`
|
||||
|
||||
const GoToTop = styled.button`
|
||||
display: flex;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #fff;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
`
|
||||
|
||||
const FooterInto = styled.div`
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
& > div:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const FooterInfoItem = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
line-height: 130%;
|
||||
}
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
line-height: 122%;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const Description = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
margin-bottom: 60px;
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 122%;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
width: 150px;
|
||||
padding: 10px 34px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background-color: transparent;
|
||||
border: 1px solid #fff;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
width: 100%;
|
||||
margin-bottom: 48px;
|
||||
|
||||
p {
|
||||
font-size: 22px;
|
||||
line-height: 122%;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const Links = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
`
|
||||
|
||||
const LinksContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 50%;
|
||||
padding-block: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.18);
|
||||
|
||||
h3 {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 130%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
h3 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const LinkItems = styled.div`
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
|
||||
const Org = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.18);
|
||||
|
||||
p:first-child {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
p:nth-child(2) {
|
||||
margin-top: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
|
||||
p {
|
||||
width: 50%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
p:nth-child(2) {
|
||||
padding-top: 20px;
|
||||
padding-bottom: unset;
|
||||
margin-top: unset;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const Bottom = styled.div`
|
||||
display: flex;
|
||||
display: border-box;
|
||||
padding-block: 20px;
|
||||
gap: 16px;
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
`
|
||||
|
||||
export default Footer
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { breakpoints } from '@/configs/ui.configs'
|
||||
import { breakpoints, footerBUs, footerSocial } from '@/configs/ui.configs'
|
||||
import styled from '@emotion/styled'
|
||||
import Image from 'next/image'
|
||||
|
||||
@ -31,42 +31,19 @@ export const HomeFooter = () => {
|
||||
<Links>
|
||||
<LinksColumn>
|
||||
<h3>Infrastructure</h3>
|
||||
<a href="" target="_blank">
|
||||
Waku
|
||||
</a>
|
||||
<a href="" target="_blank">
|
||||
Nimbus
|
||||
</a>
|
||||
<a href="" target="_blank">
|
||||
Codex
|
||||
</a>
|
||||
<a href="" target="_blank">
|
||||
Nomos
|
||||
</a>
|
||||
<a href="" target="_blank">
|
||||
Status
|
||||
</a>
|
||||
<a href="" target="_blank">
|
||||
Keycard
|
||||
</a>
|
||||
<a href="" target="_blank">
|
||||
Logos
|
||||
</a>
|
||||
{footerBUs.map((bu) => (
|
||||
<a key={bu.link} href={bu.link} target="_blank">
|
||||
{bu.name}
|
||||
</a>
|
||||
))}
|
||||
</LinksColumn>
|
||||
<LinksColumn>
|
||||
<h3>Social</h3>
|
||||
<a href="" target="_blank">
|
||||
LinkedIn
|
||||
</a>
|
||||
<a href="" target="_blank">
|
||||
Vimeo
|
||||
</a>
|
||||
<a href="" target="_blank">
|
||||
Youtube
|
||||
</a>
|
||||
<a href="" target="_blank">
|
||||
X
|
||||
</a>
|
||||
{footerSocial.map((item) => (
|
||||
<a key={item.link} href={item.link} target="_blank">
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</LinksColumn>
|
||||
</Links>
|
||||
<Bottom>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { uiConfigs } from '@/configs/ui.configs'
|
||||
import { breakpoints, uiConfigs } from '@/configs/ui.configs'
|
||||
import styled from '@emotion/styled'
|
||||
import { Job } from './JobItem' // adjust path accordingly
|
||||
|
||||
@ -77,6 +77,17 @@ const BUs = styled.div`
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.18);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.18);
|
||||
padding: 16px 0;
|
||||
overflow-x: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
width: calc(100vw - 32px);
|
||||
margin-left: -16px;
|
||||
padding: 16px;
|
||||
}
|
||||
`
|
||||
|
||||
const Tag = styled.div<{ active: boolean }>`
|
||||
@ -94,6 +105,7 @@ const Tag = styled.div<{ active: boolean }>`
|
||||
text-transform: capitalize;
|
||||
cursor: pointer;
|
||||
border: 1px solid black;
|
||||
white-space: nowrap;
|
||||
`
|
||||
|
||||
const NoJobs = styled.p`
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { breakpoints } from '@/configs/ui.configs'
|
||||
import styled from '@emotion/styled'
|
||||
import ArrowUpRight from '../Icons/ArrowUpRight'
|
||||
|
||||
@ -52,12 +53,21 @@ const JobHeader = styled.div`
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
`
|
||||
|
||||
const JobTitle = styled.div`
|
||||
font-size: 36px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
font-size: 16px;
|
||||
line-height: 130%;
|
||||
}
|
||||
`
|
||||
|
||||
const JobInfo = styled.p`
|
||||
@ -66,6 +76,10 @@ const JobInfo = styled.p`
|
||||
text-overflow: ellipsis;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
`
|
||||
|
||||
const IconContainer = styled.span`
|
||||
@ -77,14 +91,15 @@ const IconContainer = styled.span`
|
||||
const ApplyButton = styled.a`
|
||||
width: 105px;
|
||||
height: 42px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
color: black;
|
||||
padding: 0 18px;
|
||||
border: 1px solid black;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
`
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { breakpoints } from '@/configs/ui.configs'
|
||||
import styled from '@emotion/styled'
|
||||
import JobItem, { Job } from './JobItem' // adjust path accordingly
|
||||
|
||||
@ -39,6 +40,11 @@ const Container = styled.div`
|
||||
justify-content: space-between;
|
||||
margin-top: 180px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.18);
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
margin-top: 60px;
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
|
||||
const Jobs = styled.div`
|
||||
@ -51,8 +57,15 @@ const Title = styled.h3`
|
||||
color: #000;
|
||||
font-size: 52px;
|
||||
font-weight: 400;
|
||||
line-height: 130%; /* 67.6px */
|
||||
line-height: 130%;
|
||||
text-transform: capitalize;
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
font-size: 22px;
|
||||
line-height: 122%;
|
||||
padding-block: 16px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
`
|
||||
|
||||
const NoJobs = styled.p`
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import { breakpoints, uiConfigs } from '@/configs/ui.configs'
|
||||
import styled from '@emotion/styled'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
export const Navbar = () => {
|
||||
const [scrolled, setScrolled] = useState(false)
|
||||
const router = useRouter()
|
||||
const isTransparent = router.pathname === '/'
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
@ -19,7 +22,7 @@ export const Navbar = () => {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Container scrolled={scrolled}>
|
||||
<Container scrolled={scrolled} isTransparent={isTransparent}>
|
||||
<span>
|
||||
<Link href="/">
|
||||
<p>HOME</p>
|
||||
@ -38,7 +41,7 @@ export const Navbar = () => {
|
||||
)
|
||||
}
|
||||
|
||||
const Container = styled.nav<{ scrolled: boolean }>`
|
||||
const Container = styled.nav<{ scrolled: boolean; isTransparent: boolean }>`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -74,7 +77,8 @@ const Container = styled.nav<{ scrolled: boolean }>`
|
||||
|
||||
@media (max-width: ${breakpoints.md}px) {
|
||||
background-color: transparent;
|
||||
background-color: ${({ scrolled }) => (scrolled ? 'black' : 'transparent')};
|
||||
background-color: ${({ isTransparent, scrolled }) =>
|
||||
!scrolled && isTransparent ? 'transparent' : 'black'};
|
||||
|
||||
span {
|
||||
gap: 10px 20px;
|
||||
|
||||
@ -10,3 +10,53 @@ export const breakpoints = {
|
||||
lg: 1280,
|
||||
xl: 1440,
|
||||
}
|
||||
|
||||
export const footerBUs = [
|
||||
{
|
||||
name: 'Waku',
|
||||
link: '#',
|
||||
},
|
||||
{
|
||||
name: 'Nimbus',
|
||||
link: '#',
|
||||
},
|
||||
{
|
||||
name: 'Codex',
|
||||
link: '#',
|
||||
},
|
||||
{
|
||||
name: 'Nomos',
|
||||
link: '#',
|
||||
},
|
||||
{
|
||||
name: 'Status',
|
||||
link: '#',
|
||||
},
|
||||
{
|
||||
name: 'Keycard',
|
||||
link: '#',
|
||||
},
|
||||
{
|
||||
name: 'Logos',
|
||||
link: '#',
|
||||
},
|
||||
]
|
||||
|
||||
export const footerSocial = [
|
||||
{
|
||||
name: 'LinkedIn',
|
||||
link: '#',
|
||||
},
|
||||
{
|
||||
name: 'Vimeo',
|
||||
link: '#',
|
||||
},
|
||||
{
|
||||
name: 'Youtube',
|
||||
link: '#',
|
||||
},
|
||||
{
|
||||
name: 'X',
|
||||
link: '#',
|
||||
},
|
||||
]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user