feat(Contact): add contact section

Author: BenedictLang

src/components/Audio/ButtonAudio/ButtonAudio.module.css.map

@@ -10,11 +10,11 @@
 	font-size: $font-size-btn;
 	font-family: inherit;
 	font-weight: 600;
-	background-color: $color-bg;
+	background-color: $color-container-black-trans;
 	padding: 0.7em 1.4em;
-	border: $border-width-medium solid $color-text-transparent-light;
+	border: $border-width-medium solid $color-container-light;
 	border-radius: $border-radius-medium;
-	box-shadow: $fx-dropShadow;
+	box-shadow: $fx-dropShadow-medium;
 	transition-duration: $duration-short;
 	cursor: pointer;
 

src/components/Buttons/Button/Button.module.scss

@@ -1,5 +1,5 @@
-import styles from './ButtonGlow.module.scss';
 import stylesBtn from '../Button/Button.module.scss';
+import styles from './ButtonGlow.module.scss';
 import CustomLink from '../../Link';
 import { useEffect } from 'react';
 

src/components/Buttons/ButtonGlow/ButtonGlow.js

@@ -3,6 +3,7 @@
 .button {
 	position: relative;
 	background: transparent;
+	border: $border-width-medium solid $color-text;
 	font-size: $font-size-p;
 	outline: none;
 	z-index: 0;

src/components/Buttons/ButtonGlow/ButtonGlow.module.scss

@@ -8,7 +8,7 @@
 	min-width: 50vw;
 	background: $color-bg-transparent-light;
 	border-radius: $border-radius-medium;
-	backdrop-filter: $blur;
+	@include blur;
 
 	.header {
 		position: relative;

src/components/ContainerElements/OSXWindow/OSXWindow.module.scss

@@ -16,7 +16,7 @@ const Footer = ({ minimal = false }) => {
 	const hasMenu = hasRecentPosts || hasRecentCategories;
 
 	return (
-		<footer className={styles.footer}>
+		<footer className={`${minimal ? styles.minimal : ''} ${styles.footer}`}>
 			{hasMenu && !minimal && (
 				<div>
 					<Section className={styles.footerMenu}>

src/components/Sections/Footer/Footer.js

@@ -4,8 +4,11 @@
 	position: relative;
 	width: 100%;
 	align-self: end;
-	backdrop-filter: blur(0.3em);
-	-webkit-backdrop-filter: blur(0.3em);
+	@include blur-light;
+
+	&:not(.minimal) {
+		border-top: $containerBorder;
+	}
 
 	&:before {
 		content: '';

src/components/Sections/Footer/Footer.module.scss

@@ -65,8 +65,7 @@
 			&.scrolled {
 				.headerWrapper {
 					background: $color-bg-transparent;
-					backdrop-filter: blur(0.7em);
-					-webkit-backdrop-filter: blur(0.7em);
+					@include blur-light;
 					border-bottom: $containerBorder;
 
 					&:before {
@@ -91,8 +90,7 @@
 					border: $containerBorder;
 					border-radius: $border-radius-big;
 					box-shadow: $fx-dropShadow-medium;
-					backdrop-filter: blur(0.7em);
-					-webkit-backdrop-filter: blur(0.7em);
+					@include blur;
 					transition: opacity $duration-short ease-in-out;
 
 					&:before {

src/components/Sections/Header/Header.module.scss

@@ -45,7 +45,6 @@
 			}
 		}
 		.image {
-			//display: none;
 			position: absolute;
 			bottom: 0;
 			width: calc(240px + 8vw);

src/components/Sections/Heros/Hero/Hero.module.scss

@@ -15,8 +15,9 @@ import CustomLink from '../components/Link';
 import { getAllCustomers } from '../lib/customers';
 import Content from '../components/ContainerElements/Content';
 import Button from '../components/Buttons/Button';
-import { IoArchiveOutline } from 'react-icons/io5';
+import { IoArchiveOutline, IoMailUnreadOutline } from 'react-icons/io5';
 import CardSlider from '../components/Slider/CardSlider';
+import GradientText from '../components/Text/GradientText';
 
 export default function Home({ customers }) {
 	const { metadata = {} } = useSite();
@@ -154,6 +155,19 @@ export default function Home({ customers }) {
 					</Button>
 				</Content>
 			</Section>
+			<Section className={styles.contactSection}>
+				<Content className={styles.contactContent}>
+					<div className={styles.contact}>
+						<h3>
+							Ready to take your digital presence to the <GradientText string={'next'} /> level?
+						</h3>
+						<p>Reach out to me and let&apos;s discuss how I can help you.</p>
+						<Button href={'mailto:benedict@lang-familie.de'} className={styles.showWork}>
+							Contact Now <IoMailUnreadOutline />
+						</Button>
+					</div>
+				</Content>
+			</Section>
 		</Layout>
 	);
 }

src/components/Slider/CardSlider/CardSlider.module.css.map

@@ -99,6 +99,9 @@
 .portfolioSection {
 	display: flex;
 	flex-direction: column;
+	@include blur-light;
+	border-top: $containerBorder;
+	border-bottom: $containerBorder;
 
 	.portfolioContent {
 		position: relative;
@@ -121,6 +124,27 @@
 	}
 }
 
+.contactSection {
+	.contactContent {
+		.contact {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			text-align: center;
+			margin: $space-small;
+			padding: $space;
+			background: $color-container;
+			border: $containerBorder;
+			border-radius: $border-radius-huge;
+			@include blur-light;
+
+			h3 {
+				font-size: $font-size-huge;
+			}
+		}
+	}
+}
+
 @include from-tablet {
 	.portfolioSection {
 		.portfolioContent {

src/pages/home.js

@@ -25,15 +25,15 @@ $color-blue-1000: #060713;
 
 $color-green-300: rgb(10, 230, 236);
 $color-green-300-trans: rgba(10, 230, 236, 0.68);
-$color-green-300-trans-strong: rgba(0, 255, 224, 0.03);
-//$color-green-300-trans-strong: #3eb0d30f;
+$color-green-300-trans-strong: rgba(0, 255, 224, 0.06);
 
 $color-purple-300: #a663ca;
 $color-orange-300: #c67941;
 $color-orange-300-trans: rgba(174, 95, 39, 0.69);
 
 $color-white-trans-light: rgba(243, 248, 255, 0.3);
 $color-white-trans: rgba(243, 248, 255, 0.1);
+$color-gray-trans-light: rgba(94, 94, 113, 0.3);
 $color-gray-trans: rgba(94, 94, 113, 0.15);
 
 $color-black-trans-full: rgba(3, 6, 11, 0);
@@ -53,6 +53,8 @@ $color-bg-transparent-light: $color-black-trans-light;
 $color-bg-transparent: $color-black-trans-full;
 
 $color-container: $color-gray-trans;
+$color-container-light: $color-gray-trans-light;
+$color-container-black-trans: rgba(0, 0, 0, 0.5);
 
 $color-text: $color-blue-50;
 $color-text-transparent-light: $color-white-trans-light;

src/styles/pages/Home.module.scss

@@ -2,6 +2,7 @@
 $border-radius-small: 0.2em;
 $border-radius-medium: 0.7em;
 $border-radius-big: 1.5em;
+$border-radius-huge: 4em;
 
 $border-width-small: 0.05em;
 $border-width-medium: 0.15em;

src/styles/settings/_colors.scss

@@ -4,22 +4,32 @@ $fx-dropShadow:
 	0em 0.4em 1.4em 0.7em rgba(0, 0, 0, 0.7),
 	0em 0.4em 1.4em 0.7em rgba(0, 0, 0, 0.5);
 $fx-dropShadow-medium:
-	0em 0.4em 1em 0.7em rgba(0, 0, 0, 0.1),
-	0em 0.2em 1em 0.4em rgba(0, 0, 0, 0.2);
+	0em 0.4em 1em 0.7em rgba(0, 0, 0, 0.2),
+	0em 0.1em 1em 0.4em rgba(0, 0, 0, 0.1);
 $fx-dropShadow-light: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
 $fx-dropShadow-glow:
 	0 2em 4em 0 $color-primary,
 	0 3em 0.5em 0 $color-primary;
 $fx-dropShadow-glow-slight: 0 0 0 0.5em $color-primary;
 
-$blur: blur(45px);
-$blur-light: blur(2px);
+$blur: blur(1.5em);
+$blur-light: blur(0.5em);
+
+@mixin blur {
+	backdrop-filter: $blur;
+	-webkit-backdrop-filter: $blur;
+}
+
+@mixin blur-light {
+	backdrop-filter: $blur-light;
+	-webkit-backdrop-filter: $blur-light;
+}
 
 $duration-short: 0.3s;
 $duration-middle: 0.5s;
 $duration-long: 1.5s;
 
-$containerBorder: 1px $color-container solid;
+$containerBorder: 1px $color-container-light solid;
 
 @mixin glitch {
 	.glitch {

src/styles/settings/_display.scss

@@ -19,6 +19,7 @@ $font-family-default:
 
 /* ================ FONT SIZE ================ */
 $font-size-h1: clamp(0.5em, 12vw, 6em);
+$font-size-huge: clamp(0.5em, 10vw, 3em);
 $font-size-h2: clamp(0.4em, 0.1em + 5vw, 1.5em);
 $font-size-h3: clamp(0.4em, 0.5em + 9vw, 2em);
 $font-size-h4: clamp(0.4em, 7vw, 1.3em);