c2dda2165b
Several component files have been refactored to improve code clarity and ease of maintenance. This includes introducing comprehensive comments explaining the functionality and purpose of sections of the code, as well as leveraging Astro.js for more streamlined data sourcing. The commit also includes the removal of redundant files from the vendor scripts directory as part of a general clean-up, improving overall codebase organization.
266 lines
15 KiB
Text
266 lines
15 KiB
Text
---
|
|
// Import the necessary dependencies
|
|
import FooterSocialLink from "./ui/links/FooterSocialLink.astro";
|
|
import EmailFooterInput from "./ui/forms/input/EmailFooterInput.astro";
|
|
|
|
// Footer Section Names
|
|
const sectionOne: string = "Product";
|
|
const sectionTwo: string = "Company";
|
|
const sectionThree: string = "Stay up to date";
|
|
|
|
// Define the variables that will be used in this component
|
|
const content: string =
|
|
"Stay updated with the latest tools and exclusive deals.";
|
|
|
|
/* TypeScript type for links. */
|
|
type Links = {
|
|
title: string;
|
|
url: string;
|
|
};
|
|
|
|
// An array of links for Product section
|
|
const product: Links[] = [
|
|
{
|
|
title: "Tools & Equipment",
|
|
url: "#",
|
|
},
|
|
{
|
|
title: "Construction Services",
|
|
url: "/services",
|
|
},
|
|
{
|
|
title: "Pricing",
|
|
url: "#",
|
|
},
|
|
];
|
|
|
|
// An array of links for Company section
|
|
const company: Links[] = [
|
|
{
|
|
title: "About us",
|
|
url: "#",
|
|
},
|
|
{
|
|
title: "Blog",
|
|
url: "/blog",
|
|
},
|
|
{
|
|
title: "Careers",
|
|
url: "#",
|
|
},
|
|
{
|
|
title: "Customers",
|
|
url: "#",
|
|
},
|
|
];
|
|
---
|
|
|
|
<footer class="w-full bg-neutral-300 dark:bg-neutral-900">
|
|
<div
|
|
class="mx-auto w-full max-w-[85rem] px-4 py-10 sm:px-6 lg:px-16 lg:pt-20 2xl:max-w-screen-2xl"
|
|
>
|
|
<div class="grid grid-cols-2 gap-6 md:grid-cols-4 lg:grid-cols-5">
|
|
<div class="col-span-full lg:col-span-1">
|
|
<!-- Brand Logo -->
|
|
<svg class="h-auto w-32" viewBox="0 0 521 226" fill="none">
|
|
<rect
|
|
width="78.937"
|
|
height="18.485"
|
|
x="269"
|
|
y="154.911"
|
|
class="fill-current text-yellow-500 dark:text-yellow-400"
|
|
fill="currentColor"
|
|
rx="9.242"
|
|
transform="rotate(-43.075 269 154.911)"></rect>
|
|
<rect
|
|
width="78.937"
|
|
height="18.485"
|
|
x="319"
|
|
y="154.911"
|
|
class="fill-current text-yellow-500 dark:text-yellow-400"
|
|
fill="currentColor"
|
|
rx="9.242"
|
|
transform="rotate(-43.075 319 154.911)"></rect>
|
|
<rect
|
|
width="78.937"
|
|
height="18.485"
|
|
x="369.285"
|
|
y="154.911"
|
|
class="fill-current text-yellow-500 dark:text-yellow-400"
|
|
fill="currentColor"
|
|
rx="9.242"
|
|
transform="rotate(-43.075 369.285 154.911)"></rect>
|
|
<rect
|
|
width="28.464"
|
|
height="18.485"
|
|
x="419.57"
|
|
y="154.911"
|
|
class="fill-current text-yellow-500 dark:text-yellow-400"
|
|
fill="currentColor"
|
|
rx="9.242"
|
|
transform="rotate(-43.075 419.57 154.911)"></rect>
|
|
<path
|
|
class="fill-current text-yellow-500 dark:text-yellow-400"
|
|
fill="currentColor"
|
|
d="M499.804 128.068c7.03 2.636 6.885 12.63-.219 15.061l-18.951 6.483c-5.238 1.792-10.669-2.15-10.589-7.686l.196-13.514c.081-5.535 5.624-9.318 10.808-7.374l18.755 7.03Z"
|
|
></path>
|
|
<path
|
|
class="fill-current text-neutral-700 dark:text-neutral-300"
|
|
fill="currentColor"
|
|
d="M141.808 83.584c.171 5.803-1.024 10.837-3.584 15.104-5.717 9.387-15.701 14.336-29.952 14.848-6.485.256-13.61-1.323-21.376-4.736l.256-19.328c1.28 1.024 2.944 2.219 4.992 3.584 3.67 2.475 7.808 3.712 12.416 3.712 12.203 0 18.304-4.352 18.304-13.056v-.256c0-4.01-2.219-7.296-6.656-9.856-2.389-1.365-6.827-2.987-13.312-4.864a137.675 137.675 0 0 1-8.32-2.816c-10.496-5.888-15.744-14.421-15.744-25.6v-.768c0-5.12 1.408-9.899 4.224-14.336 2.816-4.523 6.528-8.021 11.136-10.496 4.693-2.56 9.728-3.925 15.104-4.096 7.253-.17 14.08 1.195 20.48 4.096v18.304c-4.693-4.096-10.88-6.144-18.56-6.144-2.816 0-5.419.725-7.808 2.176-3.67 2.219-5.504 5.461-5.504 9.728 0 5.803 4.267 9.984 12.8 12.544 1.536.512 4.565 1.45 9.088 2.816 7.68 2.304 13.184 5.76 16.512 10.368 3.413 4.608 5.248 10.965 5.504 19.072Zm66.758 20.736c-6.656 6.4-14.549 9.6-23.68 9.6-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984 8.704 0 16.299 2.944 22.784 8.832l-10.368 13.952c-3.328-3.67-7.467-5.504-12.416-5.504-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904 0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992 5.12 0 9.344-1.963 12.672-5.888l11.008 13.568Zm42.82-41.6c-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904V112h-17.28V79.616c0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984v17.28Zm77.051 16.896a34.47 34.47 0 0 1-.384 5.12h-50.048c1.109 3.584 3.157 6.485 6.144 8.704 2.987 2.133 6.357 3.2 10.112 3.2 5.205 0 9.515-2.005 12.928-6.016l10.496 13.952c-6.571 6.229-14.379 9.344-23.424 9.344-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984s17.621 3.328 24.192 9.984c6.656 6.57 9.984 14.635 9.984 24.192Zm-19.328-7.808c-3.157-6.059-8.107-9.088-14.848-9.088-6.827 0-11.819 3.03-14.976 9.088h29.824Zm145.596 7.936c0 9.643-3.328 17.792-9.984 24.448-6.571 6.571-14.677 9.856-24.32 9.856-9.472 0-17.579-3.413-24.32-10.24-6.741 6.827-14.848 10.24-24.32 10.24-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448V45.568h17.28v34.176c0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992s8.661-1.664 11.904-4.992c3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v43.008h-.128c3.328 5.461 8.149 8.192 14.464 8.192 4.693 0 8.661-1.664 11.904-4.992 3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v34.176Z"
|
|
></path>
|
|
<path
|
|
class="fill-current text-neutral-700 dark:text-neutral-300"
|
|
fill="currentColor"
|
|
d="M56.064 163.616H26.24V212H8.832V110.624h47.232v14.848H26.24v20.096h29.824v18.048ZM147.389 212h-18.304l-3.712-9.984c-6.827 8.021-15.531 12.032-26.112 12.032-9.557 0-17.664-3.328-24.32-9.984-6.57-6.656-9.856-14.72-9.856-24.192 0-7.253 2.048-13.781 6.144-19.584 4.096-5.888 9.557-10.069 16.384-12.544 4.01-1.451 7.936-2.176 11.776-2.176 7.253 0 13.781 2.091 19.584 6.272 5.888 4.096 10.069 9.557 12.544 16.384L147.389 212Zm-31.104-32.128c0-5.973-2.432-10.624-7.296-13.952-2.816-1.963-6.059-2.944-9.728-2.944-5.973 0-10.581 2.389-13.824 7.168-2.048 2.987-3.072 6.229-3.072 9.728 0 5.888 2.432 10.496 7.296 13.824 2.987 2.048 6.187 3.072 9.6 3.072 4.693 0 8.704-1.621 12.032-4.864 3.328-3.328 4.992-7.339 4.992-12.032Zm92.015 12.544c0 4.096-1.365 7.808-4.096 11.136-5.461 6.656-13.227 9.856-23.296 9.6-4.011-.085-8.405-.981-13.184-2.688-4.693-1.707-8.533-3.84-11.52-6.4l9.6-12.416c4.608 4.352 9.515 6.528 14.72 6.528h.384c2.133 0 4.053-.384 5.76-1.152 2.219-1.024 3.328-2.475 3.328-4.352v-.512c-.256-1.963-1.579-3.371-3.968-4.224-.939-.171-2.944-.555-6.016-1.152-3.84-.768-7.083-1.707-9.728-2.816-7.765-3.328-11.648-9.173-11.648-17.536 0-8.021 3.968-14.037 11.904-18.048 3.499-1.792 7.296-2.731 11.392-2.816 4.267-.085 8.704.64 13.312 2.176 5.291 1.792 9.045 4.139 11.264 7.04l-11.52 10.368c-2.987-2.987-6.229-4.48-9.728-4.48-5.461 0-8.192 1.792-8.192 5.376v.256c0 1.707 2.219 3.157 6.656 4.352.341.085 3.157.64 8.448 1.664 10.752 2.048 16.128 8.619 16.128 19.712v.384ZM251.511 212c-9.557 0-17.664-3.285-24.32-9.856-6.656-6.656-9.984-14.763-9.984-24.32v-67.2h17.28v34.944h17.024v14.72h-17.024v17.536c0 4.693 1.664 8.704 4.992 12.032 3.328 3.243 7.339 4.864 12.032 4.864V212Z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="col-span-1">
|
|
<h4 class="font-bold text-neutral-800 dark:text-neutral-200">
|
|
{sectionOne}
|
|
</h4>
|
|
|
|
<div class="mt-3 grid space-y-3">
|
|
{
|
|
product.map((item) => (
|
|
<p>
|
|
<a
|
|
class="inline-flex gap-x-2 rounded-lg text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-300 dark:focus:outline-none dark:focus:ring-1"
|
|
href={item.url}
|
|
>
|
|
{item.title}
|
|
</a>
|
|
</p>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-1">
|
|
<h4 class="font-bold text-neutral-800 dark:text-neutral-200">
|
|
{sectionTwo}
|
|
</h4>
|
|
|
|
<div class="mt-3 grid space-y-3">
|
|
{
|
|
company.map((item, index) => (
|
|
<p>
|
|
<a
|
|
class="inline-flex gap-x-2 rounded-lg text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-300 dark:focus:outline-none dark:focus:ring-1"
|
|
href={item.url}
|
|
>
|
|
{item.title}
|
|
</a>
|
|
{index === 2 ? (
|
|
<span class="ms-1 inline rounded-lg bg-[#e14d0b] px-2 py-1 text-xs text-neutral-50">
|
|
We're hiring
|
|
</span>
|
|
) : null}
|
|
</p>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-2">
|
|
<h4 class="font-bold text-neutral-800 dark:text-neutral-200">
|
|
{sectionThree}
|
|
</h4>
|
|
|
|
<form>
|
|
<EmailFooterInput />
|
|
<p class="mt-3 text-sm text-neutral-600 dark:text-neutral-400">
|
|
{content}
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="mt-9 grid gap-y-2 sm:mt-12 sm:flex sm:items-center sm:justify-between sm:gap-y-0"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-sm text-neutral-600 dark:text-neutral-400">
|
|
© <span id="current-year"></span> ScrewFast. Crafted by
|
|
<a
|
|
class="font-medium underline underline-offset-2 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-700 hover:decoration-dashed focus:outline-none focus-visible:ring dark:ring-zinc-200 dark:hover:text-neutral-300"
|
|
href="https://sobstvennoai.dev"
|
|
target="_blank"
|
|
rel="noopener noreferrer">sobstvennoAI</a
|
|
>.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Social Brands -->
|
|
<div>
|
|
<FooterSocialLink url="#"
|
|
><svg
|
|
class="h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400"
|
|
fill="currentColor"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
><title>Facebook</title><path
|
|
d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"
|
|
></path></svg
|
|
>
|
|
</FooterSocialLink>
|
|
|
|
<FooterSocialLink url="#"
|
|
><svg
|
|
class="h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400"
|
|
fill="currentColor"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
><title>X</title><path
|
|
d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
|
|
></path></svg
|
|
></FooterSocialLink
|
|
>
|
|
|
|
<FooterSocialLink url="https://github.com/mearashadowfax/ScrewFast"
|
|
><svg
|
|
class="h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400"
|
|
fill="currentColor"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
><title>GitHub</title><path
|
|
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
|
></path></svg
|
|
>
|
|
</FooterSocialLink>
|
|
|
|
<FooterSocialLink url="#"
|
|
><svg
|
|
class="h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400"
|
|
fill="currentColor"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
><title>Google</title><path
|
|
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
|
|
></path></svg
|
|
>
|
|
</FooterSocialLink>
|
|
|
|
<FooterSocialLink url="#"
|
|
><svg
|
|
class="h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400"
|
|
fill="currentColor"
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
><title>Slack</title><path
|
|
d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"
|
|
></path></svg
|
|
>
|
|
</FooterSocialLink>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const year = new Date().getFullYear();
|
|
const element = document.getElementById("current-year");
|
|
element!.innerText = year.toString();
|
|
</script>
|
|
</div>
|
|
</footer>
|