Skip to content

Commit

Permalink
use a better footer
Browse files Browse the repository at this point in the history
  • Loading branch information
hi5a committed Nov 4, 2024
1 parent c96406e commit 19ce524
Show file tree
Hide file tree
Showing 6 changed files with 185 additions and 61 deletions.
17 changes: 7 additions & 10 deletions src/components/Card.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,41 @@
interface Props {
title: string;
body: string;
href: string;
}
const { href, title, body } = Astro.props;
const { title, body } = Astro.props;
---

<li class="link-card">
<a href={href}>
<div>
<h2>
{title}
<span>&rarr;</span>
</h2>
<p>
{body}
</p>
</a>
</div>
</li>
<style>
.link-card {
list-style: none;
display: flex;
padding: 1px;
background-color: #23262d;
background-color: #ffffff;
background-image: none;
background-size: 400%;
border-radius: 7px;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.link-card > a {
.link-card > div {
width: 100%;
text-decoration: none;
line-height: 1.4;
padding: calc(1.5rem - 1px);
border-radius: 8px;
color: white;
background-color: #23262d;
color: rgb(0, 0, 0);
background-color: #ffffff;
opacity: 0.8;
}
h2 {
Expand Down
184 changes: 155 additions & 29 deletions src/components/Footer.astro
Original file line number Diff line number Diff line change
@@ -1,32 +1,158 @@
---
---

<footer>
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="linksOnFotter">
<a id="privacy" class="footer-links" href="https://policies.nordicgamelab.org/privacy"> Privacy policy</a>
<a class="footer-links" href="https://policies.nordicgamelab.org/terms"> Terms of Service </a>
<a id="sitemap" class="footer-links" href="/sitemap.xml"> Sitemap </a>
<a class="footer-links" href="https://blog.nordicgamelab.org"> Blog </a>
<a class="footer-links" href="https://docs.nordicgamelab.org"> Documentation </a>
<a class="footer-links" href="https://help.nordicgamelab.org"> Help </a>
<a class="footer-links" href="https://brandfetch.com/nordicgamelab.org"> Brand assets</a>
<a class="footer-links" href="https://learnhub.nordicgamelab.org"> LearnHub</a>
<a class="footer-links" href="https://status.nordicgamelab.org"> Status</a>
<a class="footer-links" href="https://jobs.nordicgamelab.org"> Careers </a>
<a class="footer-links" href="https://link.nordicgamelab.org/sXb7">
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43">
<title>Your Privacy Choices Opt-Out Icon</title>
<path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path>
<path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path>
<path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path>
<path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path>
</svg>
Your Privacy Choices</a>
</div>
<p id="copyright"{new Date().getFullYear()} Nordic Game Lab, LLC. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<!-- Footer main -->
<section class="ft-main">
<div class="ft-main-item">
<h2 class="ft-title">Compnay</h2>
<ul>
<li><a href="https://www.nordicgamelab.org/about">About us</a></li>
<li><a href="https://www.nordicgamelab.org/learnhub">Pricing</a></li>
<li><a href="https://learnhub.nordicgamelab.org"> LearnHub</a></li>
<li><a href="https://jobs.nordicgamelab.org">Careers</a></li>
</ul>
</div>
<div class="ft-main-item">
<h2 class="ft-title">Resources</h2>
<ul>
<li><a href="https://docs.nordicgamelab.org">Docs</a></li>
<li><a href="https://blog.nordicgamelab.org">Blog</a></li>
<li><a href="https://status.nordicgamelab.org">Status</a></li>
<li><a href="https://static.nordicgamelab.org/sitemap.xml"> Sitemap </a></li>
<li><a href="https://about.nordicgamelab.org/brandResources">Brand Resources</a></li>
</ul>
</div>
<div class="ft-main-item">
<h2 class="ft-title">Contact</h2>
<ul>
<li><a href="https://help.nordicgamelab.org">Help</a></li>
<li><a href="https://about.nordicgamelab.org/sales">Sales</a></li>
<li><a href="https://about.nordicgamelab.org/advertise">Advertise</a></li>
<li><a href="https://about.nordicgamelab.org/press">Press</a></li>
</ul>
</div>
</section>

<!-- Footer social -->
<section class="ft-social">
<ul class="ft-social-list">
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://mastodon.social/@nordic_game_lab"><i class="bi bi-mastodon"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://github.com/nordic-game-lab"><i class="bi bi-github"></i></i></a></li>
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
<li><a href="https://www.youtube.com/@nordic_game_lab"><i class="bi bi-youtube"></i></a></li>
</ul>
</section>

<!-- Footer legal -->
<section class="ft-legal">
<ul class="ft-legal-list">
<li><a href="https://policies.nordicgamelab.org/terms">Terms &amp; Conditions</a></li>
<li><a href="https://policies.nordicgamelab.org/privacy">Privacy Policy</a></li>
<li><a href="https://link.nordicgamelab.org/sXb7">
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43">
<title>Your Privacy Choices Opt-Out Icon</title>
<path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path>
<path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path>
<path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path>
<path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path>
</svg>
Your Privacy Choices</a></li>
<li>&copy; {new Date().getFullYear()} Nordic Game Lab, LLC. All rights reserved.</li>
</ul>
</section>
</footer>

<style>/* Generic styling */
* {
box-sizing: border-box;
font-family: "Lato", sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-left: 0;
}
footer {
background-color: #555;
color: #bbb;
line-height: 1.5;
}
footer a {
text-decoration: none;
color: #eee;
}
a:hover {
text-decoration: underline;
}
.ft-title {
color: #fff;
font-family: "Merriweather", serif;
font-size: 1.375rem;
padding-bottom: 0.625rem;
}
/* Sticks footer to bottom */
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.container {
flex: 1;
}
/* Footer main */
.ft-main {
padding: 1.25rem 1.875rem;
display: flex;
flex-wrap: wrap;
}
@media only screen and (min-width: 29.8125rem /* 477px */) {
.ft-main {
justify-content: space-evenly;
}
}
@media only screen and (min-width: 77.5rem /* 1240px */) {
.ft-main {
justify-content: space-evenly;
}
}
.ft-main-item {
padding: 1.25rem;
min-width: 12.5rem;
}

/* Footer social */
.ft-social {
padding: 0 1.875rem 1.25rem;
}
.ft-social-list {
display: flex;
justify-content: center;
border-top: 1px #777 solid;
padding-top: 1.25rem;
}
.ft-social-list li {
margin: 0.5rem;
font-size: 1.25rem;
}
/* Footer legal */
.ft-legal {
padding: 0.9375rem 1.875rem;
background-color: #333;
}
.ft-legal-list {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.ft-legal-list li {
margin: 0.125rem 0.625rem;
white-space: nowrap;
}
/* one before the last child */
.ft-legal-list li:nth-last-child(2) {
flex: 1;
}</style>
4 changes: 2 additions & 2 deletions src/components/header.astro
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
---
<link rel="stylesheet" href="https://static.nordicgamelab.org/bootstrap.css">
<script src="https://static.nordicgamelab.org/bootstrap.bundle.min.js"></script>
<script src="https://static.nordicgamelab.org/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top" id="navbar">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" id="navbar-brand" href="https://link.nordicgamelab.org/GrX">Nordic Game Lab</a>
<a class="navbar-brand" id="navbar-brand" href="https://link.nordicgamelab.org/GrX"><img src="https://res.cloudinary.com/dkbe3sbtu/image/upload/v1730331353/Logos/nordic-game-lab_wkmnk3.png" alt="Nordic Game Lab, Empowering Innovation, Transforming Futures" width="180" height="45"></a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
Expand Down
3 changes: 2 additions & 1 deletion src/layouts/Layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ const { title } = Astro.props;
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/ico" href="/favicon.ico" />
<link rel="stylesheet" href="https://static.nordicgamelab.org/bootstrap.css">
<script src="https://static.nordicgamelab.org/bootstrap.bundle.min.js"></script>
<script src="https://static.nordicgamelab.org/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
Expand Down
36 changes: 18 additions & 18 deletions src/pages/about.astro
Original file line number Diff line number Diff line change
@@ -1,53 +1,53 @@
---
import Layout from '@layouts/Layout.astro';
import Card from '../components/Card.astro';
---

<Layout title="About Us">
<main class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold mb-4">About Nordic Game Lab, LLC</h1>
<h1 class="text-3xl font-bold mb-4 text-center">About Nordic Game Lab, LLC</h1>

<p class="mb-6">
Nordic Game Lab, LLC is a software development company founded on the belief that high-quality software solutions should be accessible to all businesses. Founded by Andrew Ball, a seasoned software developer, Nordic Game Lab was born out of a desire to provide affordable, yet powerful tools that empower businesses to thrive in the digital age.
</p>

<section class="mb-8">
<h2 class="text-2xl font-bold mb-4">Our Mission</h2>
<h2 class="text-2xl font-bold mb-4 text-center">Our Mission</h2>
<p class="mb-4">
At Nordic Game Lab, we are driven by a mission to empower businesses with cutting-edge software solutions that fuel innovation, efficiency, and growth. We are dedicated to delivering exceptional, tailor-made software products that not only meet but exceed our clients' expectations. Our commitment to excellence drives us to be the trusted partner for businesses seeking to unlock the full potential of technology in their operations.
</p>
</section>

<section class="mb-8">
<h2 class="text-2xl font-bold mb-4">Our Vision</h2>
<h2 class="text-2xl font-bold mb-4 text-center">Our Vision</h2>
<p class="mb-4">
We envision Nordic Game Lab as a global leader in revolutionizing the software industry. We aspire to continuously raise the bar for excellence in software development, providing businesses with the tools they need to succeed in a rapidly evolving digital landscape. Through relentless innovation, exceptional talent, and an unwavering dedication to our clients' success, we see a future where Nordic Game Lab is synonymous with cutting-edge, world-class software solutions that transform industries and drive positive change worldwide.
</p>
</section>

<section class="mb-8">
<h2 class="text-2xl font-bold mb-4">Our Expertise</h2>
<h2 class="text-2xl font-bold mb-4 text-center">Our Expertise</h2>
<p class="mb-4">
We specialize in crafting high-quality HR software solutions using the robust and versatile Bootstrap framework. This allows us to deliver responsive, user-friendly, and visually appealing applications that cater to the unique needs of our clients.
We specialize in crafting high-quality software solutions using a multitude of frameworks including the robust and versatile Bootstrap, Astro JS, and SvelteKit. This allows us to deliver responsive, user-friendly, and visually appealing applications that cater to the unique needs of our clients.
</p>
</section>

<section class="mb-8">
<h2 class="text-2xl font-bold mb-4">Our Values</h2>
<ul class="list-disc list-inside mb-4">
<li>
<strong>Client Focus:</strong> We prioritize understanding our clients' needs and goals, ensuring that our solutions align perfectly with their vision.
</li>
<li>
<strong>Innovation:</strong> We embrace new technologies and methodologies to deliver cutting-edge solutions that give our clients a competitive advantage.
</li>
<li>
<strong>Quality:</strong> We adhere to rigorous quality standards throughout the development process, ensuring that our products are reliable, efficient, and perform flawlessly.
</li>
</ul>
<h2 class="text-2xl font-bold mb-4 text-center">Our Motto</h2>
<p class="mb-4">
"Empowering Innovation, Transforming Futures"
</p>
</section>

<section class="mb-8">
<h2 class="text-2xl font-bold mb-4 text-center">Our Values</h2>
<Card title='Client Focus' body="We prioritize understanding our clients' needs and goals, ensuring that our solutions align perfectly with their vision."></Card>
<Card title='Innovation' body="We embrace new technologies and methodologies to deliver cutting-edge solutions that give our clients a competitive advantage."></Card>
<Card title='Quality' body="We adhere to rigorous quality standards throughout the development process, ensuring that our products are reliable, efficient, and perform flawlessly."></Card>
</section>

<section>
<h2 class="text-2xl font-bold mb-4">Partner with Nordic Game Lab</h2>
<h2 class="text-2xl font-bold mb-4 text-center">Partner with Nordic Game Lab</h2>
<p>
If you're looking for a software development partner who is passionate about delivering exceptional results, <a href="https://nordicgamelab.partnerportal.io">contact Nordic Game Lab today</a>. Let us help you transform your business with innovative and affordable software solutions.
</p>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ import Layout from '@layouts/indexLayout.astro';
<address>
<strong>We're on social networks</strong>
<ul class="company-social companySocial">
<li><a rel="me" href="https://mastodon.social/@hi5a"><img src="/images/mastodon-fill.png" width="40" height="40"></a></li>
<li><a rel="me" href="https://mastodon.social/@nordic_game_lab"><img src="/images/mastodon-fill.png" width="40" height="40"></a></li>
<li><a href="https://brandfetch.com/nordicgamelab.org"><img src="/images/brandfetch.png" width="40" height="40"></a></li>
</ul>
</address>
Expand Down

0 comments on commit 19ce524

Please sign in to comment.