mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-09 08:29:30 -06:00
Landing Page
This commit is contained in:
David Haz
155
src/components/landing/Footer/Footer.css
Normal file
155
src/components/landing/Footer/Footer.css
Normal file
@@ -0,0 +1,155 @@
|
||||
.landing-footer {
|
||||
position: relative;
|
||||
margin-top: 8rem;
|
||||
padding: 2.4rem;
|
||||
border-top: 1px solid rgba(149, 184, 148, 0.1);
|
||||
background: linear-gradient(to bottom, transparent, #0e0e0e);
|
||||
z-index: 220;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
height: 28px;
|
||||
width: auto;
|
||||
opacity: 0.9;
|
||||
transition: opacity 0.2s ease;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-logo:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.footer-description {
|
||||
font-size: 1rem;
|
||||
color: rgba(161, 148, 184, 0.9);
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.footer-heart {
|
||||
color: #27FF64;
|
||||
font-size: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.footer-creator-link {
|
||||
color: #27FF64;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-creator-link:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(161, 148, 184, 0.7);
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
position: relative;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.landing-footer {
|
||||
margin-top: 6rem;
|
||||
padding: 3rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.landing-footer {
|
||||
margin-top: 4rem;
|
||||
padding: 2rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
gap: 1rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
37
src/components/landing/Footer/Footer.vue
Normal file
37
src/components/landing/Footer/Footer.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<FadeContent :blur="true" :duration="600">
|
||||
<footer class="landing-footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-left">
|
||||
<img :src="vueBitsLogo" alt="Vue Bits" class="footer-logo" />
|
||||
<p class="footer-description">
|
||||
A library created with <i class="pi pi-heart-fill footer-heart"></i> by
|
||||
<a href="https://davidhaz.com/" target="_blank" class="footer-creator-link">this guy</a>
|
||||
</p>
|
||||
<p class="footer-copyright">© {{ currentYear }} Vue Bits</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-links">
|
||||
<a href="https://github.com/DavidHDev/vue-bits" target="_blank" rel="noopener noreferrer" class="footer-link">
|
||||
GitHub
|
||||
</a>
|
||||
<router-link to="/text-animations/split-text" class="footer-link">
|
||||
Docs
|
||||
</router-link>
|
||||
<a href="https://www.jsrepo.com/" target="_blank" class="footer-link">
|
||||
CLI
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</FadeContent>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import vueBitsLogo from '../../../assets/logos/vue-bits-logo.svg'
|
||||
import FadeContent from '@/content/Animations/FadeContent/FadeContent.vue'
|
||||
import './Footer.css'
|
||||
|
||||
const currentYear = computed(() => new Date().getFullYear())
|
||||
</script>
|
||||
Reference in New Issue
Block a user