Refactor footer and remove unused pages
Updated the footer component and its styles for improved layout and clarity, including new contact and service sections. Removed unused pages: DonateShopPage, SkillsPage, and related CSS/JS files, and cleaned up routing in App.tsx. Also streamlined Home.module.css by merging introduction styles and removing redundant imports.
This commit is contained in:
@@ -1,16 +1,12 @@
|
||||
footer a{
|
||||
color: var(--c-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
footer a i{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer a:hover i{
|
||||
color: var(--c-text);
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
footer{
|
||||
padding: 2em;
|
||||
|
||||
font-family: "Roboto Mono", monospace;
|
||||
|
||||
background-color: var(--c-boxes);
|
||||
@@ -19,16 +15,85 @@ footer{
|
||||
display: flex;
|
||||
|
||||
color: white;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
footer address{
|
||||
padding: 1em;
|
||||
font-style: normal;
|
||||
}
|
||||
footer .contacts{
|
||||
font-size: 2em;
|
||||
footer .logo{
|
||||
font-size: 3em;
|
||||
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
&:hover{
|
||||
text-shadow: 0.25em 0.25em 0.2em var(--c-text);
|
||||
}
|
||||
}
|
||||
footer address{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
font-size: 1.2em;
|
||||
font-style: normal;
|
||||
gap: 0.2em;
|
||||
}
|
||||
footer address h2{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
footer address p{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
footer address p > svg{
|
||||
font-size: 1.2em;
|
||||
}
|
||||
footer address a{
|
||||
display: inline-block;
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
|
||||
footer .services{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
font-size: 1.2em;
|
||||
font-style: normal;
|
||||
gap: 0.2em;
|
||||
}
|
||||
footer .services h2{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
footer .services p{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
footer .services p > svg{
|
||||
font-size: 1.2em;
|
||||
}
|
||||
footer .services a{
|
||||
display: inline-block;
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
footer .links{
|
||||
margin-top: 0.5em;
|
||||
font-size: 2em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
gap: 0.8em;
|
||||
|
||||
}
|
||||
footer .links a{
|
||||
transition: all 0.2s ease-in-out;
|
||||
&:hover{
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 990px){
|
||||
@@ -36,5 +101,6 @@ footer .contacts{
|
||||
flex-direction: column;
|
||||
padding-bottom: 1em;
|
||||
padding-top: 1em;
|
||||
gap: 2em;
|
||||
}
|
||||
}
|
||||
@@ -1,44 +1,55 @@
|
||||
import { FaGithub, FaInstagram, FaYoutube, FaLinkedin, FaSteam, FaXTwitter } from "react-icons/fa6";
|
||||
import { FaGitAlt , FaInstagram, FaYoutube, FaLinkedin, FaSteam, FaXTwitter, FaClapperboard } from "react-icons/fa6";
|
||||
import { FaPhoneAlt, FaEnvelope, FaTeamspeak, FaGlobe } from "react-icons/fa";
|
||||
import { GiAutoRepair } from "react-icons/gi";
|
||||
|
||||
import styles from "./footer.module.css";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer id="contacts" className="mt-12 bg-[var(--c-background-light)]">
|
||||
<div className="container py-8 grid gap-6 md:grid-cols-3">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-rainbow">vontor.cz</h3>
|
||||
<p className="text-sm text-[var(--c-lines)] mt-2">© 2025 Vontor.cz</p>
|
||||
</div>
|
||||
|
||||
<address className="not-italic text-sm">
|
||||
<div><b>David Bruno Vontor</b></div>
|
||||
<div className="mt-2">Tel.: <a className="hover:text-[var(--c-other)]" href="tel:+420605512624">+420 605 512 624</a></div>
|
||||
<div>E-mail: <a className="hover:text-[var(--c-other)]" href="mailto:brunovontor@gmail.com">brunovontor@gmail.com</a></div>
|
||||
<div className="mt-1">IČO: <a className="hover:text-[var(--c-other)]" href="https://www.rzp.cz/verejne-udaje/cs/udaje/vyber-subjektu;ico=21613109;" target="_blank" rel="noopener noreferrer">21613109</a></div>
|
||||
</address>
|
||||
|
||||
<div className="flex items-center gap-4 text-2xl justify-start md:justify-end">
|
||||
<Social href="https://github.com/Brunobrno" label="GitHub"><FaGithub /></Social>
|
||||
<Social href="https://www.instagram.com/brunovontor/" label="Instagram"><FaInstagram /></Social>
|
||||
<Social href="https://twitter.com/BVontor" label="X / Twitter"><FaXTwitter /></Social>
|
||||
<Social href="https://www.youtube.com/@brunovontor" label="YouTube"><FaYoutube /></Social>
|
||||
<Social href="https://www.linkedin.com/in/brunovontor/" label="LinkedIn"><FaLinkedin /></Social>
|
||||
<Social href="https://steamcommunity.com/id/Brunobrno/" label="Steam"><FaSteam /></Social>
|
||||
</div>
|
||||
<footer id="contacts" className={styles.footer}>
|
||||
<div className={styles.logo}>
|
||||
<h1>vontor.cz</h1>
|
||||
</div>
|
||||
|
||||
<address>
|
||||
<h2><b>Kontakty</b></h2>
|
||||
<p><FaPhoneAlt /><a href="tel:+420 605 512 624"><u>+420 605 512 624</u></a></p>
|
||||
<p><FaEnvelope /> <a href="mailto:brunovontor@gmail.com"><u>brunovontor@gmail.com</u></a></p>
|
||||
<p><FaTeamspeak /> teamspeak.vontor.cz:4926</p>
|
||||
<p>IČO: <a href="https://www.rzp.cz/verejne-udaje/cs/udaje/vyber-subjektu;ico=21613109;"><u>21613109</u></a></p>
|
||||
|
||||
</address>
|
||||
|
||||
<div className={styles.services}>
|
||||
<h2><b>Služby</b></h2>
|
||||
|
||||
<p><FaGlobe /><a href="/services/web"><u>Weby</u></a></p>
|
||||
<p><FaClapperboard /> <a href="/services/film"><u>Filmařina</u></a></p>
|
||||
<p><GiAutoRepair /> <a href="/services/drone-service"><u>Servis dronu</u></a></p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div className={styles.links}>
|
||||
<a href="https://git.vontor.cz/Brunobrno">
|
||||
<FaGitAlt />
|
||||
</a>
|
||||
<a href="https://www.instagram.com/brunovontor/">
|
||||
<FaInstagram />
|
||||
</a>
|
||||
<a href="https://twitter.com/BVontor">
|
||||
<FaXTwitter />
|
||||
</a>
|
||||
<a href="https://steamcommunity.com/id/Brunobrno/">
|
||||
<FaSteam />
|
||||
</a>
|
||||
<a href="www.youtube.com/@brunovontor">
|
||||
<FaYoutube />
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/brunobrno/?skipRedirect=true">
|
||||
<FaLinkedin />
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
function Social({ href, label, children }: { href: string; label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={label}
|
||||
className="group relative inline-flex items-center justify-center w-12 h-12 rounded-xl bg-brandGradient text-white shadow-glow transition-transform duration-200 hover:scale-110"
|
||||
>
|
||||
<span className="text-xl group-hover:scale-110 transition-transform">{children}</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user