Merge pull request #221 from widgeter/main

Fill out contact page

src/components/ui/Form.astro

@@ -0,0 +1,86 @@
+---
+import { Form } from '~/types';
+
+const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props as Form;
+---
+
+<form>
+  {
+    inputs &&
+      inputs.map(
+        ({ type = 'text', name, label = '', autocomplete = 'on', placeholder = '' }) =>
+          name && (
+            <div class="mb-6">
+              {label && (
+                <label for={name} class="block text-sm font-medium">
+                  {label}
+                </label>
+              )}
+              <input
+                type={type}
+                name={name}
+                id={name}
+                autocomplete={autocomplete}
+                placeholder={placeholder}
+                class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
+              />
+            </div>
+          )
+      )
+  }
+
+  {
+    textarea && (
+      <div>
+        <label for="textarea" class="block text-sm font-medium">
+          {textarea.label}
+        </label>
+        <textarea
+          id="textarea"
+          name="textarea"
+          rows={textarea.rows ? textarea.rows : 4}
+          placeholder={textarea.placeholder}
+          class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
+        />
+      </div>
+    )
+  }
+
+  {
+    disclaimer && (
+      <div class="mt-3 flex items-start">
+        <div class="flex mt-0.5">
+          <input
+            id="disclaimer"
+            name="disclaimer"
+            type="checkbox"
+            class="cursor-pointer mt-1 py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
+          />
+        </div>
+        <div class="ml-3">
+          <label for="disclaimer" class="cursor-pointer select-none text-sm text-gray-600 dark:text-gray-400">
+            {disclaimer.label}
+          </label>
+        </div>
+      </div>
+    )
+  }
+
+  {
+    button && (
+      <div class="mt-10 grid">
+        <button type="submit" class="btn btn-primary cursor-pointer">
+          {button}
+        </button>
+      </div>
+    )
+  }
+
+  {
+    description && (
+      <div class="mt-3 text-center">
+        <p class="text-sm text-gray-600 dark:text-gray-400">{description}</p>
+      </div>
+    )
+  }
+</form>

src/components/widgets/Contact.astro

@@ -0,0 +1,40 @@
+---
+import FormContainer from '~/components/ui/Form.astro';
+import Headline from '~/components/ui/Headline.astro';
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+import { Contact } from '~/types';
+
+const {
+  title = await Astro.slots.render('title'),
+  subtitle = await Astro.slots.render('subtitle'),
+  tagline = await Astro.slots.render('tagline'),
+  inputs,
+  textarea,
+  disclaimer,
+  button,
+  description,
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render('bg'),
+} = Astro.props as Contact;
+---
+
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-screen-xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
+  <Headline title={title} subtitle={subtitle} tagline={tagline} />
+
+  {
+    inputs && (
+      <div class="flex flex-col max-w-xl mx-auto rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow p-4 sm:p-6 lg:p-8 w-full">
+        <FormContainer
+          inputs={inputs}
+          textarea={textarea}
+          disclaimer={disclaimer}
+          button={button}
+          description={description}
+        />
+      </div>
+    )
+  }
+</WidgetWrapper>

src/pages/contact.astro

@@ -1,11 +1,111 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
+import ContactUs from '~/components/widgets/Contact.astro';
+import FAQs from '~/components/widgets/FAQs.astro';
+import Features2 from '~/components/widgets/Features2.astro';
 
 const metadata = {
-  title: "Contact",
+  title: 'Contact',
 };
 ---
 
 <Layout metadata={metadata}>
-  Contact
+  <ContactUs
+    title="Drop us a message today!"
+    subtitle="For quicker answers, explore our FAQs section. You may find the solution you're looking  for right there! If not, our support team is delighted to help you."
+    inputs={[
+      {
+        type: 'text',
+        name: 'name',
+        label: 'Name',
+      },
+      {
+        type: 'email',
+        name: 'email',
+        label: 'Email',
+      },
+    ]}
+    textarea={{
+      label: 'Message',
+    }}
+    disclaimer={{
+      label:
+        'By submitting this contact form, you acknowledge and agree to the collection of your personal information.',
+    }}
+    description="Our support team typically responds within 24 business hours."
+  />
+
+  <!-- Features2 Widget ************** -->
+
+  <Features2
+    title="We are here to help!"
+    items={[
+      {
+        title: 'General support',
+        description: `Chat with us for inquiries related to account management, website navigation, payment issues, accessing purchased templates or general questions about the website's functionality.`,
+      },
+      {
+        title: 'Contact sales',
+        description:
+          'Chat with us for questions about purchases, customization options, licensing for commercial use, inquiries about specific template, etc.',
+      },
+      {
+        title: 'Technical support',
+        description:
+          'Chat with us when facing issues like template installation, problems editing difficulties, compatibility issues with software or download errors, or other technical challenges related to using the templates.',
+      },
+      {
+        title: 'Phone',
+        description: '+1 (234) 567-890',
+        icon: 'tabler:headset',
+      },
+      {
+        title: 'Email',
+        description: 'contact@support.com',
+        icon: 'tabler:mail',
+      },
+      {
+        title: 'Location',
+        description: '1234 Lorem Ipsum St, 12345, Miami, EEUU',
+        icon: 'tabler:map-pin',
+      },
+    ]}
+  />
+
+  <!-- FAQs Widget ******************* -->
+
+  <FAQs
+    title="Frequently Asked Questions"
+    items={[
+      {
+        title: 'Do you provide instructions on how to use and edit the templates?',
+        description:
+          'Absolutely! We understand the importance of providing clear guidance. Each template comes with comprehensive instructions on how to use and customize it effectively.',
+      },
+      {
+        title: 'How can I download the templates after purchasing?',
+        description:
+          "Downloading your purchased templates is a simple process. Once you've completed the purchase, you'll receive an email containing a link to your personal download area.",
+      },
+      {
+        title: 'Are updates included with the templates?',
+        description:
+          'Yes, we are committed to continually improving and enhancing our templates to ensure they meet the latest design standards and technological advancements.',
+      },
+      {
+        title: 'How often do you release new templates?',
+        description:
+          'The exact frequency of releases may vary, our team works diligently to introduce new templates every quarter, depending on design trends, industry developments, and customer demand.',
+      },
+      {
+        title: 'Can I request custom templates to be developed?',
+        description: `Absolutely, we offer a custom template development service to cater to your specific needs. If you have a particular design idea, concept, or functionality in mind, we'd be more than happy to discuss creating a custom template for you.`,
+      },
+      {
+        title: 'What payment methods do you accept?',
+        description:
+          'Currently, we accept major credit and debit cards, including Visa, MasterCard, American Express, and Discover. Additionally, we facilitate payments through trusted online payment platforms such as PayPal and Apple Pay.',
+      },
+    ]}
+  />
 </Layout>

src/pages/pricing.astro

@@ -105,7 +105,7 @@ const metadata = {
 
   <Features3
     title="Price-related features"
-    subtitle="To help you make informed decisions on the plans that best fit your budget and project requirements."
+    subtitle="Discover the advantages of choosing our plans"
     columns={3}
     items={[
       {
@@ -172,13 +172,9 @@ const metadata = {
         title: 'Confirmation',
         icon: 'tabler:number-6',
       },
-      {
-        title: 'Confirmation',
-        icon: 'tabler:number-7',
-      },
       {
         title: 'Download and start using the template(s)',
-        icon: 'tabler:number-8',
+        icon: 'tabler:number-7',
       },
     ]}
     image={{

src/types.d.ts

@@ -153,6 +153,24 @@ export interface Testimonial {
   image?: string | unknown;
 }
 
+export interface Input {
+  type: HTMLInputTypeAttribute;
+  name: string;
+  label?: string;
+  autocomplete?: string;
+  placeholder?: string;
+}
+
+export interface Textarea {
+  label?: string;
+  placeholder?: string;
+  rows?: number;
+}
+
+export interface Disclaimer {
+  label?: string;
+}
+
 // COMPONENTS
 export interface CallToAction {
   targetBlank?: boolean;
@@ -177,6 +195,14 @@ export interface Collapse {
   classes?: Record<string, string>;
 }
 
+export interface Form {
+  inputs?: Array<Input>;
+  textarea?: Textarea;
+  disclaimer?: Disclaimer;
+  button?: string;
+  description?: string;
+}
+
 // WIDGETS
 export interface Hero extends Headline, Widget {
   content?: string;
@@ -247,3 +273,5 @@ export interface Content extends Headline, Widget {
   isReversed?: boolean;
   isAfterContent?: boolean;
 }
+
+export interface Contact extends Headline, Form, Widget {}