Update image handling and responsive button text sizing
Simplified image handling configuration in the "astro.config.mjs" by removing explicit sizing. Updated text sizing of PrimaryCTA and SecondaryCTA components to scale responsively in 2xl views. Aimed to improve the user interface and experience on larger screens.
This commit is contained in:
Emil Gulamov
parent
e18dff550c
commit
6610a27857
22 changed files with 145 additions and 146 deletions
22
package-lock.json
generated
22
package-lock.json
generated
|
|
@ -17,6 +17,7 @@
|
|||
"typescript": "^5.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-astro": "^0.13.0",
|
||||
"prettier-plugin-tailwindcss": "^0.5.11"
|
||||
|
|
@ -1236,6 +1237,18 @@
|
|||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@tailwindcss/forms": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
|
||||
"integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"mini-svg-data-uri": "^1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/babel__core": {
|
||||
"version": "7.20.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
|
||||
|
|
@ -4591,6 +4604,15 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/mini-svg-data-uri": {
|
||||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
|
||||
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"mini-svg-data-uri": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "9.0.3",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
"typescript": "^5.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-astro": "^0.13.0",
|
||||
"prettier-plugin-tailwindcss": "^0.5.11"
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
---
|
||||
/* `title` variable used to customise the heading. */
|
||||
// Variables for customization of the LoginModal Component
|
||||
// Main heading
|
||||
const title: string = "Trusted by Industry Leaders";
|
||||
|
||||
/* `subTitle` variable used to customise the sub-heading text. */
|
||||
// Sub-heading text
|
||||
const subTitle: string =
|
||||
"Experience the reliability chosen by industry giants.";
|
||||
|
||||
/*
|
||||
In the above, the title and subTitle attributes are variables part of the ClientsSection component.
|
||||
*/
|
||||
---
|
||||
|
||||
<div
|
||||
|
|
@ -17,7 +14,7 @@ const subTitle: string =
|
|||
<!-- Title and description -->
|
||||
<div class="mx-auto mb-6 w-2/3 space-y-1 text-center sm:w-1/2 lg:w-1/3">
|
||||
<h2
|
||||
class="text-balanced text-xl font-semibold text-neutral-800 dark:text-neutral-200 md:text-2xl md:leading-tight"
|
||||
class="text-balance text-xl font-semibold text-neutral-800 dark:text-neutral-200 md:text-2xl md:leading-tight"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,15 @@
|
|||
---
|
||||
// import necessary dependencies
|
||||
// Import the necessary dependencies from individual component files
|
||||
import { Image } from "astro:assets";
|
||||
import featureImage from "../images/features-image.avif";
|
||||
import IconBlock from "./ui/blocks/IconBlock.astro";
|
||||
|
||||
/* `title` variable used to customise the heading. */
|
||||
// Main heading
|
||||
const title: string = "Meeting Industry Demands";
|
||||
|
||||
/* `subTitle` variable used to customise the sub-heading text. */
|
||||
// Sub-heading text
|
||||
const subTitle: string =
|
||||
"At ScrewFast, we tackle the unique challenges encountered in the hardware and construction sectors. From cutting-edge tools to expert services, we're dedicated to helping you overcome obstacles and achieve your goals.";
|
||||
|
||||
/*
|
||||
In the above, the title and subTitle attributes are variables part of the FeaturesGeneral component.
|
||||
*/
|
||||
---
|
||||
|
||||
<div
|
||||
|
|
@ -34,7 +30,7 @@ const subTitle: string =
|
|||
<div class="lg:col-span-1">
|
||||
<!-- Title Block -->
|
||||
<h2
|
||||
class="text-balanced text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-3xl"
|
||||
class="text-balance text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-3xl"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,13 @@
|
|||
---
|
||||
// Import the necessary dependencies from individual component files
|
||||
import TabNav from "./ui/blocks/TabNav.astro";
|
||||
import TabContent from "./ui/blocks/TabContent.astro";
|
||||
import { Image } from "astro:assets";
|
||||
import construction from "../images/construction-image.avif";
|
||||
import tools from "../images/automated-tools.avif";
|
||||
import dashboard from "../images/dashboard-image.avif";
|
||||
|
||||
/* `title` variable used to customise the heading. */
|
||||
// Main 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.`;
|
||||
|
||||
/*
|
||||
In the above, the title attribute is a variable part of the FeaturesNavs component.
|
||||
*/
|
||||
---
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@ const subTitle:string =
|
|||
|
||||
/* `primaryBtn` and `primaryBtnURL` variables used to customise the text and target link of the primary button. */
|
||||
const primaryBtn:string = "Start Exploring";
|
||||
const primaryBtnURL:string = "#";
|
||||
const primaryBtnURL:string = "/products";
|
||||
|
||||
/* `secondaryBtn` and `secondaryBtnURL` variables used to customise the text and target link of the secondary button. */
|
||||
const secondaryBtn:string = "Contact Sales Team";
|
||||
const secondaryBtnURL:string = "#";
|
||||
const secondaryBtnURL:string = "/contact";
|
||||
|
||||
/* `rating` variable used to customise the rating. */
|
||||
const rating:number = 4.8;
|
||||
|
|
@ -44,7 +44,7 @@ const reviews:string = "12.8k";
|
|||
<!-- Title and description -->
|
||||
<div>
|
||||
<h1
|
||||
class="text-balanced block text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 sm:text-4xl lg:text-6xl lg:leading-tight"
|
||||
class="text-balance block text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 sm:text-4xl lg:text-6xl lg:leading-tight"
|
||||
>
|
||||
<!-- About Fragment: https://docs.astro.build/en/basics/astro-syntax/#fragments -->
|
||||
<Fragment set:html={title} />
|
||||
|
|
@ -126,9 +126,11 @@ const reviews:string = "12.8k";
|
|||
<div class="top-12 overflow-hidden">
|
||||
<Image
|
||||
src={heroImage}
|
||||
alt=""
|
||||
alt="Stack of ScrewFast product boxes containing assorted hardware tools"
|
||||
class="h-full w-full scale-110 object-cover object-center"
|
||||
draggable={"false"}
|
||||
loading={"eager"}
|
||||
format={"avif"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,22 @@
|
|||
---
|
||||
const title: string = "ScrewFast";
|
||||
const author:string = "Emil Gulamov"
|
||||
const description:string = "";
|
||||
const URL:string = "https://screw-fast.vercel.app";
|
||||
const socialImage:string = "https://screw-fast.vercel.app/social.png";
|
||||
// Customize the following metadata for your landing page
|
||||
|
||||
const title: string = "ScrewFast"; // Replace with your website title
|
||||
const ogTitle: string = "ScrewFast: Hardware Tools & Construction Services"; // Replace with your Open Graph title
|
||||
const author:string = "Emil Gulamov" // Replace with the author's name
|
||||
const description:string = "ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability."; // Replace with your site description
|
||||
const URL:string = "https://screw-fast.vercel.app"; // Replace with your website URL
|
||||
const socialImage:string = "https://screw-fast.vercel.app/social.png"; // Replace with the URL to your social media image
|
||||
---
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
{{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
"name": "{title}",
|
||||
"url": "{URL}",
|
||||
"description": "{description}"
|
||||
}
|
||||
"name": title,
|
||||
"url": URL,
|
||||
"description": description
|
||||
}}
|
||||
</script>
|
||||
|
||||
<meta
|
||||
|
|
@ -29,7 +32,7 @@ const socialImage:string = "https://screw-fast.vercel.app/social.png";
|
|||
<meta property="og:locale" content="en_US" />
|
||||
<meta property="og:url" content={URL}>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content={title}>
|
||||
<meta property="og:title" content={ogTitle}>
|
||||
<meta property="og:site_name" content={title}/>
|
||||
<meta property="og:description" content={description}>
|
||||
<meta property="og:image" content={socialImage}>
|
||||
|
|
@ -41,13 +44,16 @@ const socialImage:string = "https://screw-fast.vercel.app/social.png";
|
|||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:domain" content={URL}>
|
||||
<meta property="twitter:url" content={URL}>
|
||||
<meta name="twitter:title" content={title}>
|
||||
<meta name="twitter:title" content={ogTitle}>
|
||||
<meta name="twitter:description" content={description}>
|
||||
<meta name="twitter:image" content={socialImage}>
|
||||
|
||||
<link rel="manifest" href="/manifest.webmanifest" />
|
||||
|
||||
<!-- https://docs.astro.build/en/guides/integrations-guide/sitemap/ -->
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
|
||||
<!-- Add your favicon and apple touch icon links -->
|
||||
<link href="/favicon.ico" rel="icon" sizes="any" type="image/x-icon"/>
|
||||
<link href="/icon.svg" rel="icon" type="image/svg+xml" sizes="any"/>
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
---
|
||||
// Import the necessary dependencies from individual component files
|
||||
import ThemeIcon from "./ThemeIcon.astro";
|
||||
import NavLink from "./ui/links/NavLink.astro";
|
||||
import Authentication from "./Authentication.astro";
|
||||
---
|
||||
|
||||
<header
|
||||
|
|
@ -12,7 +14,7 @@ import NavLink from "./ui/links/NavLink.astro";
|
|||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<a
|
||||
class="flex-none text-xl font-semibold dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600"
|
||||
class="flex-none text-xl outline-none rounded-lg font-semibold dark:focus:outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200"
|
||||
href="/"
|
||||
aria-label="Brand"
|
||||
>
|
||||
|
|
@ -126,27 +128,8 @@ import NavLink from "./ui/links/NavLink.astro";
|
|||
<NavLink url="/services" name="Services" />
|
||||
<NavLink url="/blog" name="Blog" />
|
||||
<NavLink url="/contact" name="Contact" />
|
||||
|
||||
<a
|
||||
class="flex items-center gap-x-2 font-medium text-neutral-500 hover:text-[#fa5a15] dark:border-neutral-700 dark:text-neutral-400 dark:hover:text-[#fb713b] md:my-6 md:border-s md:border-neutral-300 md:ps-6"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4 flex-shrink-0"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
Log in
|
||||
</a>
|
||||
|
||||
<Authentication />
|
||||
<span class="hidden md:inline-block">
|
||||
<ThemeIcon />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
---
|
||||
// import necessary dependencies
|
||||
// Import the necessary dependencies from individual component files
|
||||
import SecondaryCTA from "./ui/buttons/SecondaryCTA.astro";
|
||||
/* `title` variable used to customise the heading. */
|
||||
|
||||
// Variables for customization of the LoginModal Component
|
||||
// Main heading
|
||||
const title: string = "Simple, Transparent Pricing";
|
||||
|
||||
/* `subTitle` variable used to customise the sub-heading text. */
|
||||
// Sub-heading text
|
||||
const subTitle: string =
|
||||
"Boost efficiency with ScrewFast's clear, value-driven plans.";
|
||||
|
||||
/*
|
||||
In the above, the title and subTitle attributes are variables part of the PricingSection component.
|
||||
*/
|
||||
|
||||
/* TypeScript type for product. */
|
||||
type Product = {
|
||||
name: string;
|
||||
|
|
@ -62,7 +60,7 @@ const professionalToolbox: Product = {
|
|||
<!-- Title and description -->
|
||||
<div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
|
||||
<h2
|
||||
class="text-balanced text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
|
||||
class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
---
|
||||
/* `title` variable used to customise the main heading. */
|
||||
// Variables for customization of the LoginModal Component
|
||||
// Main heading
|
||||
const title: string = "Fast-Track Your Projects";
|
||||
|
||||
/* `subTitle` variable used to customise the sub-heading text. */
|
||||
// Sub-heading text
|
||||
const subTitle: string =
|
||||
"At ScrewFast, we ensure a swift start with instant account setup. Experience the speed of construction redefined.";
|
||||
|
||||
|
|
@ -22,7 +23,7 @@ const testimonials: Testimonial[] = [
|
|||
author: "Samantha Ruiz",
|
||||
role: "Chief Operating Officer | ConstructIt Inc.",
|
||||
avatarSrc:
|
||||
"https://images.unsplash.com/photo-1542206395-9feb3edaa68d?q=80&w=1528&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||
"https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80",
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,67 +1,43 @@
|
|||
<div
|
||||
class="hs-dropdown"
|
||||
data-hs-dropdown-placement="bottom-right"
|
||||
data-hs-dropdown-offset="30"
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Dark Theme Toggle"
|
||||
class="hs-dark-mode group flex items-center font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] hs-dark-mode-active:hidden dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none"
|
||||
data-hs-theme-click-value="dark"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="hs-dropdown-toggle hs-dark-mode group flex items-center rounded-lg font-medium text-neutral-600 outline-none ring-zinc-500 hover:text-[#fa5a15] dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none"
|
||||
<svg
|
||||
class="h-4 w-4 flex-shrink-0"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg
|
||||
>
|
||||
<svg
|
||||
class="block h-4 w-4 hs-dark-mode-active:hidden"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg
|
||||
>
|
||||
<svg
|
||||
class="hidden h-4 w-4 hs-dark-mode-active:block"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><circle cx="12" cy="12" r="4"></circle><path d="M12 8a2 2 0 1 0 4 4"
|
||||
></path><path d="M12 2v2"></path><path d="M12 20v2"></path><path
|
||||
d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"
|
||||
></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path
|
||||
d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"
|
||||
></path></svg
|
||||
>
|
||||
</button>
|
||||
|
||||
<div
|
||||
id="selectThemeDropdown"
|
||||
class="hs-dropdown-menu z-10 mb-2 mt-2 hidden origin-bottom-left space-y-1 rounded-lg bg-neutral-100 p-2 opacity-0 shadow-md transition-[margin,opacity] duration-300 hs-dropdown-open:opacity-100 dark:divide-neutral-700 dark:border dark:border-neutral-700 dark:bg-neutral-700"
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Light Theme Toggle"
|
||||
class="hs-dark-mode group hidden items-center font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] hs-dark-mode-active:block dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none"
|
||||
data-hs-theme-click-value="light"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4 flex-shrink-0"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><circle cx="12" cy="12" r="4"></circle><path d="M12 8a2 2 0 1 0 4 4"
|
||||
></path><path d="M12 2v2"></path><path d="M12 20v2"></path><path
|
||||
d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"
|
||||
></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path
|
||||
d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"
|
||||
></path></svg
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-800 hover:bg-neutral-200 hs-auto-mode-active:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-300"
|
||||
data-hs-theme-click-value="auto"
|
||||
>
|
||||
Auto (system default)
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-800 hover:bg-neutral-200 hs-auto-mode-active:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-300"
|
||||
data-hs-theme-click-value="default"
|
||||
>
|
||||
Default (light mode)
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-800 hover:bg-neutral-200 hs-auto-mode-active:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-300"
|
||||
data-hs-theme-click-value="dark"
|
||||
>
|
||||
Dark
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ interface Props {
|
|||
id={id}
|
||||
>
|
||||
<button
|
||||
class="hs-accordion-toggle group inline-flex w-full items-center justify-between gap-x-3 rounded-lg pb-3 text-start font-semibold text-neutral-800 outline-none ring-zinc-500 transition hover:text-neutral-500 focus-visible:ring dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:outline-none md:text-lg"
|
||||
class="hs-accordion-toggle group inline-flex w-full items-center justify-between gap-x-3 text-balance rounded-lg pb-3 text-start font-semibold text-neutral-800 outline-none ring-zinc-500 transition hover:text-neutral-500 focus-visible:ring dark:text-neutral-200 dark:ring-zinc-200 dark:hover:text-neutral-400 dark:focus:outline-none md:text-lg"
|
||||
aria-controls={collapseId}
|
||||
>
|
||||
{heading}
|
||||
|
|
@ -51,7 +51,7 @@ interface Props {
|
|||
class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300"
|
||||
aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-one"
|
||||
>
|
||||
<p class="text-neutral-600 dark:text-neutral-400">
|
||||
<p class="text-pretty text-neutral-600 dark:text-neutral-400">
|
||||
{content}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ interface Props {
|
|||
<slot />
|
||||
<div class="grow">
|
||||
<h3
|
||||
class="text-balanced text-lg font-semibold text-gray-800 dark:text-neutral-200"
|
||||
class="text-balance text-lg font-semibold text-gray-800 dark:text-neutral-200"
|
||||
>
|
||||
{heading}
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ Example:
|
|||
|
||||
<button
|
||||
type="button"
|
||||
class={`${first ? "active dark:hover:bg-neutral-700 dark:focus:ring-neutral-600 rounded-xl p-4 text-start outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 focus-visible:ring hs-tab-active:bg-neutral-50 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 dark:hs-tab-active:bg-neutral-700/60 md:p-5" : "dark:hover:bg-neutral-700 dark:focus:ring-neutral-600 rounded-xl p-4 text-start outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 focus-visible:ring hs-tab-active:bg-neutral-50 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 dark:hs-tab-active:bg-neutral-700/60 md:p-5"}`}
|
||||
class={`${first ? "active dark:hover:bg-neutral-700 rounded-xl p-4 text-start outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 focus-visible:ring hs-tab-active:bg-neutral-50 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent dark:ring-zinc-200 dark:focus:outline-none dark:hs-tab-active:bg-neutral-700/60 md:p-5" : "dark:hover:bg-neutral-700 rounded-xl p-4 text-start outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 focus-visible:ring hs-tab-active:bg-neutral-50 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent dark:ring-zinc-200 dark:focus:outline-none dark:hs-tab-active:bg-neutral-700/60 md:p-5"}`}
|
||||
id={id}
|
||||
data-hs-tab={dataTab}
|
||||
aria-controls={aria}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ interface Props {
|
|||
---
|
||||
|
||||
<a
|
||||
class="group inline-flex items-center justify-center gap-x-2 rounded-lg border border-transparent bg-[#fa5a15] px-4 py-3 text-sm font-semibold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-[#e14d0b] focus-visible:ring active:bg-[#e14d0b] disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 2xl:text-base"
|
||||
class="group inline-flex items-center justify-center gap-x-2 rounded-lg border border-transparent bg-[#fa5a15] px-4 py-3 text-sm font-semibold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-[#e14d0b] focus-visible:ring active:bg-[#e14d0b] disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none 2xl:text-base"
|
||||
href={url}
|
||||
>
|
||||
{title}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ interface Props {
|
|||
---
|
||||
|
||||
<a
|
||||
class="inline-flex items-center justify-center gap-x-2 rounded-lg border border-neutral-200 bg-neutral-300 px-4 py-3 text-center text-sm font-medium text-neutral-500 shadow-sm outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-400/50 hover:text-neutral-600 focus-visible:ring active:text-neutral-700 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-zinc-700 dark:text-neutral-300 dark:ring-zinc-200 dark:hover:bg-zinc-600 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600 2xl:text-base"
|
||||
class="inline-flex items-center justify-center gap-x-2 rounded-lg border border-neutral-200 bg-neutral-300 px-4 py-3 text-center text-sm font-medium text-neutral-600 shadow-sm outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-400/50 hover:text-neutral-600 focus-visible:ring active:text-neutral-700 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-zinc-700 dark:text-neutral-300 dark:ring-zinc-200 dark:hover:bg-zinc-600 dark:focus:outline-none 2xl:text-base"
|
||||
href={url}
|
||||
>
|
||||
{title}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ interface Props {
|
|||
name: string;
|
||||
}
|
||||
---
|
||||
|
||||
<!--
|
||||
Re-usable link component for navigation bar. Highlights the active link
|
||||
by comparing the current URL with the href of each link.
|
||||
|
|
@ -15,7 +16,7 @@ If URL is '/' (home page), assign ID as 'home'
|
|||
<a
|
||||
id={url === "/" ? "home" : url.split("/")[1]}
|
||||
href={url}
|
||||
class="font-medium text-neutral-500 hover:text-neutral-400 dark:text-neutral-400 dark:hover:text-neutral-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600 md:py-6"
|
||||
class="rounded-lg font-medium text-neutral-600 outline-none ring-zinc-500 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-500 dark:focus:outline-none md:py-3 2xl:text-base"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
|
@ -28,9 +29,9 @@ If URL is '/' (home page), assign ID as 'home'
|
|||
if (nav) {
|
||||
// If a matching link found, update its styles and set aria-current attribute
|
||||
nav.classList.remove(
|
||||
"text-neutral-500",
|
||||
"text-neutral-600",
|
||||
"dark:text-neutral-400",
|
||||
"hover:text-neutral-400",
|
||||
"hover:text-neutral-500",
|
||||
"dark:hover:text-neutral-500",
|
||||
);
|
||||
nav.classList.add("text-[#fa5a15]", "dark:text-[#fa5a15]");
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
---
|
||||
import Meta from "../components/Meta.astro";
|
||||
import Navbar from "../components/Navbar.astro";
|
||||
import FooterSection from "../components/FooterSection.astro";
|
||||
|
||||
const { title = "ScrewFast" } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
|
|
@ -31,8 +34,10 @@ interface Props {
|
|||
class="bg-neutral-200 selection:bg-yellow-400 selection:text-neutral-700 dark:bg-neutral-800"
|
||||
>
|
||||
<div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8">
|
||||
<Navbar />
|
||||
<slot />
|
||||
</div>
|
||||
<FooterSection />
|
||||
<style>
|
||||
// These css rules are for the page scrollbar and scrolling experience with lenis library
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
import MainLayout from "../layouts/MainLayout.astro";
|
||||
import Navbar from "../components/Navbar.astro";
|
||||
|
||||
---
|
||||
|
||||
<MainLayout>
|
||||
<Navbar />
|
||||
|
||||
</MainLayout>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import MainLayout from "../layouts/MainLayout.astro";
|
||||
import Navbar from "../components/Navbar.astro";
|
||||
import HeroSection from "../components/HeroSection.astro";
|
||||
import HeroSection2 from "../components/HeroSection2.astro";
|
||||
import ClientsSection from "../components/ClientsSection.astro";
|
||||
import FeaturesGeneral from "../components/FeaturesGeneral.astro";
|
||||
import FeaturesNavs from "../components/FeaturesNavs.astro";
|
||||
|
|
@ -11,7 +11,7 @@ import FAQ from "../components/FAQ.astro";
|
|||
---
|
||||
|
||||
<MainLayout>
|
||||
<Navbar />
|
||||
|
||||
<HeroSection />
|
||||
<ClientsSection />
|
||||
<FeaturesGeneral />
|
||||
|
|
@ -19,4 +19,5 @@ import FAQ from "../components/FAQ.astro";
|
|||
<TestimonialsSection />
|
||||
<PricingSection />
|
||||
<FAQ />
|
||||
<HeroSection2 />
|
||||
</MainLayout>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// https://docs.astro.build/en/guides/integrations-guide/sitemap/#usage
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
const robotsTxt = `
|
||||
|
|
|
|||
|
|
@ -8,5 +8,8 @@ export default {
|
|||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require("preline/plugin")],
|
||||
plugins: [
|
||||
require("preline/plugin"),
|
||||
require("@tailwindcss/forms")
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue