Skip to content

Commit 7b1b937

Browse files
larsnietlarsniet
committed
Changed images, footer, layout, theme and finetuned page
1 parent be9ab12 commit 7b1b937

File tree

11 files changed

+322
-29
lines changed

11 files changed

+322
-29
lines changed

‎src/images/img/startups/advice-icon.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎src/images/img/startups/bytecode-team.jpg‎

112 KB
Loading

‎src/images/img/startups/meeting.png‎

-1.09 MB
Loading

‎src/layouts/Footer/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616

1717
const logo = require('../../images/img/logo.svg');
1818

19-
const Footer: React.FC<Record<string, never>> = () => (
19+
const FooterExtended: React.FC<Record<string, never>> = () => (
2020
<footer>
2121
<FooterContainer>
2222
<FooterCol>
@@ -121,4 +121,4 @@ const Footer: React.FC<Record<string, never>> = () => (
121121
</footer>
122122
);
123123

124-
export default Footer;
124+
export default FooterExtended;

‎src/layouts/FooterExtended/FooterExtended.components.tsx‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import styled, { createGlobalStyle } from 'styled-components';
2+
import React, { useState } from 'react';
3+
import theme from '../../styles/extended/theme';
4+
import Button from '../../components/Button/Button';
5+
import { ComicSansProps } from './FooterExtended.types';
6+
7+
const { mediaQueryMin } = theme;
8+
const container = theme.containerWidth;
9+
10+
export const FooterCol = styled.div`
11+
width: 100%;
12+
margin: 2.5%;
13+
// Quick fix for small object having a wrong line-height
14+
p {
15+
small {
16+
line-height: 1em;
17+
}
18+
}
19+
@media screen and (${mediaQueryMin.sm}) {
20+
width: 45%;
21+
}
22+
@media screen and (${mediaQueryMin.md}) {
23+
width: 20%;
24+
}
25+
`;
26+
27+
export const FooterLogo = styled.img`
28+
transform: translateX(-1.5rem);
29+
max-width: 60vw;
30+
height: 100%;
31+
padding: 0.75em;
32+
width: auto;
33+
@media (${mediaQueryMin.md}) {
34+
max-width: unset;
35+
}
36+
@media (${mediaQueryMin.sm}) {
37+
transform: translateX(-3rem);
38+
}
39+
`;
40+
41+
export const FooterLinkContainer = styled.p`
42+
margin: 1rem 0;
43+
font-size: 1.33rem;
44+
line-height: 1.33em;
45+
`;
46+
47+
export const FooterLink = styled.a`
48+
display: block;
49+
text-decoration: none;
50+
cursor: pointer;
51+
color: ${theme.colors.lightgray};
52+
`;
53+
54+
export const FooterHeadingContainer = styled.div`
55+
margin: 2em 0 0.66em 0;
56+
p {
57+
margin-bottom: 0;
58+
}
59+
@media (${mediaQueryMin.sm}) {
60+
height: 5rem;
61+
display: flex;
62+
align-items: end;
63+
}
64+
`;
65+
66+
export const FooterButton = styled(Button)`
67+
margin-top: 0;
68+
font-size: 0.9rem !important;
69+
padding: 0.5em 2rem;
70+
`;
71+
72+
export const FooterSpacer = styled.div`
73+
height: 3.4rem;
74+
`;
75+
76+
export const FooterContainer = styled.section`
77+
width: 100%;
78+
display: flex;
79+
flex-direction: column;
80+
flex-wrap: wrap;
81+
padding: 3em ${container.xs} 1em ${container.xs};
82+
@media screen and (${mediaQueryMin.sm}) {
83+
padding: 3em ${container.sm} 3em ${container.sm};
84+
flex-direction: row;
85+
}
86+
@media screen and (${mediaQueryMin.md}) {
87+
padding: 3em ${container.md} 0 ${container.md};
88+
}
89+
@media screen and (${mediaQueryMin.lg}) {
90+
padding: 3em ${container.lg} 0 1em;
91+
}
92+
@media screen and (${mediaQueryMin.xl}) {
93+
padding: 3em ${container.xl} 0 ${container.xl};
94+
}
95+
background: ${theme.colors.background};
96+
`;
97+
98+
export const Copyright = styled(FooterContainer)`
99+
justify-content: center;
100+
flex-direction: column !important;
101+
text-align: center;
102+
103+
* {
104+
}
105+
hr {
106+
margin: 0;
107+
opacity: 0.75;
108+
}
109+
110+
p {
111+
padding-top: 1em;
112+
opacity: 0.8;
113+
}
114+
`;
115+
116+
export const ComicSans: React.FC<ComicSansProps> = ({ children }) => {
117+
const [showComicSans, setShowComicSans] = useState(false);
118+
const switchComicSans = () => setShowComicSans(!showComicSans);
119+
const ComicSansText = styled.span`
120+
cursor: pointer;
121+
`;
122+
const ComicSansCSS = createGlobalStyle`
123+
html * {
124+
font-family: "Comic Sans MS" !important;
125+
}
126+
`;
127+
128+
return (
129+
<>
130+
<ComicSansText onClick={switchComicSans}>{children}</ComicSansText>
131+
{showComicSans && <ComicSansCSS />}
132+
</>
133+
);
134+
};

‎src/layouts/FooterExtended/FooterExtended.tsx‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import React from 'react';
2+
import AllSocials from '../../lib/Socials/Socials';
3+
import { Subtitle } from '../../components/Typography/Typography';
4+
import {
5+
FooterContainer,
6+
ComicSans,
7+
Copyright,
8+
FooterButton,
9+
FooterCol,
10+
FooterHeadingContainer,
11+
FooterLink,
12+
FooterLinkContainer,
13+
FooterLogo,
14+
FooterSpacer,
15+
} from './FooterExtended.components';
16+
17+
const logo = require('../../images/img/logo.svg');
18+
19+
const Footer: React.FC<Record<string, never>> = () => (
20+
<footer>
21+
<FooterContainer>
22+
<FooterCol>
23+
<FooterHeadingContainer>
24+
<FooterLogo src={logo} alt="Bytecode" />
25+
</FooterHeadingContainer>
26+
<FooterLinkContainer>
27+
<AllSocials
28+
isFooter
29+
facebook="https://www.facebook.com/bytecodeagency"
30+
twitter="https://twitter.com/bytecodeagency"
31+
instagram="https://www.instagram.com/bytecodeagency"
32+
linkedin="https://linkedin.com/company/bytecodeagency"
33+
/>
34+
<FooterLink href="mailto:[email protected]">
35+
[email protected]
36+
</FooterLink>
37+
<FooterLink href="tel:+31152024222">015-2024222</FooterLink>
38+
<FooterSpacer />
39+
<Subtitle>Legal</Subtitle>
40+
<p>
41+
KvK: 71497560
42+
<br />
43+
BTW: NL858738703B01
44+
<br />
45+
IBAN: NL77 BUNQ 2206 3628 13
46+
</p>
47+
</FooterLinkContainer>
48+
</FooterCol>
49+
<FooterCol>
50+
<FooterHeadingContainer>
51+
<Subtitle>Kom langs</Subtitle>
52+
</FooterHeadingContainer>
53+
<p>
54+
Verl. Spiegelmakersstraat 13
55+
<br />
56+
2645LZ Delfgauw
57+
<br />
58+
Nederland
59+
</p>
60+
<FooterButton
61+
href="https://calendly.com/bytecode"
62+
target="_blank"
63+
rel="noopener"
64+
>
65+
Plan een afspraak
66+
</FooterButton>
67+
</FooterCol>
68+
<FooterCol>
69+
<FooterHeadingContainer>
70+
<Subtitle>Broncode website</Subtitle>
71+
</FooterHeadingContainer>
72+
<p>
73+
Wij dragen graag bij aan open source projecten en vrije
74+
software. Om de daad bij het woord te voegen hebben wij de
75+
broncode van deze website onder AGPL-3.0 licentie
76+
vrijgegeven.
77+
</p>
78+
<FooterButton
79+
href="https://github.com/BytecodeBV/Bytecode-Website"
80+
target="_blank"
81+
rel="noopener"
82+
>
83+
Bekijk broncode
84+
</FooterButton>
85+
</FooterCol>
86+
<FooterCol>
87+
<FooterHeadingContainer>
88+
<Subtitle>Documenten</Subtitle>
89+
</FooterHeadingContainer>
90+
<p>
91+
<FooterLink
92+
href="https://cdn.bytecode.nl/algemene-voorwaarden.pdf"
93+
target="_blank"
94+
>
95+
Algemene Voorwaarden
96+
</FooterLink>
97+
<FooterLink href="/legal/privacy-policy">
98+
Privacy Policy
99+
</FooterLink>
100+
<FooterLink href="/legal/cookie-policy">
101+
Cookie Policy
102+
</FooterLink>
103+
</p>
104+
</FooterCol>
105+
</FooterContainer>
106+
<Copyright>
107+
<hr />
108+
<p>
109+
<small>
110+
<ComicSans>&copy;</ComicSans> {new Date().getFullYear()}
111+
&nbsp;Bytecode Digital Agency B.V.
112+
<br />
113+
All Rights Reserved on text and image content,
114+
<a href="https://github.com/BytecodeBV/Bytecode-Website">
115+
&nbsp;source code&nbsp;
116+
</a>
117+
is available under the AGPL-3.0 license.
118+
</small>
119+
</p>
120+
</Copyright>
121+
</footer>
122+
);
123+
124+
export default Footer;

‎src/layouts/FooterExtended/FooterExtended.types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
3+
export interface ComicSansProps {
4+
children: React.ReactNode;
5+
}

‎src/layouts/MainLayoutExtended/MainLayout.components.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React from 'react';
44

55
export const Main = styled.main<{ padded?: boolean }>`
66
max-width: 100vw !important;
7-
overflow-x: hidden;
7+
overflow-x: hidden !important;
88
padding-top: ${(props) => (props.padded ? '15vh' : 0)};
99
`;
1010

‎src/layouts/MainLayoutExtended/MainLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useState } from 'react';
22
import SEO from '../SEO/SEO';
33
import Navbar from '../../containers/Navbar/Navbar';
4-
import Footer from '../Footer/Footer';
4+
import Footer from '../FooterExtended/FooterExtended';
55
import {
66
GlobalStyles,
77
TypographyClassStyling,

0 commit comments

Comments
 (0)