Korbs/Glee-Mirror
1
Fork 0
Code Issues Pull requests Activity

🚀 Init

Browse source
This commit is contained in:
Korbs 2025-02-22 02:16:08 -05:00
commit e0056b9cd9
Signed by: Korbs
SSH key fingerprint: SHA256:Q0b0KraMldpAO9oKa+w+gcsXsOTykQ4UkAKn0ByGn5U
26 changed files with 1560 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

114
src/components/BlockCTA.astro Normal file
View file

@ -0,0 +1,114 @@
---
// Properties
const {
Title,
Description,
ImageSource,
ImageAlt,
Label,
LabelType,
Shadow,
PrimaryAction,
SecondaryAction,
PrimaryActionText,
SecondaryActionText
} = Astro.props
---
<div class="pd-cta">
{ImageSource ?
<div class="pd-cta-start">
<img src={ImageSource} alt={ImageAlt}/>
</div>
:
null
}
<div class="pd-cta-end">
<div>
<h2>{Title}</h2>
<p>{Description}</p>
</div>
<div class="pd-cta-end-actions">
{SecondaryActionText ? <a id="cta-secondary" href={SecondaryAction}>{SecondaryActionText}</a> : null}
{PrimaryActionText ? <a id="cta-primary" href={PrimaryAction}>{PrimaryActionText}</a> : null}
{Label ? <p class={'pd-cta-label pd-cta-label-' + LabelType}>{Label}</p> : null}
</div>
</div>
</div>
<style define:vars={{ Shadow }}>
.pd-cta {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
gap: 48px;
margin: 24px 0px 140px 0px;
@media screen and (max-width: 800px) {
flex-direction: column-reverse !important;
margin-bottom: 48px;
}
&:nth-child(odd) {
flex-direction: row-reverse !important;
@media screen and (max-width: 800px) {flex-direction: column !important}
}
&:nth-child(even) {
@media screen and (max-width: 800px) {flex-direction: column !important}
}
.pd-cta-start {
position: relative;
@media screen and (max-width: 800px) {width: 100% !important}
img {
width: 100%;
height: 100%;
border-radius: 12px;
}
}
.pd-cta-end {
min-width: 50%;
max-width: 50%;
@media screen and (max-width: 800px) {
max-width: 100%;
width: 100%;
}
a {
background: transparent;
border: 2px light-dark(#121212, #FFFFFF) solid !important;
color: light-dark(#121212, #FFFFFF);
padding: 12px 20px;
border-radius: 3rem;
display: inline-block;
margin: 12px 2px 36px 2px;
text-decoration: none;
transition:
0.3s background,
0.6s color;
}
.pd-cta-label {
border-color: rgb(247, 247, 149);
background: rgb(247, 247, 149);
color: black !important;
padding: 8px 16px;
border-radius: 3rem;
display: inline-block;
margin: 12px 2px 36px 2px;
transition:
0.3s background,
0.6s color;
&.pd-cta-label-Note {
background-color: #1f6feb;
color: white !important;
}
&.pd-cta-label-Warning {
background-color: #da3633;
color: white !important;
}
}
}
}
</style>

25
src/components/Hero.astro Normal file
View file

@ -0,0 +1,25 @@
---
const {
Video,
Poster,
Title,
Description,
Actions
} = Astro.props
---
<div class="hero-section">
<video
src={Video}
poster={Poster}
autoplay loop muted
/>
<div class="hero-section-content">
<h2>{Title}</h2>
<p>{Description}</p>
<div class="hero-section-actions">
<a href="#" class="hsa-primary">Get Started</a>
<a href="#" class="hsa-secondary">View Pricing</a>
</div>
</div>
</div>

86
src/components/global/Footer.astro Normal file
View file

@ -0,0 +1,86 @@
<footer>
<div class="footer-top">
<div class="top-footer-start">
<img src="/logo.png"/>
<h2>Company Name</h2>
<p>A company slogan goes here.</p>
</div>
<div class="top-footer-end">
<div>
<h2>Footer Heading</h2>
<a href="#">Webpage</a>
<a href="#">Webpage</a>
<a href="#">Webpage</a>
</div>
<div>
<h2>Footer Heading</h2>
<a href="#">Webpage</a>
<a href="#">Webpage</a>
<a href="#">Webpage</a>
</div>
<div>
<h2>Footer Heading</h2>
<a href="#">Webpage</a>
<a href="#">Webpage</a>
<a href="#">Webpage</a>
<a href="#">Webpage</a>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="bottom-footer-start">
<p>© 2025 Company Name LLC</p>
</div>
<div class="bottom-footer-end">
<a href="#">Legal Document</a>
<a href="#">Privacy Policy</a>
<a href="#">Cookies Policy</a>
</div>
</div>
</footer>
<style>
footer {
background: light-dark(rgb(240 240 240), rgb(10 10 10));
border-radius: 12px;
padding: 48px;
margin-bottom: 24px;
.footer-top {
display: flex;
justify-content: space-between;
.top-footer-start {
display: flex;
flex-direction: column;
gap: 24px;
* {margin: 0px}
img {
width: 64px;
height: 64px;
object-fit: contain;
}
}
.top-footer-end {
display: flex;
gap: 24px;
* {margin: 0px}
div {
display: flex;
flex-direction: column;
gap: 12px;
}
}
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 2px light-dark(#dddddd, #232323) solid;
margin-top: 42px;
padding-top: 24px;
.bottom-footer-end {
display: flex;
gap: 12px;
}
}
}
</style>

17
src/components/global/Header.astro Normal file
View file

@ -0,0 +1,17 @@
<header>
<div class="header-start">
<a href="/">
<img class="header-site-logo" src="/logo.png"/>
<h2>Company Name</h2>
</a>
</div>
<div class="header-middle">
<a href="#">Webpage</a>
<a href="#">Webpage</a>
<a href="#">Webpage</a>
<a href="#">Webpage</a>
</div>
<div class="header-end">
<a href="#">Contact Us</a>
</div>
</header>

23
src/layouts/Base.astro Normal file
View file

@ -0,0 +1,23 @@
---
const { Title } = Astro.props
import Header from "@components/global/Header.astro"
import Footer from "@components/global/Footer.astro"
import "@styles/index.scss"
---
<html lang="en">
<head>
<title>{Title}</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
</head>
<body>
<Header/>
<slot />
<Footer/>
</body>
</html>

25
src/layouts/Markdown.astro Normal file
View file

@ -0,0 +1,25 @@
---
const { Title } = Astro.props
import Header from "@components/global/Header.astro"
import Footer from "@components/global/Footer.astro"
import "@styles/index.scss"
---
<html lang="en">
<head>
<title>{Title}</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
</head>
<body>
<Header/>
<div class="markdown">
<slot />
</div>
<Footer/>
</body>
</html>

24
src/pages/about.md Normal file
View file

@ -0,0 +1,24 @@
---
layout: '../layouts/Markdown.astro'
Title: 'About'
---
<style>.markdown {text-align: center}</style>
# About
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio.
Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est autem situm in nobis ut et voluptates et dolores nasci fatemur e corporis voluptatibus et doloribus -- itaque concedo, quod modo dicebas, cadere causa.
## Our Mission
Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est autem situm in nobis ut et voluptates et dolores nasci fatemur e corporis voluptatibus et doloribus -- itaque concedo.
## Our Team
Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est autem situm in nobis ut et voluptates et dolores nasci.
## Find Us
<iframe src="/embed-map.html" style="width: 100%;height: 500px;border-radius: 12px;border: 1px #2b2b2b solid;"></iframe>

83
src/pages/index.astro Normal file
View file

@ -0,0 +1,83 @@
---
import Base from "@layouts/Base.astro"
import Hero from "@components/Hero.astro"
import BlockCTA from "@components/BlockCTA.astro"
---
<Base>
<!-- Recommended: Use the first frame of the video as your poster -->
<Hero
Video="https://md.sudovanilla.org/videos/mp4/hero.mp4"
Poster="https://md.sudovanilla.org/images/hero-poster.png"
Title="Main Hero Header"
Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique."
/>
<div class="partners">
<p>Our Partners</p>
<div>
<img src="/partners/logoipsum-226.svg"/>
<img src="/partners/logoipsum-247.svg"/>
<img src="/partners/logoipsum-248.svg"/>
<img src="/partners/logoipsum-327.svg"/>
<img src="/partners/logoipsum-357.svg"/>
<img src="/partners/logoipsum-359.svg"/>
</div>
</div>
<div class="flexie">
<div class="rich-card">
<img src="https://ocean.sudovanilla.org/media/images/wallpapers/PureOS/Wallpapers/mountains.png"/>
<div class="rcc-icon">
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 19C9.10457 19 10 18.1046 10 17C10 15.8954 9.10457 15 8 15C6.89543 15 6 15.8954 6 17C6 18.1046 6.89543 19 8 19Z" stroke-width="1.5" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18 19C19.1046 19 20 18.1046 20 17C20 15.8954 19.1046 15 18 15C16.8954 15 16 15.8954 16 17C16 18.1046 16.8954 19 18 19Z" stroke-width="1.5" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.05 17H15V6.6C15 6.26863 14.7314 6 14.4 6H1" stroke-width="1.5" stroke-linecap="round"></path><path d="M5.65 17H3.6C3.26863 17 3 16.7314 3 16.4V11.5" stroke-width="1.5" stroke-linecap="round"></path><path d="M2 9L6 9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15 9H20.6101C20.8472 9 21.0621 9.13964 21.1584 9.35632L22.9483 13.3836C22.9824 13.4604 23 13.5434 23 13.6273V16.4C23 16.7314 22.7314 17 22.4 17H20.5" stroke-width="1.5" stroke-linecap="round"></path><path d="M15 17H16" stroke-width="1.5" stroke-linecap="round"></path></svg>
</div>
<div class="rich-card-content">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<div class="rcc-actions">
<a href="#">See it action</a>
</div>
</div>
</div>
<div class="rich-card">
<img src="https://ocean.sudovanilla.org/media/images/wallpapers/Trenta OS (Discontinued)/cloudy.jpg"/>
<div class="rcc-icon">
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.6087 7H14.3913C15.832 7 17 8.16795 17 9.6087C17 9.82481 16.8248 10 16.6087 10H7.3913C7.17519 10 7 9.82481 7 9.6087C7 8.16795 8.16795 7 9.6087 7Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 3H15C18.3137 3 21 5.68629 21 9V13C21 16.3137 18.3137 19 15 19H9C5.68629 19 3 16.3137 3 13V9C3 5.68629 5.68629 3 9 3Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 15.01L16.01 14.9989" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8 15.01L8.01 14.9989" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.5 19L8.5 21.5" stroke-width="1.5" stroke-linecap="round"></path><path d="M13.5 19L15.5 21.5" stroke-width="1.5" stroke-linecap="round"></path><path d="M16.5 19L18.5 21.5" stroke-width="1.5" stroke-linecap="round"></path><path d="M7.5 19L5.5 21.5" stroke-width="1.5" stroke-linecap="round"></path></svg>
</div>
<div class="rich-card-content">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<div class="rcc-actions">
<a href="#">See it action</a>
</div>
</div>
</div>
<div class="rich-card">
<img src="https://ocean.sudovanilla.org/media/images/wallpapers/Trenta OS (Discontinued)/free.jpg"/>
<div class="rcc-icon">
<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 4.5V9.16745C10.5 9.37433 10.3934 9.56661 10.218 9.67625L2.782 14.3237C2.60657 14.4334 2.5 14.6257 2.5 14.8325V15.7315C2.5 16.1219 2.86683 16.4083 3.24552 16.3136L9.75448 14.6864C10.1332 14.5917 10.5 14.8781 10.5 15.2685V18.2277C10.5 18.4008 10.4253 18.5654 10.2951 18.6793L8.13481 20.5695C7.6765 20.9706 8.03808 21.7204 8.63724 21.6114L11.8927 21.0195C11.9636 21.0066 12.0364 21.0066 12.1073 21.0195L15.3628 21.6114C15.9619 21.7204 16.3235 20.9706 15.8652 20.5695L13.7049 18.6793C13.5747 18.5654 13.5 18.4008 13.5 18.2277V15.2685C13.5 14.8781 13.8668 14.5917 14.2455 14.6864L20.7545 16.3136C21.1332 16.4083 21.5 16.1219 21.5 15.7315V14.8325C21.5 14.6257 21.3934 14.4334 21.218 14.3237L13.782 9.67625C13.6066 9.56661 13.5 9.37433 13.5 9.16745V4.5C13.5 3.67157 12.8284 3 12 3C11.1716 3 10.5 3.67157 10.5 4.5Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</div>
<div class="rich-card-content">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<div class="rcc-actions">
<a href="#">See it action</a>
</div>
</div>
</div>
</div>
<BlockCTA
Title="Section Title"
Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem."
ImageSource="https://ocean.sudovanilla.org/media/images/wallpapers/Trenta OS (Discontinued)/cloudy.jpg"
PrimaryAction="#"
PrimaryActionText="Primary Action"
/>
<BlockCTA
Title="Section Title"
Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem."
ImageSource="https://ocean.sudovanilla.org/media/images/wallpapers/Trenta OS (Discontinued)/free.jpg"
PrimaryAction="#"
PrimaryActionText="Primary Action"
SecondaryAction="#"
SecondaryActionText="Secondary Action"
/>
</Base>

217
src/styles/index.scss Normal file
View file

@ -0,0 +1,217 @@
/* Theme Variant */
:root {
color-scheme: light dark;
}
.body {
color: light-dark(#121212, #FFFFFF);
background: light-dark(#FFFFFF, #121212);
}
a {
color: light-dark(#121212, #FFFFFF);
}
body {
font-family: arial;
margin: auto;
max-width: 1400px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0px;
* {
display: flex;
align-items: center;
}
.header-start {
a {
gap: 12px;
text-decoration: none;
}
img {
width: 32px;
}
h2 {
font-size: 20px;
}
}
.header-middle {
gap: 6px;
a {
text-decoration: none;
transition: 0.3s filter;
padding: 6px 12px;
border-radius: 3rem;
&:hover {
filter: brightness(0.75);
transition: 0.3s filter;
background: rgba(255, 255, 255, 0.2)
}
}
}
.header-end {
gap: 12px;
a {
text-decoration: none;
transition: 0.3s filter;
padding: 6px 12px;
border-radius: 3rem;
&:hover {
filter: brightness(0.75);
transition: 0.3s filter;
background: rgba(255, 255, 255, 0.2)
}
}
}
}
.hero-section {
position: relative;
display: flex;
height: 500px;
justify-items: center;
align-items: center;
cursor: default;
video {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
z-index: -1;
opacity: 0.25;
}
.hero-section-content {
padding: 6%;
width: 50%;
}
.hero-section-actions {
display: flex;
gap: 12px;
padding-top: 12px;
a {
text-decoration: none;
transition: 0.3s filter;
&:hover {
filter: brightness(0.75);
transition: 0.3s filter;
}
&.hsa-primary {
border: 2px transparent solid;
background: white;
color: black;
padding: 10px 20px;
border-radius: 3rem;
}
&.hsa-secondary {
backdrop-filter: brightness(0.75) contrast(0.75);
border: 2px white solid;
background: transparent;
color: white;
padding: 10px 20px;
border-radius: 3rem;
}
}
}
}
.partners {
margin-top: 48px;
text-align: center;
p {
color: gray;
font-style: italic;
}
div {
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 48px 0px 92px 0px;
}
}
.markdown {
max-width: 870px;
margin: auto;
}
.flexie {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 12px;
}
.rich-card {
max-width: 700px;
padding: 24px;
border-radius: 12px;
position: relative;
display: flex;
img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
z-index: -1;
opacity: 0.25;
}
.rcc-icon {
position: absolute;
top: 0px;
right: 0px;
margin: 24px;
svg {
width: 48px;
height: 48px;
stroke: light-dark(#000, #FFF)
}
}
.rich-card-content {
padding-top: 20%;
display: flex;
flex-direction: column;
gap: 12px;
* {margin: 0px}
h2 {
font-size: 24px;
}
p {
font-size: 18px;
}
}
}