初始化
This commit is contained in:
@@ -0,0 +1,136 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', '联系我们 - 深圳市云创芯电子有限公司')
|
||||
|
||||
@section('content')
|
||||
{{-- Hero --}}
|
||||
<section class="hero-aurora relative">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
|
||||
<div class="reveal max-w-2xl">
|
||||
<span class="eyebrow">联系我们</span>
|
||||
<h1 class="mt-4 text-3xl font-extrabold tracking-tight gradient-text sm:text-4xl lg:text-5xl">携手共创 TypeC 快速充电未来</h1>
|
||||
<p class="mt-4 text-base leading-relaxed text-muted">无论是方案选型、样品申请还是技术合作，留下联系方式，我们的方案团队将在 1 个工作日内与你对接。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- 联络方式 + 表单 --}}
|
||||
<section class="section px-4 sm:px-6 lg:px-8 -mt-10 lg:-mt-16">
|
||||
<div class="mx-auto max-w-6xl">
|
||||
<div class="grid gap-8 lg:grid-cols-5">
|
||||
<!-- 左栏：联络方式 -->
|
||||
<div class="reveal lg:col-span-2 glow-card rounded-2xl p-6 sm:p-8">
|
||||
<h2 class="text-lg font-semibold text-fg">我们的联络方式</h2>
|
||||
<p class="mt-1 text-sm text-muted">深圳市云创芯电子有限公司 · 专注于多口 TypeC 接口 IC。</p>
|
||||
|
||||
<ul class="mt-6 space-y-5">
|
||||
<li class="flex items-start gap-3">
|
||||
<x-icon name="box" :size="22" class="mt-0.5 shrink-0 text-primary" />
|
||||
<div>
|
||||
<p class="text-sm font-medium text-muted">公司名称</p>
|
||||
<p class="text-base font-semibold text-fg">深圳市云创芯电子有限公司</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<x-icon name="mail" :size="22" class="mt-0.5 shrink-0 text-primary" />
|
||||
<div>
|
||||
<p class="text-sm font-medium text-muted">电子邮箱</p>
|
||||
<a href="mailto:service@51chip.net" class="text-base font-semibold text-fg transition-colors hover:text-primary">service@51chip.net</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<x-icon name="phone" :size="22" class="mt-0.5 shrink-0 text-primary" />
|
||||
<div>
|
||||
<p class="text-sm font-medium text-muted">联系电话</p>
|
||||
<a href="tel:13510116819" class="text-base font-semibold text-fg transition-colors hover:text-primary">13510116819</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<x-icon name="pin" :size="22" class="mt-0.5 shrink-0 text-primary" />
|
||||
<div>
|
||||
<p class="text-sm font-medium text-muted">地址</p>
|
||||
<p class="text-base font-semibold text-fg">深圳市南山区科技园</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 右栏：留言表单（服务端渲染，无需 JS 即可提交） -->
|
||||
<div class="reveal lg:col-span-3 glow-card rounded-2xl p-6 sm:p-8">
|
||||
<h2 class="text-lg font-semibold text-fg">商务合作表单</h2>
|
||||
<p class="mt-1 text-sm text-muted">提交后我们会在 1 个工作日内回复。</p>
|
||||
|
||||
@if (session('success'))
|
||||
<div class="mt-6 rounded-lg border border-success bg-success-soft px-4 py-3 text-sm text-success">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ url('/contact') }}" class="mt-6 space-y-4" novalidate>
|
||||
@csrf
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label for="name" class="mb-1.5 block text-sm font-medium text-fg">姓名 <span class="text-danger">*</span></label>
|
||||
<input id="name" name="name" type="text" maxlength="40" value="{{ old('name') }}" required
|
||||
class="w-full rounded-lg border {{ $errors->has('name') ? 'border-danger' : 'border-line' }} bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:border-primary focus:outline-none focus:shadow-[0_0_0_3px_var(--color-primary-soft)]">
|
||||
@error('name')
|
||||
<p class="mt-1 text-sm text-danger">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="company" class="mb-1.5 block text-sm font-medium text-fg">公司</label>
|
||||
<input id="company" name="company" type="text" maxlength="120" value="{{ old('company') }}"
|
||||
class="w-full rounded-lg border {{ $errors->has('company') ? 'border-danger' : 'border-line' }} bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:border-primary focus:outline-none focus:shadow-[0_0_0_3px_var(--color-primary-soft)]">
|
||||
@error('company')
|
||||
<p class="mt-1 text-sm text-danger">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label for="phone" class="mb-1.5 block text-sm font-medium text-fg">电话</label>
|
||||
<input id="phone" name="phone" type="text" maxlength="20" value="{{ old('phone') }}"
|
||||
class="w-full rounded-lg border {{ $errors->has('phone') ? 'border-danger' : 'border-line' }} bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:border-primary focus:outline-none focus:shadow-[0_0_0_3px_var(--color-primary-soft)]">
|
||||
@error('phone')
|
||||
<p class="mt-1 text-sm text-danger">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="mb-1.5 block text-sm font-medium text-fg">邮箱 <span class="text-danger">*</span></label>
|
||||
<input id="email" name="email" type="email" maxlength="120" value="{{ old('email') }}" required
|
||||
class="w-full rounded-lg border {{ $errors->has('email') ? 'border-danger' : 'border-line' }} bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:border-primary focus:outline-none focus:shadow-[0_0_0_3px_var(--color-primary-soft)]">
|
||||
@error('email')
|
||||
<p class="mt-1 text-sm text-danger">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="subject" class="mb-1.5 block text-sm font-medium text-fg">主题 <span class="text-danger">*</span></label>
|
||||
<input id="subject" name="subject" type="text" maxlength="80" value="{{ old('subject') }}" required
|
||||
class="w-full rounded-lg border {{ $errors->has('subject') ? 'border-danger' : 'border-line' }} bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:border-primary focus:outline-none focus:shadow-[0_0_0_3px_var(--color-primary-soft)]">
|
||||
@error('subject')
|
||||
<p class="mt-1 text-sm text-danger">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="message" class="mb-1.5 block text-sm font-medium text-fg">需求描述 <span class="text-danger">*</span></label>
|
||||
<textarea id="message" name="message" maxlength="1000" rows="4" required
|
||||
class="w-full rounded-lg border {{ $errors->has('message') ? 'border-danger' : 'border-line' }} bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:border-primary focus:outline-none focus:shadow-[0_0_0_3px_var(--color-primary-soft)]">{{ old('message') }}</textarea>
|
||||
@error('message')
|
||||
<p class="mt-1 text-sm text-danger">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<button type="submit" class="cta-glow inline-flex w-full items-center justify-center gap-2 rounded-lg px-5 py-3 text-sm font-semibold">
|
||||
提交需求 <x-icon name="send" :size="18" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user