Skip to content

Commit

Permalink
update website
Browse files Browse the repository at this point in the history
  • Loading branch information
@KasperiP
KasperiP committed Nov 23, 2024
1 parent a1b31a5 commit c264f33
Show file tree
Hide file tree
Showing 8 changed files with 492 additions and 60 deletions.
77 changes: 71 additions & 6 deletions src/components/common/Footer/Footer.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
@use '/src/styles/mixins';

.wrapper {
padding: 5rem 0;
background-color: #f9f9f9;
padding: 7rem 0;
background: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
position: relative;

&::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.4;
}
}

.container {
Expand All @@ -15,24 +24,39 @@
color: var(--text-main);
}

a {
transition: color 0.2s ease;
&:hover {
color: var(--highlight-main);
}
}

h2 {
margin: 0;
color: var(--text-main);
font-size: 1.5rem;
margin-bottom: 1.5rem;
font-size: 1.2rem;
font-weight: 600;
background: linear-gradient(
45deg,
var(--text-main),
var(--highlight-main)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}

.imgContainer {
@include mixins.imgContainer(60px, 70px);

margin-bottom: 10px;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.flexContainer {
display: flex;
gap: 40px;
padding-bottom: 20px;
border-bottom: 1px solid gray;
border-bottom: 1px solid rgba(128, 128, 128, 0.2);

@media (max-width: 768px) {
flex-direction: column;
Expand All @@ -46,11 +70,32 @@
flex-direction: column;
align-items: flex-start;
text-align: left;

&:first-child {
flex: 2;
p {
opacity: 0.8;
line-height: 1.6;
margin-top: 1rem;
}
}
}

ul {
margin: 0;
padding: 0;
list-style: none;

li {
margin-bottom: 0.8rem;

a {
opacity: 0.8;
&:hover {
opacity: 1;
}
}
}
}
}

Expand All @@ -59,8 +104,28 @@
color: var(--text-main);
font-size: 0.8rem;
text-align: left;
opacity: 0.7;

a {
font-weight: bold;
position: relative;

&::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: var(--highlight-main);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}

&:hover::after {
transform: scaleX(1);
transform-origin: left;
}
}
}
106 changes: 89 additions & 17 deletions src/components/common/Navbar/Navbar.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
@use '/src/styles/mixins';

.wrapper {
height: 5rem;
border-bottom: 1px solid #e9ecef;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 4.5rem;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
z-index: 1000;
}

.container {
Expand All @@ -19,26 +26,54 @@
}
}

.links a {
color: var(--text-main);
font-weight: 500;
.links {
a {
position: relative;
color: var(--text-main);
font-weight: 500;
padding: 0.5rem 1rem;
transition: color 0.2s ease;

&:after {
content: '';
position: absolute;
bottom: -2px;
left: 1rem;
right: 1rem;
height: 2px;
background: currentColor;
transform: scaleX(0);
transition: transform 0.2s ease;
opacity: 0.3;
}

&:hover {
text-decoration: underline;
&:hover {
text-decoration: none;
color: var(--highlight-main);

&:after {
transform: scaleX(1);
}
}
}
}

.buttons > a {
display: flex;
gap: 5px;
gap: 8px;
align-items: center;
height: 50%;
padding: 5px 20px;
border-radius: var(--border-radius);
height: 2.5rem;
padding: 0 1.5rem;
border-radius: 50px;
background-color: var(--highlight-main);
color: var(--text-secondary);
font-weight: 500;
cursor: pointer;
font-weight: 600;
transition: transform 0.2s ease, background-color 0.2s ease;

&:hover {
transform: translateY(-2px);
filter: brightness(1.1);
}
}

.langBtn {
Expand All @@ -52,11 +87,19 @@
color: var(--text-main);
font-weight: 500;
cursor: pointer;
border-radius: 50px;
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 0.5rem 1rem;
transition: background-color 0.2s ease;

@media (max-width: 768px) {
font-size: 1.2rem;
}

&:hover {
background-color: rgba(0, 0, 0, 0.02);
}

> span {
display: flex;
align-items: center;
Expand Down Expand Up @@ -112,6 +155,17 @@
width: 100%;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 20px 40px rgb(0 0 0 / 20%);
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.98);
transition: transform 0.3s ease;

&.mobileOpen {
transform: translateY(0);
}

&.mobileClosed {
transform: translateY(-100%);
}

button {
width: 100%;
Expand All @@ -120,20 +174,34 @@
color: var(--text-secondary);
font-size: 1rem;
cursor: pointer;
border-radius: 50px;
margin: 1rem 2rem;
width: calc(100% - 4rem);
transition: transform 0.2s ease;

&:hover {
transform: translateY(-2px);
}
}

a {
width: 100%;
padding: 1.2rem 0;
padding-left: 2rem;
border-top: 1px solid rgb(128 128 128 / 36.4%);
border-top: 1px solid rgba(0, 0, 0, 0.04);
color: var(--text-main);
font-size: 1rem;
text-align: left;
border-color: rgba(0, 0, 0, 0.04);
transition: background-color 0.2s ease;

&:last-child {
border-bottom: 1px solid rgb(128 128 128 / 36.4%);
}

&:hover {
background-color: rgba(0, 0, 0, 0.015);
}
}
}

Expand All @@ -156,7 +224,10 @@
border-radius: var(--border-radius);
background-color: #fff;
color: var(--text-main);
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 20px 40px rgb(0 0 0 / 20%);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(8px);
border: 1px solid rgba(0, 0, 0, 0.08);

span {
padding: 0.5rem 0;
Expand All @@ -166,13 +237,14 @@
font-weight: 500;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease;

&:hover {
background-color: rgb(128 128 128 / 8.2%);
background-color: rgba(0, 0, 0, 0.02);
}
}

.active {
background-color: rgb(128 128 128 / 8.2%);
background-color: rgba(0, 0, 0, 0.03);
}
}
13 changes: 11 additions & 2 deletions src/components/common/Navbar/Navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useContext, useState } from 'react'
import { useContext, useEffect, useState } from 'react'
import { AiOutlineMenu } from 'react-icons/ai'
import { FaDiscord } from 'react-icons/fa'
import { RiArrowDropDownLine } from 'react-icons/ri'
Expand All @@ -12,6 +12,7 @@ const Navbar = () => {
const { locale, t } = useContext(LanguageContext)
const [navbarOpen, setNavbarOpen] = useState(false)
const [languageMenu, setLanguageMenu] = useState(false)
const [scrolled, setScrolled] = useState(false)
const router = useRouter()

const supportedLanguages = [
Expand All @@ -25,6 +26,14 @@ const Navbar = () => {
setLanguageMenu(false)
}

useEffect(() => {
const handleScroll = () => {
setScrolled(window.scrollY > 20)
}
window.addEventListener('scroll', handleScroll)
return () => window.removeEventListener('scroll', handleScroll)
}, [])

const LangBtn = () => {
return (
<>
Expand Down Expand Up @@ -60,7 +69,7 @@ const Navbar = () => {
}

return (
<nav className={styles.wrapper}>
<nav className={`${styles.wrapper} ${scrolled ? styles.scrolled : ''}`}>
<div className={styles.container}>
<div>
<span
Expand Down
Loading

0 comments on commit c264f33

Please sign in to comment.