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.
131 lines
6.2 KiB
Text
131 lines
6.2 KiB
Text
---
|
|
// Import the necessary dependencies
|
|
import TabNav from "./ui/blocks/TabNav.astro";
|
|
import TabContent from "./ui/blocks/TabContent.astro";
|
|
import construction from "../images/construction-image.avif";
|
|
import tools from "../images/automated-tools.avif";
|
|
import dashboard from "../images/dashboard-image.avif";
|
|
|
|
// Define the variable for the section's heading
|
|
const title: string = `Customize <span class="text-yellow-500 dark:text-yellow-400">ScrewFast</span>'s offerings to perfectly suit your hardware and construction needs.`;
|
|
---
|
|
|
|
<div
|
|
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
|
|
>
|
|
<div class="relative p-6 md:p-16">
|
|
<div
|
|
class="relative z-10 lg:grid lg:grid-cols-12 lg:items-center lg:gap-16"
|
|
>
|
|
<!-- Section's heading and tab navigation -->
|
|
<div class="mb-10 lg:order-2 lg:col-span-6 lg:col-start-8 lg:mb-0">
|
|
<h2
|
|
class="text-2xl font-bold text-neutral-800 dark:text-neutral-200 sm:text-3xl"
|
|
>
|
|
<!-- About Fragment: https://docs.astro.build/en/basics/astro-syntax/#fragments -->
|
|
<Fragment set:html={title} />
|
|
</h2>
|
|
<!-- Tab navigation - use the attribute 'first' in the first TabNav for the component to work -->
|
|
<nav class="mt-5 grid gap-4 md:mt-10" aria-label="Tabs" role="tablist">
|
|
<TabNav
|
|
id="tabs-with-card-item-1"
|
|
dataTab="#tabs-with-card-1"
|
|
aria="tabs-with-card-1"
|
|
heading="Cutting-Edge Tools"
|
|
content="Empower your projects with ScrewFast's cutting-edge tools. Experience enhanced efficiency in construction management with our sophisticated automated solutions."
|
|
first={true}
|
|
>
|
|
<svg
|
|
class="mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-[#fa5a15] dark:fill-neutral-300 dark:hs-tab-active:fill-[#fb713b] md:h-7 md:w-7"
|
|
height="48"
|
|
viewBox="0 -960 960 960"
|
|
width="48"
|
|
><path
|
|
d="M764-80q-6 0-11-2t-10-7L501-331q-5-5-7-10t-2-11q0-6 2-11t7-10l85-85q5-5 10-7t11-2q6 0 11 2t10 7l242 242q5 5 7 10t2 11q0 6-2 11t-7 10l-85 85q-5 5-10 7t-11 2Zm0-72 43-43-200-200-43 43 200 200ZM195-80q-6 0-11.5-2T173-89l-84-84q-5-5-7-10.5T80-195q0-6 2-11t7-10l225-225h85l38-38-175-175h-57L80-779l99-99 125 125v57l175 175 130-130-67-67 56-56H485l-18-18 128-128 18 18v113l56-56 169 169q15 15 23.5 34.5T870-600q0 20-6.5 38.5T845-528l-85-85-56 56-52-52-211 211v84L216-89q-5 5-10 7t-11 2Zm0-72 200-200v-43h-43L152-195l43 43Zm0 0-43-43 22 21 21 22Zm569 0 43-43-43 43Z"
|
|
></path></svg
|
|
>
|
|
</TabNav>
|
|
|
|
<TabNav
|
|
id="tabs-with-card-item-2"
|
|
dataTab="#tabs-with-card-2"
|
|
aria="tabs-with-card-2"
|
|
heading="Intuitive Dashboards"
|
|
content="Navigate with ease using ScrewFast's intuitive dashboards. Set up and oversee your projects seamlessly, with user-friendly interfaces designed for quick and effective workflow management."
|
|
>
|
|
<svg
|
|
class="mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-[#fa5a15] dark:fill-neutral-300 dark:hs-tab-active:fill-[#fb713b] md:h-7 md:w-7"
|
|
height="48"
|
|
viewBox="0 -960 960 960"
|
|
width="48"
|
|
><path
|
|
d="M510-570v-270h330v270H510ZM120-450v-390h330v390H120Zm390 330v-390h330v390H510Zm-390 0v-270h330v270H120Zm60-390h210v-270H180v270Zm390 330h210v-270H570v270Zm0-450h210v-150H570v150ZM180-180h210v-150H180v150Zm210-330Zm180-120Zm0 180ZM390-330Z"
|
|
></path></svg
|
|
>
|
|
</TabNav>
|
|
|
|
<TabNav
|
|
id="tabs-with-card-item-3"
|
|
dataTab="#tabs-with-card-3"
|
|
aria="tabs-with-card-3"
|
|
heading="Robust Features"
|
|
content="Minimize complexity, maximize productivity. ScrewFast's robust features are engineered to streamline your construction process, delivering results that stand out for their excellence."
|
|
>
|
|
<svg
|
|
class="h-6 w-6 flex-shrink-0 text-neutral-700 hs-tab-active:text-[#fa5a15] dark:text-neutral-300 dark:hs-tab-active:text-[#fb713b] md:h-7 md:w-7"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205 3 1m1.5.5-1.5-.5M6.75 7.364V3h-3v18m3-13.636 10.5-3.819"
|
|
></path>
|
|
</svg>
|
|
</TabNav>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Contents for each tab - the 'first' attribute should be used in the first tab for that tab to be initially visible, 'second' changes the styles -->
|
|
<div class="lg:col-span-6">
|
|
<div class="relative">
|
|
<div>
|
|
<TabContent
|
|
id="tabs-with-card-1"
|
|
aria="tabs-with-card-item-1"
|
|
src={tools}
|
|
alt="Yellow and black heavy equipment on brown grass field"
|
|
first={true}
|
|
/>
|
|
<TabContent
|
|
id="tabs-with-card-2"
|
|
aria="tabs-with-card-item-2"
|
|
src={dashboard}
|
|
alt="A screenshot or graphic representation of the intuitive dashboard"
|
|
second={true}
|
|
/>
|
|
<TabContent
|
|
id="tabs-with-card-3"
|
|
aria="tabs-with-card-item-3"
|
|
src={construction}
|
|
alt="Gray metal building frame near tower crane during daytime"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute inset-0 grid h-full w-full grid-cols-12">
|
|
<!-- Decorative background and sizing -->
|
|
<div
|
|
class="col-span-full h-5/6 w-full rounded-xl bg-neutral-100 dark:bg-white/[.075] sm:h-3/4 lg:col-span-7 lg:col-start-6 lg:h-full"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Import the necessary Tabs plugin-->
|
|
<!--https://preline.co/plugins/html/tabs.html-->
|
|
<script is:inline src="/scripts/vendor/preline/tabs/index.js"></script>
|