From b8097da9abbda6bd6c0f88e0dd4100f8dcfee679 Mon Sep 17 00:00:00 2001 From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com> Date: Wed, 14 Feb 2024 05:48:53 +0400 Subject: [PATCH] Add ContactIconBlock and revamp contact form Implemented a new ContactIconBlock in the UI, including its Astro file and related props. Also added various form input components including EmailContactInput, PhoneInput, and PasswordInput for a more comprehensive contact section. Updated ContactSection with the new input fields and improved structure for better user experience and functionality. --- src/components/ContactSection.astro | 177 ++++++++++++++++++ .../ui/blocks/ContactIconBlock.astro | 63 +++++++ src/components/ui/forms/LoginModal.astro | 85 +++++++++ src/components/ui/forms/RecoverModal.astro | 64 +++++++ src/components/ui/forms/RegisterModal.astro | 96 ++++++++++ .../ui/forms/input/EmailContactInput.astro | 20 ++ .../ui/forms/input/EmailFooterInput.astro | 30 +++ .../ui/forms/input/EmailInput.astro | 44 +++++ .../ui/forms/input/PasswordInput.astro | 68 +++++++ .../ui/forms/input/PhoneInput.astro | 19 ++ .../ui/forms/input/TextAreaInput.astro | 19 ++ src/components/ui/forms/input/TextInput.astro | 20 ++ 12 files changed, 705 insertions(+) create mode 100644 src/components/ContactSection.astro create mode 100644 src/components/ui/blocks/ContactIconBlock.astro create mode 100644 src/components/ui/forms/LoginModal.astro create mode 100644 src/components/ui/forms/RecoverModal.astro create mode 100644 src/components/ui/forms/RegisterModal.astro create mode 100644 src/components/ui/forms/input/EmailContactInput.astro create mode 100644 src/components/ui/forms/input/EmailFooterInput.astro create mode 100644 src/components/ui/forms/input/EmailInput.astro create mode 100644 src/components/ui/forms/input/PasswordInput.astro create mode 100644 src/components/ui/forms/input/PhoneInput.astro create mode 100644 src/components/ui/forms/input/TextAreaInput.astro create mode 100644 src/components/ui/forms/input/TextInput.astro diff --git a/src/components/ContactSection.astro b/src/components/ContactSection.astro new file mode 100644 index 0000000..3662a87 --- /dev/null +++ b/src/components/ContactSection.astro @@ -0,0 +1,177 @@ +--- +// Import the necessary dependencies from individual component files +import AuthBtn from "./ui/buttons/AuthBtn.astro"; +import ContactIconBlock from "./ui/blocks/ContactIconBlock.astro"; +import TextInput from "./ui/forms/input/TextInput.astro"; +import EmailContactInput from "./ui/forms/input/EmailContactInput.astro"; +import PhoneInput from "./ui/forms/input/PhoneInput.astro"; +import TextAreaInput from "./ui/forms/input/TextAreaInput.astro"; + +// Variables for customization of the HeroSection2 Component +// Main heading +const title: string = "Contact us"; + +// Sub-heading text +const subTitle: string = + "Have questions or want to discuss a project? Reach out, and let's craft the perfect solution with our tools and services."; + +// Form heading text +const formTitle: string = "Fill in the form below"; + +// Form sub-heading text +const formSubTitle: string = "We'll get back to you in 1-2 business days."; +--- + + +
+
+
+

+ {title} +

+

+ {subTitle} +

+
+ +
+ +
+

+ {formTitle} +

+ +
+
+
+ + +
+ + + +
+ +
+ +
+ +
+

+ {formSubTitle} +

+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + +
+
+
+
+ diff --git a/src/components/ui/blocks/ContactIconBlock.astro b/src/components/ui/blocks/ContactIconBlock.astro new file mode 100644 index 0000000..897b70f --- /dev/null +++ b/src/components/ui/blocks/ContactIconBlock.astro @@ -0,0 +1,63 @@ +--- +const { + heading, + content, + address, + addressContent, + link, + linkTitle, + linkURL, + arrow, +} = Astro.props; + +interface Props { + heading?: string; + content?: string; + address?: boolean; + addressContent?: string; + link?: boolean; + linkTitle?: string; + linkURL?: string; + arrow?: boolean; +} +--- + +
+ +
+

+ {heading} +

+

{content}

+ { + address ? ( +

{addressContent}

+ ) : null + } + { + link ? ( + + {linkTitle} + {arrow ? ( + + + + ) : null} + + ) : null + } +
+
diff --git a/src/components/ui/forms/LoginModal.astro b/src/components/ui/forms/LoginModal.astro new file mode 100644 index 0000000..1f7fd95 --- /dev/null +++ b/src/components/ui/forms/LoginModal.astro @@ -0,0 +1,85 @@ +--- +// 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"; +--- + + diff --git a/src/components/ui/forms/RecoverModal.astro b/src/components/ui/forms/RecoverModal.astro new file mode 100644 index 0000000..2dab861 --- /dev/null +++ b/src/components/ui/forms/RecoverModal.astro @@ -0,0 +1,64 @@ +--- +// 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"; +--- + + diff --git a/src/components/ui/forms/RegisterModal.astro b/src/components/ui/forms/RegisterModal.astro new file mode 100644 index 0000000..e4b800e --- /dev/null +++ b/src/components/ui/forms/RegisterModal.astro @@ -0,0 +1,96 @@ +--- +// 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"; +--- + + diff --git a/src/components/ui/forms/input/EmailContactInput.astro b/src/components/ui/forms/input/EmailContactInput.astro new file mode 100644 index 0000000..a790fa1 --- /dev/null +++ b/src/components/ui/forms/input/EmailContactInput.astro @@ -0,0 +1,20 @@ +--- +const { label = "Email", id } = Astro.props; + +interface Props { + label?: string; + id: string; +} +--- + +
+ + +
diff --git a/src/components/ui/forms/input/EmailFooterInput.astro b/src/components/ui/forms/input/EmailFooterInput.astro new file mode 100644 index 0000000..b5c9735 --- /dev/null +++ b/src/components/ui/forms/input/EmailFooterInput.astro @@ -0,0 +1,30 @@ +--- +const { label = "Search", title = "Subscribe", id = "footer-input" } = Astro.props; + +interface Props { + label?: string; + title?: string; + id?: string; +} +--- + +
+
+ + +
+ + {title} + +
diff --git a/src/components/ui/forms/input/EmailInput.astro b/src/components/ui/forms/input/EmailInput.astro new file mode 100644 index 0000000..302fc97 --- /dev/null +++ b/src/components/ui/forms/input/EmailInput.astro @@ -0,0 +1,44 @@ +--- +const { label = "Email address", id } = Astro.props; + +interface Props { + label?: string; + id: string; +} +--- + +
+ +
+ + +
+ +
diff --git a/src/components/ui/forms/input/PasswordInput.astro b/src/components/ui/forms/input/PasswordInput.astro new file mode 100644 index 0000000..0e9f3b3 --- /dev/null +++ b/src/components/ui/forms/input/PasswordInput.astro @@ -0,0 +1,68 @@ +--- +const { + label = "Password", + forgot, + id, + errorId, + content, + aria = "password-error", +} = Astro.props; + +interface Props { + label?: string; + forgot?: boolean; + id?: string; + errorId?: string; + content?: string; + aria?: string; +} +--- + +
+
+ + { + forgot ? ( + + ) : ( + "" + ) + } +
+
+ + +
+ +
diff --git a/src/components/ui/forms/input/PhoneInput.astro b/src/components/ui/forms/input/PhoneInput.astro new file mode 100644 index 0000000..be43bd3 --- /dev/null +++ b/src/components/ui/forms/input/PhoneInput.astro @@ -0,0 +1,19 @@ +--- +const { label = "Phone Number", id } = Astro.props; + +interface Props { + label?: string; + id: string; +} +--- + +
+ + +
diff --git a/src/components/ui/forms/input/TextAreaInput.astro b/src/components/ui/forms/input/TextAreaInput.astro new file mode 100644 index 0000000..3f391d3 --- /dev/null +++ b/src/components/ui/forms/input/TextAreaInput.astro @@ -0,0 +1,19 @@ +--- +const { label, id, name } = Astro.props; + +interface Props { + label: string; + name: string; + id: string; +} +--- + +
+ + +
\ No newline at end of file diff --git a/src/components/ui/forms/input/TextInput.astro b/src/components/ui/forms/input/TextInput.astro new file mode 100644 index 0000000..4013749 --- /dev/null +++ b/src/components/ui/forms/input/TextInput.astro @@ -0,0 +1,20 @@ +--- +const { label, id, name } = Astro.props; + +interface Props { + label: string; + name: string; + id: string; +} +--- + +
+ + +