website/website/resources/ts/Pages/Marketing/Contact.vue

<script lang="ts" setup>
import { useForm } from '@inertiajs/vue3'
import MarketingLayout from '@/Layouts/MarketingLayout.vue'
import SectionHeader from '@/Components/Marketing/SectionHeader.vue'

defineOptions({ layout: MarketingLayout })

const form = useForm({
  name: '',
  email: '',
  subject: '',
  message: '',
})

const subjects = [
  'General Inquiry',
  'Sales',
  'Technical Support',
  'Billing',
  'Partnership',
  'Other',
]

function submit(): void {
  form.post('/contact', {
    preserveScroll: true,
    onSuccess: () => form.reset(),
  })
}

const contactInfo = [
  { icon: 'tabler-mail', title: 'Email', detail: 'support@ezscale.cloud', href: 'mailto:support@ezscale.cloud' },
  { icon: 'tabler-clock', title: 'Support Hours', detail: '24/7/365', href: null },
  { icon: 'tabler-message-circle', title: 'Live Chat', detail: 'Available on dashboard', href: null },
]
</script>

<template>
  <div>
    <VContainer class="marketing-section">
      <SectionHeader
        label="Get in Touch"
        title="Contact Us"
        subtitle="Have a question? We'd love to hear from you."
      />

      <VRow>
        <!-- Contact Form -->
        <VCol cols="12" md="7">
          <VCard variant="outlined">
            <VCardText class="pa-6">
              <h2 class="text-h5 font-weight-bold mb-6">Send us a message</h2>

              <form @submit.prevent="submit">
                <VRow>
                  <VCol cols="12" sm="6">
                    <VTextField
                      v-model="form.name"
                      label="Name"
                      placeholder="John Doe"
                      :error-messages="form.errors.name"
                      required
                    />
                  </VCol>
                  <VCol cols="12" sm="6">
                    <VTextField
                      v-model="form.email"
                      label="Email"
                      type="email"
                      placeholder="john@example.com"
                      :error-messages="form.errors.email"
                      required
                    />
                  </VCol>
                  <VCol cols="12">
                    <VSelect
                      v-model="form.subject"
                      :items="subjects"
                      label="Subject"
                      :error-messages="form.errors.subject"
                      required
                    />
                  </VCol>
                  <VCol cols="12">
                    <VTextarea
                      v-model="form.message"
                      label="Message"
                      rows="5"
                      placeholder="How can we help you?"
                      :error-messages="form.errors.message"
                      required
                    />
                  </VCol>
                  <VCol cols="12">
                    <VBtn
                      type="submit"
                      color="primary"
                      size="large"
                      :loading="form.processing"
                      :disabled="form.processing"
                    >
                      Send Message
                      <VIcon icon="tabler-send" end />
                    </VBtn>
                  </VCol>
                </VRow>
              </form>
            </VCardText>
          </VCard>
        </VCol>

        <!-- Contact Info -->
        <VCol cols="12" md="5">
          <div class="d-flex flex-column ga-4">
            <VCard v-for="info in contactInfo" :key="info.title" variant="outlined" class="feature-card-hover">
              <VCardText class="d-flex align-center ga-4">
                <VAvatar color="primary" variant="tonal" size="48">
                  <VIcon :icon="info.icon" size="24" />
                </VAvatar>
                <div>
                  <div class="text-subtitle-2 text-medium-emphasis">{{ info.title }}</div>
                  <a
                    v-if="info.href"
                    :href="info.href"
                    class="text-body-1 font-weight-medium text-decoration-none text-primary"
                  >
                    {{ info.detail }}
                  </a>
                  <div v-else class="text-body-1 font-weight-medium">{{ info.detail }}</div>
                </div>
              </VCardText>
            </VCard>

            <VCard variant="outlined" color="primary">
              <VCardText class="pa-6">
                <h3 class="text-h6 font-weight-bold mb-2">Need immediate help?</h3>
                <p class="text-body-2 mb-3">
                  Our support team is available 24/7 through your account dashboard.
                </p>
                <VBtn variant="outlined" size="small" href="https://ezscale.support/en/knowledgebase" target="_blank">
                  Visit Knowledge Base
                  <VIcon icon="tabler-external-link" end size="16" />
                </VBtn>
              </VCardText>
            </VCard>
          </div>
        </VCol>
      </VRow>
    </VContainer>
  </div>
</template>