Remove unused authentication components and settings
Due to design changes, removed old authentication components and related configuration settings in .idea and .vscode folders. Changes include elimination of subscription input, email input, login and register modals, and user interface blocks. All changes aim to clean up the codebase and eliminate unused or unnecessary code.
This commit is contained in:
Emil Gulamov
parent
829d87be7c
commit
443597b15d
36 changed files with 185 additions and 554 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -2,6 +2,8 @@
|
|||
dist/
|
||||
# generated types
|
||||
.astro/
|
||||
.idea/
|
||||
.vscode/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
|
|
|||
5
.idea/.gitignore
generated
vendored
5
.idea/.gitignore
generated
vendored
|
|
@ -1,5 +0,0 @@
|
|||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
12
.idea/ScrewFast.iml
generated
12
.idea/ScrewFast.iml
generated
|
|
@ -1,12 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
8
.idea/modules.xml
generated
8
.idea/modules.xml
generated
|
|
@ -1,8 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/ScrewFast.iml" filepath="$PROJECT_DIR$/.idea/ScrewFast.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/vcs.xml
generated
6
.idea/vcs.xml
generated
|
|
@ -1,6 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
4
.vscode/extensions.json
vendored
4
.vscode/extensions.json
vendored
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
11
.vscode/launch.json
vendored
11
.vscode/launch.json
vendored
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "./node_modules/.bin/astro dev",
|
||||
"name": "Development server",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
// Import the necessary dependencies from individual component files
|
||||
import LoginModal from "./ui/authentication/LoginModal.astro";
|
||||
import RegisterModal from "./ui/authentication/RegisterModal.astro";
|
||||
import RecoverModal from "./ui/authentication/RecoverModal.astro";
|
||||
import LoginModal from "./ui/forms/LoginModal.astro";
|
||||
import RegisterModal from "./ui/forms/RegisterModal.astro";
|
||||
import RecoverModal from "./ui/forms/RecoverModal.astro";
|
||||
import LoginBtn from "./ui/buttons/LoginBtn.astro";
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@ 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-balance text-xl font-semibold text-neutral-800 dark:text-neutral-200 md:text-2xl md:leading-tight"
|
||||
class="text-balance text-xl font-bold text-neutral-800 dark:text-neutral-200 md:text-2xl leading-tight"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<p class="text-pretty text-neutral-600 dark:text-neutral-400">
|
||||
<p class="text-pretty text-neutral-600 dark:text-neutral-400 leading-tight">
|
||||
{subTitle}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ const faqs = [
|
|||
];
|
||||
---
|
||||
|
||||
<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
|
||||
<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="grid gap-10 md:grid-cols-5">
|
||||
<div class="md:col-span-2">
|
||||
<div class="max-w-xs">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
// Import the necessary dependencies from individual component files
|
||||
import FooterSocialLink from "./ui/links/FooterSocialLink.astro";
|
||||
import EmailFooterInput from "./ui/authentication/input/EmailFooterInput.astro";
|
||||
import EmailFooterInput from "./ui/forms/input/EmailFooterInput.astro";
|
||||
|
||||
// Footer Section Names
|
||||
const sectionOne: string = "Product";
|
||||
|
|
@ -56,14 +56,11 @@ const company: Links[] = [
|
|||
---
|
||||
|
||||
<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-8 lg:pt-20">
|
||||
<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">
|
||||
<a
|
||||
class="flex-none rounded-lg text-xl font-semibold outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
|
||||
href="/"
|
||||
aria-label="Brand"
|
||||
>
|
||||
<!-- Brand Logo -->
|
||||
<svg class="h-auto w-32" viewBox="0 0 521 226" fill="none">
|
||||
<rect
|
||||
|
|
@ -118,11 +115,10 @@ const company: Links[] = [
|
|||
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>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-span-1">
|
||||
<h4 class="font-semibold text-neutral-800 dark:text-neutral-200">
|
||||
<h4 class="font-bold text-neutral-800 dark:text-neutral-200">
|
||||
{sectionOne}
|
||||
</h4>
|
||||
|
||||
|
|
@ -131,7 +127,7 @@ const company: Links[] = [
|
|||
product.map((item) => (
|
||||
<p>
|
||||
<a
|
||||
class="inline-flex gap-x-2 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"
|
||||
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}
|
||||
|
|
@ -143,7 +139,7 @@ const company: Links[] = [
|
|||
</div>
|
||||
|
||||
<div class="col-span-1">
|
||||
<h4 class="font-semibold text-neutral-800 dark:text-neutral-200">
|
||||
<h4 class="font-bold text-neutral-800 dark:text-neutral-200">
|
||||
{sectionTwo}
|
||||
</h4>
|
||||
|
||||
|
|
@ -152,7 +148,7 @@ const company: Links[] = [
|
|||
company.map((item, index) => (
|
||||
<p>
|
||||
<a
|
||||
class="inline-flex gap-x-2 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"
|
||||
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}
|
||||
|
|
@ -169,7 +165,7 @@ const company: Links[] = [
|
|||
</div>
|
||||
|
||||
<div class="col-span-2">
|
||||
<h4 class="font-semibold text-neutral-800 dark:text-neutral-200">
|
||||
<h4 class="font-bold text-neutral-800 dark:text-neutral-200">
|
||||
{sectionThree}
|
||||
</h4>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,15 +8,16 @@ import Avatar from "./ui/avatars/Avatar.astro";
|
|||
import FullStar from "./ui/stars/FullStar.astro";
|
||||
import HalfStar from "./ui/stars/HalfStar.astro";
|
||||
|
||||
/* `title` variable used to customise the main heading. */
|
||||
// Variables for customization of the HeroSection Component
|
||||
// Main heading
|
||||
const title:string = `Equip Your Projects with <span
|
||||
class="text-yellow-500 dark:text-yellow-400">ScrewFast</span>`;
|
||||
|
||||
/* `subTitle` variable used to customise the sub-heading text. */
|
||||
// Main heading
|
||||
const subTitle:string =
|
||||
"Top-quality hardware tools and expert construction services for every project need.";
|
||||
|
||||
/* `primaryBtn` and `primaryBtnURL` variables used to customise the text and target link of the primary button. */
|
||||
// Sub-heading text
|
||||
const primaryBtn:string = "Start Exploring";
|
||||
const primaryBtnURL:string = "/products";
|
||||
|
||||
|
|
@ -33,9 +34,6 @@ const starCount:number = 4;
|
|||
/* `reviews` variable used to customise the number of reviews. */
|
||||
const reviews:string = "12.8k";
|
||||
|
||||
/*
|
||||
In the above, the title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, rating, starCount, reviews, and imageSource attributes are variables part of the HeroSection component.
|
||||
*/
|
||||
---
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
// Import the necessary dependencies from individual component files
|
||||
import GithubBtn from "./ui/buttons/GithubBtn.astro";
|
||||
|
||||
// Variables for customization of the LoginModal Component
|
||||
// Variables for customization of the HeroSection2 Component
|
||||
// Main heading
|
||||
const title: string = "Let's Build Together";
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ 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 ogDescription: string = "Equip your projects with ScrewFast's top-quality hardware tools and expert construction services. Trusted by industry leaders, ScrewFast offers simplicity, affordability, and reliability. Experience the difference with user-centric design and cutting-edge tools. Start exploring now!"; // Replace with your site description for social media
|
||||
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
|
||||
---
|
||||
|
|
@ -19,7 +20,7 @@ const socialImage:string = "https://screw-fast.vercel.app/social.png"; // Replac
|
|||
}
|
||||
</script>
|
||||
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
content={description}
|
||||
name="description"
|
||||
|
|
@ -35,7 +36,7 @@ const socialImage:string = "https://screw-fast.vercel.app/social.png"; // Replac
|
|||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content={ogTitle}>
|
||||
<meta property="og:site_name" content={title}/>
|
||||
<meta property="og:description" content={description}>
|
||||
<meta property="og:description" content={ogDescription}>
|
||||
<meta property="og:image" content={socialImage}>
|
||||
<meta content="1200" property="og:image:width"/>
|
||||
<meta content="600" property="og:image:height"/>
|
||||
|
|
@ -46,7 +47,7 @@ const socialImage:string = "https://screw-fast.vercel.app/social.png"; // Replac
|
|||
<meta property="twitter:domain" content={URL}>
|
||||
<meta property="twitter:url" content={URL}>
|
||||
<meta name="twitter:title" content={ogTitle}>
|
||||
<meta name="twitter:description" content={description}>
|
||||
<meta name="twitter:description" content={ogDescription}>
|
||||
<meta name="twitter:image" content={socialImage}>
|
||||
|
||||
<link rel="manifest" href="/manifest.webmanifest" />
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import Authentication from "./Authentication.astro";
|
|||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<a
|
||||
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"
|
||||
class="flex-none text-xl outline-none rounded-lg font-bold dark:focus:outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200"
|
||||
href="/"
|
||||
aria-label="Brand"
|
||||
>
|
||||
|
|
@ -76,7 +76,7 @@ import Authentication from "./Authentication.astro";
|
|||
<div class="ml-auto mr-5 md:hidden">
|
||||
<button
|
||||
type="button"
|
||||
class="hs-collapse-toggle flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold text-neutral-600 transition duration-300 hover:bg-neutral-200 disabled:pointer-events-none disabled:opacity-50 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:outline-none"
|
||||
class="hs-collapse-toggle flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold text-neutral-600 transition duration-300 hover:bg-neutral-200 disabled:pointer-events-none disabled:opacity-50 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:outline-none"
|
||||
data-hs-collapse="#navbar-collapse-with-animation"
|
||||
aria-controls="navbar-collapse-with-animation"
|
||||
aria-label="Toggle navigation"
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ type Product = {
|
|||
const starterKit: Product = {
|
||||
name: "Starter Kit",
|
||||
description: "Best option for DIY projects",
|
||||
price: "$29",
|
||||
price: "$49",
|
||||
cents: ".00",
|
||||
billingFrequency: "USD / monthly",
|
||||
features: [
|
||||
|
|
@ -40,7 +40,7 @@ const starterKit: Product = {
|
|||
const professionalToolbox: Product = {
|
||||
name: "Professional Toolbox",
|
||||
description: "Best for large scale uses",
|
||||
price: "$49",
|
||||
price: "$89",
|
||||
cents: ".00",
|
||||
billingFrequency: "USD / monthly",
|
||||
features: [
|
||||
|
|
@ -75,7 +75,7 @@ const professionalToolbox: Product = {
|
|||
class="w-full rounded-xl bg-gray-800 p-6 sm:w-1/2 sm:rounded-r-none sm:p-8 lg:w-1/3"
|
||||
>
|
||||
<div class="mb-4">
|
||||
<h3 class="text-2xl font-semibold text-neutral-100 sm:text-3xl">
|
||||
<h3 class="text-2xl font-bold text-neutral-100 sm:text-3xl">
|
||||
{starterKit.name}
|
||||
</h3>
|
||||
<p class="text-indigo-300">{starterKit.description}</p>
|
||||
|
|
@ -117,7 +117,7 @@ const professionalToolbox: Product = {
|
|||
<!-- CTA for purchasing the product -->
|
||||
<a
|
||||
href={starterKit.purchaseLink}
|
||||
class="block rounded-lg bg-gray-500 px-8 py-3 text-center text-sm font-semibold text-gray-100 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-600 focus-visible:ring active:text-gray-300 md:text-base"
|
||||
class="block rounded-lg bg-gray-500 px-8 py-3 text-center text-sm font-bold text-gray-100 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-600 focus-visible:ring active:text-gray-300 md:text-base"
|
||||
>{starterKit.purchaseBtnTitle}</a
|
||||
>
|
||||
</div>
|
||||
|
|
@ -129,14 +129,14 @@ const professionalToolbox: Product = {
|
|||
class="mb-4 flex flex-col items-start justify-between gap-4 lg:flex-row"
|
||||
>
|
||||
<div>
|
||||
<h3 class="text-2xl font-semibold text-neutral-100 sm:text-3xl">
|
||||
<h3 class="text-2xl font-bold text-neutral-100 sm:text-3xl">
|
||||
{professionalToolbox.name}
|
||||
</h3>
|
||||
<p class="text-orange-200">{professionalToolbox.description}</p>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="order-first inline-block rounded-full bg-orange-200 bg-opacity-50 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-orange-600 lg:order-none"
|
||||
class="order-first inline-block rounded-full bg-orange-200 bg-opacity-50 px-3 py-1 text-xs font-bold uppercase tracking-wider text-orange-600 lg:order-none"
|
||||
>Best value</span
|
||||
>
|
||||
</div>
|
||||
|
|
@ -177,7 +177,7 @@ const professionalToolbox: Product = {
|
|||
<!-- CTA for purchasing the product -->
|
||||
<a
|
||||
href={professionalToolbox.purchaseLink}
|
||||
class="block rounded-lg bg-orange-200 bg-opacity-50 px-8 py-3 text-center text-sm font-semibold text-neutral-100 outline-none ring-orange-300 transition duration-100 hover:bg-orange-300 hover:bg-opacity-50 focus-visible:ring active:bg-orange-400 md:text-base"
|
||||
class="block rounded-lg bg-orange-200 bg-opacity-50 px-8 py-3 text-center text-sm font-bold text-neutral-100 outline-none ring-orange-300 transition duration-100 hover:bg-orange-300 hover:bg-opacity-50 focus-visible:ring active:bg-orange-400 md:text-base"
|
||||
>{professionalToolbox.purchaseBtnTitle}</a
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ const statistics: StatProps[] = [
|
|||
];
|
||||
---
|
||||
|
||||
<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
|
||||
<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="lg:grid lg:grid-cols-12 lg:items-center lg:justify-between lg:gap-16"
|
||||
>
|
||||
|
|
@ -106,7 +106,7 @@ const statistics: StatProps[] = [
|
|||
/>
|
||||
</div>
|
||||
<div class="ms-4 grow">
|
||||
<div class="font-semibold text-neutral-800 dark:text-neutral-200">
|
||||
<div class="font-bold text-neutral-800 dark:text-neutral-200">
|
||||
{testimonial.author}
|
||||
</div>
|
||||
<div class="text-xs text-neutral-500">{testimonial.role}</div>
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
---
|
||||
// Import the necessary dependencies from individual component files
|
||||
import GoogleBtn from "../buttons/GoogleBtn.astro";
|
||||
import AuthBtn from "../buttons/AuthBtn.astro";
|
||||
import EmailInput from "./input/EmailInput.astro";
|
||||
import PasswordInput from "./input/PasswordInput.astro";
|
||||
import Checkbox from "./input/Checkbox.astro";
|
||||
|
||||
// Variables for customization of the LoginModal Component
|
||||
// Modal identifier
|
||||
const id = "hs-toggle-between-modals-login-modal";
|
||||
|
||||
// Main heading
|
||||
const title: string = "Sign in";
|
||||
|
||||
// Sub-heading text
|
||||
const subTitle: string = "Don't have an account yet?";
|
||||
|
||||
// Text for registration button
|
||||
const registerBtn: string = "Sign up here";
|
||||
|
||||
// Target link for registration button
|
||||
const registerBtnDataHS: string = "#hs-toggle-between-modals-register-modal";
|
||||
---
|
||||
|
||||
<div
|
||||
id={id}
|
||||
class="hs-overlay hs-overlay-backdrop-open:bg-neutral-900/90 absolute start-0 top-0 z-50 hidden h-full w-full"
|
||||
>
|
||||
<div
|
||||
class="m-3 mt-0 opacity-0 transition-all ease-out hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 sm:mx-auto sm:w-full sm:max-w-lg"
|
||||
>
|
||||
<div class="mx-auto w-full max-w-md p-6">
|
||||
<div
|
||||
class="mt-7 rounded-xl border border-neutral-200 bg-neutral-100 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
|
||||
>
|
||||
<div class="p-4 sm:p-7">
|
||||
<div class="text-center">
|
||||
<h1
|
||||
class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{subTitle}
|
||||
<button
|
||||
class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
|
||||
data-hs-overlay={registerBtnDataHS}
|
||||
>
|
||||
{registerBtn}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<GoogleBtn title="Sign in with Google" />
|
||||
|
||||
<div
|
||||
class="flex items-center py-3 text-xs uppercase text-neutral-400 before:me-6 before:flex-[1_1_0%] before:border-t before:border-neutral-200 after:ms-6 after:flex-[1_1_0%] after:border-t after:border-neutral-200 dark:text-neutral-500 dark:before:border-neutral-600 dark:after:border-neutral-600"
|
||||
>
|
||||
Or
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<div class="grid gap-y-4">
|
||||
<EmailInput />
|
||||
|
||||
<PasswordInput
|
||||
forgot={true}
|
||||
id="password-error"
|
||||
content="8+ characters required"
|
||||
/>
|
||||
|
||||
<Checkbox id="remember-me" />
|
||||
|
||||
<AuthBtn title="Sign in" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
---
|
||||
// Import the necessary dependencies from individual component files
|
||||
import AuthBtn from "../buttons/AuthBtn.astro";
|
||||
import EmailInput from "./input/EmailInput.astro";
|
||||
|
||||
// Variables to customize the RecoverModal Component
|
||||
|
||||
// Modal identifier
|
||||
const id = "hs-toggle-between-modals-recover-modal";
|
||||
|
||||
// Main heading
|
||||
const title: string = "Forgot password?";
|
||||
|
||||
// Sub-heading text
|
||||
const subTitle: string = "Remember your password?";
|
||||
|
||||
// Text and target link for the login button
|
||||
const loginBtn: string = "Sign in here";
|
||||
const loginBtnDataHS: string = "#hs-toggle-between-modals-login-modal";
|
||||
---
|
||||
|
||||
<div
|
||||
id={id}
|
||||
class="hs-overlay absolute start-0 top-0 z-50 hidden h-full w-full hs-overlay-backdrop-open:bg-neutral-900/90"
|
||||
>
|
||||
<div
|
||||
class="m-3 mt-0 opacity-0 transition-all ease-out hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 sm:mx-auto sm:w-full sm:max-w-lg"
|
||||
>
|
||||
<div class="mx-auto w-full max-w-md p-6">
|
||||
<div
|
||||
class="mt-7 rounded-xl border border-neutral-200 bg-neutral-100 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
|
||||
>
|
||||
<div class="p-4 sm:p-7">
|
||||
<div class="text-center">
|
||||
<h1
|
||||
class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{subTitle}
|
||||
<button
|
||||
class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
|
||||
data-hs-overlay={loginBtnDataHS}
|
||||
>
|
||||
{loginBtn}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<!-- Form -->
|
||||
<form>
|
||||
<div class="grid gap-y-4">
|
||||
<EmailInput />
|
||||
<AuthBtn title="Reset password" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
---
|
||||
// Import the necessary dependencies from individual component files
|
||||
import GoogleBtn from "../buttons/GoogleBtn.astro";
|
||||
import AuthBtn from "../buttons/AuthBtn.astro";
|
||||
import EmailInput from "./input/EmailInput.astro";
|
||||
import PasswordInput from "./input/PasswordInput.astro";
|
||||
import Checkbox from "./input/Checkbox.astro";
|
||||
|
||||
// Variables to customize the RegisterModal Component
|
||||
|
||||
// Modal identifier
|
||||
const id = "hs-toggle-between-modals-register-modal";
|
||||
|
||||
// Main title
|
||||
const title: string = "Sign up";
|
||||
|
||||
// Subtitle text
|
||||
const subTitle: string = "Already have an account?";
|
||||
|
||||
// Text and target link for the login button
|
||||
const loginBtn: string = "Sign in here";
|
||||
const loginBtnDataHS: string = "#hs-toggle-between-modals-login-modal";
|
||||
---
|
||||
|
||||
<div
|
||||
id={id}
|
||||
class="hs-overlay hs-overlay-backdrop-open:bg-neutral-900/90 absolute start-0 top-0 z-50 hidden h-full w-full"
|
||||
>
|
||||
<div
|
||||
class="m-3 mt-0 opacity-0 transition-all ease-out hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 sm:mx-auto sm:w-full sm:max-w-lg"
|
||||
>
|
||||
<div class="mx-auto w-full max-w-md p-6">
|
||||
<div
|
||||
class="mt-7 max-h-full overflow-hidden rounded-xl border border-neutral-200 bg-neutral-100 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
|
||||
>
|
||||
<div class="p-4 sm:p-7">
|
||||
<div class="text-center">
|
||||
<h1
|
||||
class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{subTitle}
|
||||
<button
|
||||
class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
|
||||
data-hs-overlay={loginBtnDataHS}
|
||||
>
|
||||
{loginBtn}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<GoogleBtn title="Sign up with Google" />
|
||||
|
||||
<div
|
||||
class="flex items-center py-3 text-xs uppercase text-neutral-400 before:me-6 before:flex-[1_1_0%] before:border-t before:border-neutral-200 after:ms-6 after:flex-[1_1_0%] after:border-t after:border-neutral-200 dark:text-neutral-500 dark:before:border-neutral-600 dark:after:border-neutral-600"
|
||||
>
|
||||
Or
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<div class="grid gap-y-4">
|
||||
<EmailInput />
|
||||
<PasswordInput
|
||||
id="password-error"
|
||||
content="8+ characters required"
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Confirm Password"
|
||||
id="confirm-password-error"
|
||||
aria="confirm-password-error"
|
||||
content="Password does not match the password"
|
||||
/>
|
||||
|
||||
<Checkbox label="I accept the " , id="terms-agree">
|
||||
<a
|
||||
class="font-medium text-[#fa5a15] decoration-2 hover:underline dark:text-[#fa5a15] dark:focus:outline-none"
|
||||
href="#">Terms and Conditions</a
|
||||
>
|
||||
</Checkbox>
|
||||
|
||||
<AuthBtn title="Sign up" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
const { label = "Remember me", id } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
label?: string;
|
||||
id?: string;
|
||||
}
|
||||
---
|
||||
<div class="flex items-center">
|
||||
<div class="flex">
|
||||
<input id={id} name="remember-me" type="checkbox" class="shrink-0 mt-0.5 border-neutral-200 rounded text-neutral-600 pointer-events-none focus:ring-yellow-400 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-yellow-400 dark:checked:border-yellow-400 dark:focus:ring-offset-neutral-800">
|
||||
</div>
|
||||
<div class="ms-3">
|
||||
<label for={id} class="text-sm text-neutral-800 dark:text-neutral-200">{label} <slot /> </label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
---
|
||||
const { label = "Search", title = "Subscribe" } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
label?: string;
|
||||
title?: string;
|
||||
}
|
||||
---
|
||||
|
||||
<div
|
||||
class="mt-4 flex flex-col items-center gap-2 rounded-lg bg-neutral-200 p-2 dark:bg-neutral-800 sm:flex-row sm:gap-3"
|
||||
>
|
||||
<div class="w-full">
|
||||
<label for="hero-input" class="sr-only">{label}</label>
|
||||
<input
|
||||
type="text"
|
||||
id="hero-input"
|
||||
name="hero-input"
|
||||
class="block w-full rounded-lg border-transparent bg-neutral-100 px-4 py-3 text-sm text-neutral-600 focus:border-[#fa5a15] focus:ring-[#fa5a15] disabled:pointer-events-none disabled:opacity-50 dark:border-transparent dark:bg-neutral-700 dark:text-gray-300"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
class="inline-flex w-full items-center justify-center gap-x-2 whitespace-nowrap rounded-lg border border-transparent bg-[#fa5a15] p-3 text-sm font-semibold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-[#e14d0b] focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 sm:w-auto"
|
||||
href="#"
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
---
|
||||
const { label = "Email address" } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
label?: string;
|
||||
}
|
||||
---
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="email"
|
||||
class="mb-2 block text-sm text-neutral-800 dark:text-neutral-200"
|
||||
>{label}</label
|
||||
>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
class="block w-full rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm focus:outline-none focus:ring focus:ring-neutral-400 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-700/30 dark:focus:ring-1 dark:text-neutral-400"
|
||||
required
|
||||
aria-describedby="email-error"
|
||||
/>
|
||||
<div class="pointer-events-none absolute inset-y-0 end-0 hidden pe-3">
|
||||
<svg
|
||||
class="h-5 w-5 text-red-500"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-2 hidden text-xs text-red-600" id="email-error">
|
||||
Please include a valid email address so we can get back to you
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
---
|
||||
const {
|
||||
label = "Password",
|
||||
forgot,
|
||||
id,
|
||||
content,
|
||||
aria = "password-error",
|
||||
} = Astro.props;
|
||||
|
||||
interface Props {
|
||||
label?: string;
|
||||
forgot?: boolean;
|
||||
id?: string;
|
||||
content?: string;
|
||||
aria?: string;
|
||||
}
|
||||
---
|
||||
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<label
|
||||
for="password"
|
||||
class="mb-2 block text-sm text-neutral-800 dark:text-neutral-200"
|
||||
>{label}</label
|
||||
>
|
||||
{
|
||||
forgot ? (
|
||||
<button
|
||||
class="text-sm font-medium text-[#fa5a15] decoration-2 hover:underline dark:text-[#fa5a15] dark:focus:outline-none dark:focus:ring-1 focus-visible:ring outline-none ring-zinc-500 dark:ring-zinc-200"
|
||||
data-hs-overlay="#hs-toggle-between-modals-recover-modal"
|
||||
>
|
||||
Forgot password?
|
||||
</button>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
class="block w-full rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm focus:outline-none focus:ring focus:ring-neutral-400 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-700/30 dark:focus:ring-1 dark:text-neutral-400"
|
||||
required
|
||||
aria-describedby={aria}
|
||||
/>
|
||||
<div class="pointer-events-none absolute inset-y-0 end-0 hidden pe-3">
|
||||
<svg
|
||||
class="h-5 w-5 text-red-500"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-2 hidden text-xs text-red-600" id={id}>
|
||||
{content}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -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 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"
|
||||
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-bold 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}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ interface Props {
|
|||
<slot />
|
||||
<div class="grow">
|
||||
<h3
|
||||
class="text-balance text-lg font-semibold text-gray-800 dark:text-neutral-200"
|
||||
class="text-balance text-lg font-bold text-gray-800 dark:text-neutral-200"
|
||||
>
|
||||
{heading}
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ Example:
|
|||
<slot />
|
||||
<span class="ms-6 grow">
|
||||
<span
|
||||
class="block text-lg font-semibold text-neutral-800 hs-tab-active:text-[#fa5a15] dark:text-neutral-200 dark:hs-tab-active:text-[#fb713b]"
|
||||
class="block text-lg font-bold text-neutral-800 hs-tab-active:text-[#fa5a15] dark:text-neutral-200 dark:hs-tab-active:text-[#fb713b]"
|
||||
>{heading}</span
|
||||
>
|
||||
<span
|
||||
|
|
|
|||
|
|
@ -8,6 +8,6 @@ interface Props {
|
|||
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex w-full items-center justify-center gap-x-2 rounded-lg border border-transparent bg-yellow-400 px-4 py-3 text-sm font-semibold text-neutral-700 hover:bg-yellow-500 disabled:pointer-events-none disabled:opacity-50 dark:focus:outline-none 2xl:text-base focus-visible:ring outline-none ring-zinc-500 dark:ring-zinc-200 transition duration-300"
|
||||
class="inline-flex w-full items-center justify-center gap-x-2 rounded-lg border border-transparent bg-yellow-400 px-4 py-3 text-sm font-bold text-neutral-700 hover:bg-yellow-500 disabled:pointer-events-none disabled:opacity-50 dark:focus:outline-none 2xl:text-base focus-visible:ring outline-none ring-zinc-500 dark:ring-zinc-200 transition duration-300"
|
||||
>{title}</button
|
||||
>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ interface Props {
|
|||
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-x-2 font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] focus-visible:ring dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none md:my-6 md:border-s md:border-neutral-300 md:ps-6 2xl:text-base"
|
||||
class="flex items-center gap-x-2 text-base md:text-sm font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] focus-visible:ring dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none md:my-6 md:border-s md:border-neutral-300 md:ps-6 2xl:text-base"
|
||||
data-hs-overlay="#hs-toggle-between-modals-login-modal"
|
||||
>
|
||||
<svg
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ interface Props {
|
|||
---
|
||||
|
||||
<a
|
||||
class="inline-flex h-10 w-10 items-center justify-center gap-x-2 rounded-lg border border-transparent text-sm font-semibold text-neutral-700 outline-none ring-zinc-500 hover:bg-neutral-500/10 focus:outline-none focus:ring-1 focus:ring-zinc-500 focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:hover:bg-neutral-50/10 dark:focus:outline-none"
|
||||
class="inline-flex h-10 w-10 items-center justify-center gap-x-2 rounded-lg border border-transparent text-sm font-bold text-neutral-700 outline-none ring-zinc-500 hover:bg-neutral-500/10 focus:outline-none focus:ring-1 focus:ring-zinc-500 focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:hover:bg-neutral-50/10 dark:focus:outline-none"
|
||||
href={url}
|
||||
target="_blank"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ If URL is '/' (home page), assign ID as 'home'
|
|||
<a
|
||||
id={url === "/" ? "home" : url.split("/")[1]}
|
||||
href={url}
|
||||
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"
|
||||
class="rounded-lg text-base 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 md:text-sm 2xl:text-base"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
|
@ -34,7 +34,7 @@ If URL is '/' (home page), assign ID as 'home'
|
|||
"hover:text-neutral-500",
|
||||
"dark:hover:text-neutral-500",
|
||||
);
|
||||
nav.classList.add("text-[#fa5a15]", "dark:text-[#fa5a15]");
|
||||
nav.classList.add("text-[#fa5a15]", "dark:text-[#fb713b]");
|
||||
nav.setAttribute("aria-current", "page");
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,13 +12,10 @@ interface Props {
|
|||
|
||||
<html lang="en" class="scrollbar-hide">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>{title}</title>
|
||||
<Meta />
|
||||
<title>{title}</title>
|
||||
<script is:inline>
|
||||
// This script is to handle theme according to user preference or system setting
|
||||
// This script is to handle theme according to user preference
|
||||
if (
|
||||
localStorage.getItem("hs_theme") === "dark" ||
|
||||
(!("hs_theme" in localStorage) &&
|
||||
|
|
@ -71,14 +68,13 @@ interface Props {
|
|||
<script is:inline src="/assets/vendor/lenis/lenis.js"></script>
|
||||
<script is:inline>
|
||||
// This script is to handle lenis library settings and behaviors, like the smooth scrolling
|
||||
const lenis = new Lenis();
|
||||
lenis.on("scroll", (e) => {
|
||||
console.log(e);
|
||||
});
|
||||
const lenis = new Lenis({ smooth: true, smoothTouch: false });
|
||||
|
||||
function raf(time) {
|
||||
lenis.raf(time);
|
||||
requestAnimationFrame(raf);
|
||||
}
|
||||
|
||||
requestAnimationFrame(raf);
|
||||
</script>
|
||||
<script is:inline src="/assets/vendor/preline/preline.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
// Import section components
|
||||
import MainLayout from "../layouts/MainLayout.astro";
|
||||
import Navbar from "../components/Navbar.astro";
|
||||
|
||||
import ContactSection from "../components/ContactSection.astro";
|
||||
---
|
||||
|
||||
<MainLayout>
|
||||
<Navbar />
|
||||
|
||||
<ContactSection />
|
||||
</MainLayout>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
// Import section components
|
||||
import MainLayout from "../layouts/MainLayout.astro";
|
||||
import HeroSection from "../components/HeroSection.astro";
|
||||
import HeroSection2 from "../components/HeroSection2.astro";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
---
|
||||
// Import section components
|
||||
import MainLayout from "../layouts/MainLayout.astro";
|
||||
import MainSection from "../components/ui/blocks/MainSection.astro";
|
||||
import LeftSection from "../components/ui/blocks/LeftSection.astro";
|
||||
import RightSection from "../components/ui/blocks/RightSection.astro";
|
||||
import FeaturesStats from "../components/FeaturesStats.astro";
|
||||
|
||||
import blueprints from "../images/blueprints-image.avif";
|
||||
import personWorking from "../images/person-working.avif";
|
||||
import beforeAfter from "../images/before-after.avif";
|
||||
import constructionWorkers from "../images/construction-workers.avif";
|
||||
import aerialView from "../images/aerial-view.avif";
|
||||
import usingTools from "../images/using-tools.avif";
|
||||
import progressBuilding from "../images/progress-building.avif";
|
||||
import underConstruction from "../images/under-construction.avif";
|
||||
---
|
||||
|
||||
<MainLayout>
|
||||
<MainSection
|
||||
title="Uniting Expertise with Your Vision"
|
||||
subTitle="At ScrewFast, we take pride in providing comprehensive solutions and exceptional service in the hardware and construction industry. Our experienced team is dedicated to supporting your project from inception to completion with a range of specialized services."
|
||||
btn={true}
|
||||
btnTitle="Schedule a Consultation"
|
||||
btnURL="#"
|
||||
/>
|
||||
|
||||
<RightSection
|
||||
title="Delivering Expert Guidance"
|
||||
subTitle="Embarking on a construction project can be overwhelming. With our professional consultation services, we guide you through every stage, ensuring you make informed decisions. Whether you are a DIY enthusiast or a skilled contractor, our experts are on hand to offer tailored advice on product selection, project scope, and compliance with local regulations."
|
||||
imgOne={blueprints}
|
||||
imgOneAlt={"Blueprints and digital tablet with construction plans."}
|
||||
imgTwo={personWorking}
|
||||
imgTwoAlt={"Person working in the office"}
|
||||
/>
|
||||
<LeftSection
|
||||
title="Transforming Designs into Reality"
|
||||
subTitle="Our skilled craftsmen bring precision and excellence to every construction project. From minor installations to substantial structural work, ScrewFast offers reliable construction services to turn your plans into tangible outcomes. We ensure the highest standards of safety and workmanship, utilizing top-quality tools and materials from our extensive inventory."
|
||||
btn={true}
|
||||
btnTitle="Learn More"
|
||||
btnURL="#"
|
||||
img={beforeAfter}
|
||||
imgAlt={"Construction site before and after"}
|
||||
/>
|
||||
<RightSection
|
||||
title="Navigating Projects with Professional Oversight"
|
||||
subTitle="Effective project management is at the heart of any successful build. ScrewFast provides thorough planning and robust management services that keep your project on time and within budget. Let us handle the complexities of workflow coordination, resource allocation, and stakeholder communication while you focus on your vision."
|
||||
imgOne={constructionWorkers}
|
||||
imgOneAlt={"Construction workers orchestrating a project"}
|
||||
imgTwo={aerialView}
|
||||
imgTwoAlt={"Aerial view of managed construction"}
|
||||
/>
|
||||
<LeftSection
|
||||
title="Ensuring Long-lasting Performance"
|
||||
subTitle="Our commitment to your project doesn't end at completion. ScrewFast offers ongoing maintenance and support services to ensure your construction's longevity and performance. From regular check-ups to emergency assistance, our responsive team is there to provide seamless support."
|
||||
img={usingTools}
|
||||
imgAlt={"Man in orange and black vest wearing white helmet holding yellow and black power tool"}
|
||||
/>
|
||||
<RightSection
|
||||
title="Crafting Bespoke Strategies for Unique Challenges"
|
||||
subTitle="For our larger enterprise clients, ScrewFast offers custom solutions designed to meet specific industry challenges. By understanding your unique needs, we engineer tailored strategies aimed at optimizing your operations, enhancing efficiency, and driving your business forward."
|
||||
btn={true}
|
||||
btnTitle="Read more"
|
||||
btnURL="#"
|
||||
imgOne={progressBuilding}
|
||||
imgOneAlt={"In progress building structure"}
|
||||
imgTwo={underConstruction}
|
||||
imgTwoAlt={"Brown and gray building under construction"}
|
||||
/>
|
||||
|
||||
<FeaturesStats
|
||||
title="By the Numbers"
|
||||
subTitle="Our commitment to quality and reliability is evident in every project we undertake. At ScrewFast, we are dedicated to delivering industry-leading services that ensure your construction projects are built to last."
|
||||
/>
|
||||
</MainLayout>
|
||||
Loading…
Add table
Reference in a new issue