Update landing page design (#1)

Co-authored-by: Jimmy Vargo <jimmyvargo@Jimmys-MacBook-Air.local>
Co-authored-by: Jimmy Vargo <james@ayo.tokyo>
Reviewed-on: ayo/website#1

.gitattributes

@@ -0,0 +1,4 @@
+assets/blog/**/* filter=lfs diff=lfs merge=lfs -text
+assets/fonts/* filter=lfs diff=lfs merge=lfs -text
+assets/icons/* filter=lfs diff=lfs merge=lfs -text
+assets/images/* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,9 +1,8 @@
 node_modules
 public
+package-lock.json
 
-*.png
-*.jpg
-*.svg
 *.log
 *.lock
 *.zip
+*.DS_Store

assets/theme/dark.css

@@ -1,7 +1,8 @@
 :root
 {
-	--main-bg-color: #21262b;
+	--main-bg-color: #1a1b21;
 	--main-fg-color: #b0b0b0;
+	--strong-fg-color: #fff;
 	--lighter-bg-color: #31363b;
 	--lighter-fg-color: #d0d0d0;
 	--highlight-bg-color: #41464b;

assets/theme/light.css

@@ -1,8 +1,9 @@
 :root
 {
-	--main-bg-color: #e0e0e0;
-	--main-fg-color: #41464b;
-	--lighter-bg-color: #c8c8c8;
+	--main-bg-color: #fff;
+	--main-fg-color: #53585e;
+	--strong-fg-color: #000;
+	--lighter-bg-color: #ededed;
 	--lighter-fg-color: #31363b;
 	--highlight-bg-color: #b0b0b0;
 	--highlight-fg-color: #21262b;

package.json

@@ -5,27 +5,30 @@
 	"author": "Risselin Corentin",
 	"license": "MIT",
 	"dependencies": {
-		"@babel/cli": "^7.7.0",
-		"@babel/core": "^7.7.2",
-		"@babel/preset-env": "^7.7.1",
-		"babel-loader": "^8.0.6",
-		"babel-plugin-inferno": "^6.1.0",
-		"compression-webpack-plugin": "^9.0.0",
-		"inferno": "^7.3.2",
-		"inferno-redux": "^7.3.3",
-		"inferno-router": "^7.4.10",
-		"redux": "^4.0.5",
-		"webpack": "5.56.1",
-		"webpack-cli": "^4.8.0"
+		"@babel/cli": "7.22.10",
+		"@babel/core": "7.22.11",
+		"@babel/preset-env": "7.22.10",
+		"babel-loader": "9.1.3",
+		"babel-plugin-inferno": "6.6.1",
+		"compression-webpack-plugin": "10.0.0",
+		"inferno": "8.2.2",
+		"inferno-redux": "8.2.2",
+		"inferno-router": "8.2.2",
+		"redux": "4.2.1",
+		"webpack": "5.88.2",
+		"webpack-cli": "5.1.4"
 	},
 	"devDependencies": {
-		"copy-webpack-plugin": "^9.0.1",
-		"css-loader": "^6.3.0",
-		"marked": "^3.0.4",
-		"sass": "^1.42.1",
-		"sass-loader": "^12.1.0",
-		"style-loader": "^3.3.0",
-		"webpack-dev-server": "^4.3.1"
+		"copy-webpack-plugin": "11.0.0",
+		"css-loader": "6.8.1",
+		"marked": "7.0.5",
+		"sass": "1.66.1",
+		"sass-loader": "13.3.2",
+		"style-loader": "3.3.3",
+		"webpack-dev-server": "4.15.1"
+	},
+	"engines": {
+		"node": "16.20.0"
 	},
 	"scripts": {
 		"build": "webpack --config webpack.prod.js",

src/blog.css

@@ -8,21 +8,24 @@
 .blog > a
 {
 	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
 	text-decoration: none;
 	max-width: 1000px;
-	margin: 20px auto;
-	padding: 10px;
+	margin: 1rem auto;
+	padding: 1.5rem 2rem;
 	background-color: var(--dim-bg-color);
 }
 
 .blog a h2
 {
-	flex-grow: 1;
-	margin: 20px 60px 20px 40px;
+	font-size: 1.25rem;
+	font-weight: 300;
 }
 
 .blog a .date
 {
-	font-size: 0.7em;
-	align-self: end;
+	margin-top: 0.25rem;
+	font-size: 0.75rem;
+	font-weight: 600;
 }

src/blog_entry.scss

@@ -5,7 +5,6 @@
 	padding: 20px;
 	max-width: 1200px;
 	line-height: 1.8rem;
-	font-family: "open sans", sans;
 
 	h1, h2, h3
 	{
@@ -69,16 +68,23 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
+			width: 100%;
 		}
 		
 		img
 		{
-			margin: 0 10px;
+			display: block;
+			margin: 0 0.5rem;
 			object-fit: contain;
-			width: 100%;
+			overflow: auto;
 			cursor: pointer;
 		}
 	}
+
+	p img {
+		display: block;
+		margin: auto;
+	}
 }
 
 #image-container

src/home.jsx

@@ -8,29 +8,123 @@ import ArrowSvg from '../assets/icons/arrow_forward.svg'
 import Flow1Svg from '../assets/images/undraw_maintenance_cn7j.svg'
 import Flow2Svg from '../assets/images/undraw_design_data_khdb.svg'
 import Flow3Svg from '../assets/images/undraw_Artificial_intelligence_oyxx.svg'
+import headerImage from '../assets/images/kyoto.jpeg'
+import brainSVG from '../assets/icons/brain.svg'
+import windowSVG from '../assets/icons/window.svg'
+import cloudServerSVG from '../assets/icons/cloud_server.svg'
+import linkedInSVG from '../assets/icons/linkedin.svg'
+import githubSVG from '../assets/icons/github.svg'
+import gitlabSVG from '../assets/icons/gitlab.svg'
+
+
+class HomeComponent extends Component {
+
+	render() {
+		const { t } = this.props
 
-class HomeComponent extends Component
-{
-	render()
-	{
 		return (
-			<div className="content">
-				<div className="process-flow">
-					<div>
-						<Svg src={Flow1Svg}/>
-						<h3>{this.props.strings.flow1}</h3>
+			<div className="landing-page">
+
+				<section className="header-container">
+					<div className="header-image">
+						<img src={headerImage} />
 					</div>
-					<Svg src={ArrowSvg}/>
-					<div>
-						<Svg src={Flow2Svg}/>
-						<h3>{this.props.strings.flow2}</h3>
+					<div className="header">
+						<h1>AYO</h1>
+						<span>AI Solutions for Business</span>
+						<span className="header-description">A Tokyo based startup that specializes in enterprise level custom AI solutions.</span>
 					</div>
-					<Svg src={ArrowSvg}/>
-					<div>
-						<Svg src={Flow3Svg}/>
-						<h3>{this.props.strings.flow3}</h3>
+				</section>
+
+				<hr/>
+
+				<section className="services">
+					<h2>Our Services</h2>
+
+					<div className="services-list">
+						<div className="service-item ai">
+							<Svg src={brainSVG} />
+							<h4>{t.landing.services.ai_solutions}</h4>
+							<span className="service-description">{t.landing.services.ai_solutions_description}</span>
+						</div>
+
+						<div className="service-item ui">
+							<Svg src={windowSVG} />
+							<h4>{t.landing.services.ui_integration}</h4>
+							<span className="service-description">{t.landing.services.ui_integration_description}</span>
+						</div>
+
+						<div className="service-item web">
+							<Svg src={cloudServerSVG} />
+							<h4>{t.landing.services.web_applications}</h4>
+							<span className="service-description">{t.landing.services.web_applications_description}</span>
 						</div>
 					</div>
+				</section>
+
+				{/* <hr/>
+
+				<section className="projects">
+					<h2>Our Projects</h2>
+				</section> */}
+
+				<hr/>
+
+				<section className="team">
+					<h2>Our Team</h2>
+
+					<div className="team-list">
+						<div className="team-member">
+							{/* <img className="member-image" /> */}
+							<h4>{t.landing.team.corentin}</h4>
+							<p className="member-title">{t.landing.team.corentin_position}</p>
+							<div className="member-links">
+								<a className="profile-link" href="https://www.linkedin.com/in/corentin-r-2411b2152/" target="_blank">
+									<Svg src={linkedInSVG} />
+									<span>LinkedIn</span>
+								</a>
+								<a className="profile-link" href="https://github.com/corentin-pro" target="_blank">
+									<Svg src={githubSVG} />
+									<span>GitHub</span>
+								</a>
+								<a className="profile-link" href="https://gitlab.com/corentin-pro" target="_blank">
+									<Svg src={gitlabSVG} />
+									<span>GitLab</span>
+								</a>
+							</div>
+							<span>{t.landing.team.corentin_bio_1}</span>
+							<span>{t.landing.team.corentin_bio_2}</span>
+						</div>
+						<div className="team-member">
+							{/* <img className="member-image" /> */}
+							<h4>{t.landing.team.james}</h4>
+							<p className="member-title">{t.landing.team.james_position}</p>
+							<div className="member-links">
+								<a className="profile-link" href="https://www.linkedin.com/in/james-vargo/" target="_blank">
+									<Svg src={linkedInSVG} />
+									<span>LinkedIn</span>
+								</a>
+								<a className="profile-link" href="https://github.com/jvargeaux" target="_blank">
+									<Svg src={githubSVG} />
+									<span>GitHub</span>
+								</a>
+							</div>
+							<span>{t.landing.team.james_bio_1}</span>
+							<span>{t.landing.team.james_bio_2}</span>
+						</div>
+					</div>
+				</section>
+
+				<hr />
+
+				<section className="contact-info">
+					<h2>Contact Us</h2>
+					<span>{t.company_name}</span>
+					<span>{t.address_one_line}</span>
+					<span>{t.email_contact}</span>
+				</section>
+
+				<div className="footer-padding"></div>
 			</div>
 		)
 	}
@@ -38,7 +132,7 @@ class HomeComponent extends Component
 
 
 const mapStateToProps = state => ({
-	strings: state.lang.strings
+	t: state.lang.strings
 })
 
 const mapDispatchToProps = dispatch => ({

src/lang/en.json

@@ -3,10 +3,26 @@
 	"company_name": "AYO inc.",
 	"address_one_line": "Tokyo Itabashi Akatsukashinmachi 3-chōme-33-3-102",
 	"email_contact": "contact@ayo.tokyo",
-	"inferno_credit": "Website built with ",
-	"flow1": "From repetitive tasks done by human",
-	"flow2": "With the help of data gathered",
-	"flow3": "To automated systems",
+	"landing": {
+		"services": {
+			"ai_solutions": "Custom AI Solutions",
+			"ai_solutions_description": "AI is becoming an essential part of many business these days. We offer custom solutions for whatever need your business may have.",
+			"ui_integration": "UI Integration",
+			"ui_integration_description": "Not all companies that excel at AI solutions can also design a user-friendly interface. We're unique in that we can do both.",
+			"web_applications": "Web Applications",
+			"web_applications_description": "We offer fullstack web solutions for cloud integration, including APIs and databases for accessing custom-built AI models."
+		},
+		"team": {
+			"corentin": "Corentin Risselin",
+			"corentin_position": "Founder / CTO",
+			"corentin_bio_1": "With a career lasting over a decade, Corentin has expertise in a wide variety of fields. He started in IoT programming micro-controllers back in France, along with fullstack web development, and transitioned into AI while moving to Japan in 2016. He has since worked for and consulted for several AI companies, both in Japan and abroad.",
+			"corentin_bio_2": "From C/C++ or Python or Go, to Nginx or MySQL, to Pytorch or Tensorflow, his knowledge of the most used programming languages and frameworks has allowed him to contribute to codebases such as Linux and Apache, and to build fully integrated software solutions.",
+			"james": "James Vargo",
+			"james_position": "Software Engineer",
+			"james_bio_1": "Starting in web design and development back in America in 2016 before moving to Japan in 2018, James has worked both as a freelancer and an employee for a few startups in Tokyo, and has since expanded into AI engineering.",
+			"james_bio_2": "With a background rooted primarily in fullstack web development, his expertise includes everything from Frontend to API architecture to DevOps, using popular programming languages and frameworks ranging from Javascript/Typescript and Python to React and NodeJS."
+		}
+	},
 	"section": {
 		"home": "Home",
 		"blog": "Blog"

src/lang/jp.json

@@ -3,10 +3,26 @@
 	"company_name": "AYO\u200b合同会社",
 	"address_one_line": "東京\u200b都板橋区\u200b赤塚新町\u200b三丁目３３番３ｰ１０２",
 	"email_contact": "contact@ayo.tokyo",
-	"inferno_credit": "Website built with ",
-	"flow1": "人によって\u200b繰り返される\u200b作業",
-	"flow2": "収集された\u200bデータ\u200b（の助け）\u200bによって",
-	"flow3": "システム\u200bを自動化するため",
+	"landing": {
+		"services": {
+			"ai_solutions": "カスタムAIソリューション",
+			"ai_solutions_description": "AIは今日では多くのビジネスに欠かせない要素となっています。私たちは、お客様のビジネスが持つあらゆるニーズにカスタムソリューションを提供しています。",
+			"ui_integration": "UI統合",
+			"ui_integration_description": "AIソリューションで優れた企業でも、使いやすいインターフェースの設計ができるわけではありません。私たちはその点でユニークであり、両方の側面に対応できます。",
+			"web_applications": "ウェブアプリケーション",
+			"web_applications_description": "カスタムビルトのAIモデルにアクセスするためのAPIやデータベースを含む、クラウド統合のためのフルスタックウェブソリューションを提供しています。"
+		},
+		"team": {
+			"corentin": "コランタン・リセラン",
+			"corentin_position": "Founder / CTO",
+			"corentin_bio_1": "キャリアが10年以上にわたるコランタンは、幅広い分野に専門知識を持っています。フランスでIoTプログラミングのマイクロコントローラーから始まり、フルスタックのWeb開発に取り組み、2016年に日本に移住してからAIに転向しました。その後、日本国内外のいくつかのAI企業で勤務し、コンサルティングも行ってきました。",
+			"corentin_bio_2": "C/C++、Python、GoからNginx、MySQL、Pytorch、Tensorflowまで、最も使用されているプログラミング言語やフレームワークの知識を活かし、LinuxやApacheなどのコードベースに貢献し、完全に統合されたソフトウェアソリューションを構築することができました。",
+			"james": "ジェームス・ヴァーゴ",
+			"james_position": "Software Engineer",
+			"james_bio_1": "2018年に日本へ移住する前、ジェームズは2016年にアメリカでウェブデザインと開発を始めました。フリーランサーとしても働き、東京のいくつかのスタートアップ企業で勤務して経験を積みました。その後、AIエンジニアリングにも展開しています。",
+			"james_bio_2": "主にフルスタックのウェブ開発に基づくバックグラウンドを持つジェームスの専門知識は、フロントエンドからAPI構築、DevOpsまで、Javascript/TypescriptやPythonからReactやNodeJSまでの人気のあるプログラミング言語とフレームワークを使用したものです。"
+		}
+	},
 	"section": {
 		"home": "ホーム",
 		"blog": "ブログ"

src/main.css

@@ -1,114 +1,84 @@
-*, ::after, ::before
-{
+@font-face {
+	font-family: 'OpenSans';
+	src: url('/assets/fonts/open_sans.ttf');
+}
+
+*,
+::after,
+::before {
 	box-sizing: border-box;
 }
 
-a, a:visited
-{
+a,
+a:visited {
 	color: inherit;
 }
 
-body
-{
+body {
 	background-color: var(--main-bg-color);
 	color: var(--main-fg-color);
 	margin: 0;
-	font-family: sans;
+	font-family: 'OpenSans', sans-serif;
 }
 
-@media (max-width: 420px)
-{
-	body
-	{
-		font-size: 10px;
-	}
-	.process-flow
-	{
-		padding: 3px 3vw;
-	}
-	.process-flow .svg:nth-child(even) > svg
-	{
-		width: 18px;
-		margin: 2px;
-	}
-}
-
-@media (min-width: 420px) and (max-width: 600px)
-{
-	body
-	{
-		font-size: 12px;
-	}
-	.process-flow
-	{
-		padding: 5px 5vw;
-	}
-	.process-flow .svg:nth-child(even) > svg
-	{
-		width: 5vw;
-		margin: 5px;
-	}
-}
-
-@media (min-width: 600px)
-{
-	body
-	{
-		font-size: 14px;
-	}
-	.process-flow
-	{
-		padding: 10px 10vw;
-	}
-	.process-flow .svg:nth-child(even) > svg
-	{
-		width: 5vw;
-		margin: 10px;
-	}
-}
-
-@media (orientation: portrait)
-{
-	.process-flow
-	{
+@media (orientation: portrait) {
+	.process-flow {
 		flex-direction: column;
 	}
-	.process-flow .svg
-	{
+
+	.process-flow .svg {
 		height: 15vh;
 	}
-	.process-flow > .svg
-	{
+
+	.process-flow>.svg {
 		transform: rotate(90deg)
 	}
 }
 
-footer > section
-{
+footer>section {
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	margin: 0 10px;
 }
 
-footer .legal div
-{
+footer .legal {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 0.85rem;
+	margin: 0.25rem;
+}
+
+footer .legal span {
+	margin: 0.25rem 0.75rem;
+}
+
+@media (max-width: 720px) {
+	footer .legal {
+		flex-direction: column;
+	}
+}
+
+footer .legal div {
 	padding: 10px;
 }
 
-footer > section > div
-{
+footer>section>div {
 	word-break: keep-all;
 }
 
-h1, h2, h3, h4, h5, h5
-{
+h1,
+h2,
+h3,
+h4,
+h5,
+h5 {
 	margin: 0;
 	color: var(--lighter-fg-color);
 }
 
-main
-{
+main {
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
@@ -116,8 +86,7 @@ main
 	min-width: 375px;
 }
 
-nav
-{
+nav {
 	display: flex;
 	width: 100%;
 	justify-content: space-between;
@@ -128,90 +97,324 @@ nav
 	word-break: keep-all;
 }
 
-nav a
-{
+nav a {
 	text-decoration: none;
 }
 
-nav .actions
-{
+nav .actions {
 	display: inline-flex;
 	justify-content: flex-end;
 	align-items: center;
 }
 
-nav .main-logo
-{
+nav .main-logo {
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
 }
 
-nav .sections
-{
+nav .sections {
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
 }
 
-nav .sections a
-{
-	font-size: 1.5em;
-	margin: 0 20px;
+nav .sections a {
+	font-size: 1rem;
+	margin: 0 1.25rem;
+	text-transform: uppercase;
 }
 
-svg
-{
+nav .sections a:hover {
+	opacity: 0.5;
+}
+
+svg {
 	fill: var(--main-fg-color);
 	height: auto;
 	max-width: 100%;
 	max-height: 100%;
 }
 
-.content
-{
-	flex-grow: 1;
+hr {
+	width: calc(100% - 6rem);
+	max-width: 600px;
+	margin: 6rem auto;
+	opacity: 0.25;
 }
 
-.process-flow
-{
-	background-color: var(--lighter-bg-color);
+section h2 {
+	text-align: center;
+}
+
+.landing-page {
 	display: flex;
-	justify-content: space-between;
+	flex-direction: column;
 	align-items: center;
 }
 
-.process-flow h3
-{
+.landing-page h2 {
+	margin-bottom: 2rem;
+	font-size: 1.5rem;
+	font-weight: 300;
+}
+
+.header-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100vw;
+}
+
+.header-image {
+	width: 100%;
+	height: 480px;
+	max-width: 800px;
+}
+
+.header-image img {
+	height: 100%;
+	width: 100%;
+	border-radius: 0 0 300px 0;
+	object-fit: cover;
+}
+
+.header-container .header {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 100%;
+	margin: 3rem;
+}
+
+.header-description {
+	max-width: 400px;
+	margin-top: 1.5rem;
+	font-size: 0.9rem;
+	opacity: 0.75;
+}
+
+.header-container .header h1 {
+	font-size: 2rem;
+	font-weight: 600;
+}
+
+@media (max-width: 720px) {
+	.header-container {
+		flex-direction: column;
+		margin-top: 0;
+	}
+	.header-image img {
+		border-radius: 0 0 50vw 50vw;
+	}
+	.header-container .header {
+		align-items: center;
+		text-align: center;
+	}
+}
+
+.services {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.services-list {
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+	padding: 0 2rem;
+}
+
+.service-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin: 2rem;
+	text-align: center;
+}
+
+.service-item svg {
+	height: 2rem;
+	margin-bottom: 0.75rem;
+}
+.service-item h4 {
+	margin-bottom: 1.5rem;
+	color: var(--strong-fg-color);
+	font-size: 1rem;
+	font-weight: 600;
+	white-space: pre;
+}
+.service-item .service-description {
+	max-width: 320px;
+	font-size: 0.85rem;
+}
+
+.service-item.ai svg {
+	fill: #ccc;
+}
+.service-item.ui svg {
+	fill: #ccc;
+}
+.service-item.web svg {
+	fill: #ccc;
+}
+
+@media (max-width: 720px) {
+	.services-list {
+		flex-direction: column;
+	}
+}
+
+.team {
+	width: 100%;
+	max-width: 900px;
+	padding: 0 2rem;
+}
+
+.team-list {
+	width: 100%;
+}
+
+.team-member {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin-top: 3rem;
+}
+
+.team-member:nth-child(odd) {
+	align-items: flex-start;
+	text-align: left;
+}
+.team-member:nth-child(even) {
+	align-items: flex-end;
+	text-align: right;
+}
+
+.team-member h4 {
+	font-size: 1.1rem;
+	font-weight: 300;
+}
+
+.team-member > span {
+	margin-top: 1rem;
+}
+
+.member-title {
+	margin: 0;
+	margin-top: 0.5rem;
+	font-size: 0.9rem;
+	font-weight: 600;
+}
+
+.member-links {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.profile-link {
+	display: flex;
+	justify-self: center;
+	align-items: center;
+	margin-top: 1rem;
+}
+.profile-link:not(:last-child) {
+	margin-right: 2rem;
+}
+
+.profile-link svg {
+	display: block;
+	width: 1.5rem;
+	margin-right: 0.5rem;
+}
+
+.process {
+	text-align: center;
+}
+
+.process-flow {
+	/* background-color: var(--lighter-bg-color); */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0 4rem;
+	padding-top: 2rem;
+}
+
+.process-flow h3 {
 	margin: 10px 0;
 	text-align: center;
 }
 
-.process-flow .svg
-{
+.process-flow .svg {
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
 }
 
-.toggle
-{
+.flow-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.flow-item .svg svg {
+	height: 120px;
+	max-width: 200px;
+}
+
+.flow-label {
+	margin-top: 2rem;
+	font-size: 0.9rem;
+	font-weight: 600;
+}
+
+.arrow-svg .svg svg {
+	width: 24px;
+	margin: 2rem;
+}
+
+.contact-info {
+	text-align: center;
+}
+
+.contact-info span {
+	display: block;
+	font-weight: 600;
+	line-height: 2.5em;
+}
+
+.footer-padding {
+	height: 12rem;
+}
+
+.toggle {
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
+	height: 2.25rem;
+	margin: 0 0.25rem;
+	padding: 0.5rem 0.75rem;
+	border-radius: 0.5rem;
+	color: var(--main-bg-color);
+	background-color: var(--main-primary-color);
+	font-size: 0.8rem;
 	cursor: pointer;
-	padding: 4px;
-	border-radius: 12px;
 }
 
-.toggle:hover
-{
-	background-color: var(--highlight-bg-color);
-	color: var(--highlight-fg-color);
-	fill: var(--highlight-fg-color);
+.toggle svg {
+	height: 1rem;
+	fill: var(--main-bg-color);
 }
 
-#ayo_logo
-{
-	height: 42px;
+.toggle:hover {
+	background-color: var(--light-primary-color);
+}
+
+#ayo_logo {
+	height: 2rem;
+	margin: 0.25rem;
 }

src/main.jsx

@@ -59,9 +59,9 @@ class MainComponent extends Component
 					</Switch>
 					<footer>
 						<section className="legal">
-							<div>{this.props.strings.company_name}</div>
-							<div>{this.props.strings.address_one_line}</div>
-							<div>{this.props.strings.email_contact}</div>
+							<span>{this.props.strings.company_name}</span>
+							<span>{this.props.strings.address_one_line}</span>
+							<span>{this.props.strings.email_contact}</span>
 						</section>
 					</footer>
 				</BrowserRouter>

webpack.base.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const fs = require('fs');
-const marked = require('marked');
+const marked = require('marked').marked;
 
 const CopyPlugin = require('copy-webpack-plugin');
 
@@ -129,6 +129,14 @@ module.exports = {
 		{
 			test: /\.svg$/,
 			type: "asset/inline"
+		},
+		{
+			test: /\.(png|jpg|jpeg|gif)$/,
+			type: "asset/resource"
+		},
+		{
+			test: /\.(ttf|otf)$/,
+			type: "asset/resource"
 		}
 	]
 	},
@@ -142,7 +150,8 @@ module.exports = {
 			{from: 'assets/blog', to: 'blog'},
 			{from: 'assets/icons', to: 'assets/icons'},
 			{from: 'assets/images', to: 'assets/images'},
-			{from: 'assets/theme', to: 'assets/theme'}
+			{from: 'assets/theme', to: 'assets/theme'},
+			{from: 'assets/fonts', to: 'assets/fonts'}
 		]})
 	],
 	output: