Initial commit
This commit is contained in:
@@ -0,0 +1,264 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
export default function Start() {
|
||||
|
||||
const [form, setForm] = useState({
|
||||
name: "",
|
||||
company: "",
|
||||
website: "",
|
||||
project_type: "",
|
||||
budget: "",
|
||||
timeline: "",
|
||||
description: ""
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleChange = (e: any) => {
|
||||
setForm({ ...form, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/submit", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
console.log(data);
|
||||
|
||||
toast.success("Form Submitted Successfully 🚀");
|
||||
|
||||
setForm({
|
||||
name: "",
|
||||
company: "",
|
||||
website: "",
|
||||
project_type: "",
|
||||
budget: "",
|
||||
timeline: "",
|
||||
description: ""
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error("Something went wrong ❌");
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="ux-project-hero">
|
||||
<div className="container">
|
||||
{/* center content */}
|
||||
<div className="ux-project-content text-center">
|
||||
<h1 className="ux-project-title">Start A Project</h1>
|
||||
<p className="ux-project-subtitle">
|
||||
Tell us what you're building. We'll structure the rest.
|
||||
</p>
|
||||
</div>
|
||||
{/* joined users */}
|
||||
<div className="ux-joined-box">
|
||||
<div className="ux-avatar-group">
|
||||
<img src="assets/images/user1.png" alt="" />
|
||||
<img src="assets/images/user2.png" alt="" />
|
||||
<img src="assets/images/user3.png" alt="" />
|
||||
</div>
|
||||
<p>
|
||||
100+ people already joined
|
||||
<br />
|
||||
the AAideA
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* ===========================
|
||||
CONTACT FORM SECTION
|
||||
=========================== */}
|
||||
<section className="ux-contact-section">
|
||||
<div className="container">
|
||||
<div className="row g-4">
|
||||
{/* LEFT INFO */}
|
||||
<div className="col-lg-4">
|
||||
<div className="ux-contact-left">
|
||||
<a href="tel:+1236662343" className="ux-contact-link">
|
||||
(123) 666-2343
|
||||
</a>
|
||||
<a href="mailto:hello@ovela.com" className="ux-contact-email">
|
||||
hello@ovela.com
|
||||
</a>
|
||||
<div className="ux-social-list">
|
||||
<a href="#">
|
||||
Twitter <img src="assets/images/witterarrow.svg" alt="" />
|
||||
</a>
|
||||
<a href="#">
|
||||
Facebook <img src="assets/images/witterarrow.svg" alt="" />
|
||||
</a>
|
||||
<a href="#">
|
||||
Instagram <img src="assets/images/witterarrow.svg" alt="" />
|
||||
</a>
|
||||
<a href="#">
|
||||
Linkedin <img src="assets/images/witterarrow.svg" alt="" />
|
||||
</a>
|
||||
<a href="#">
|
||||
Youtube <img src="assets/images/witterarrow.svg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* RIGHT FORM */}
|
||||
<div className="col-lg-8">
|
||||
<div className="ux-contact-box">
|
||||
<p className="ux-contact-mini">Let's Build it Properly.</p>
|
||||
<h2 className="ux-contact-title">
|
||||
Tell us what you're building. We'll structure the rest.
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="row g-4">
|
||||
|
||||
{/* Name */}
|
||||
<div className="col-md-6">
|
||||
<label>Name</label>
|
||||
<input
|
||||
name="name"
|
||||
value={form.name}
|
||||
onChange={handleChange}
|
||||
type="text"
|
||||
className="form-control ux-input active"
|
||||
placeholder="John"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Company */}
|
||||
<div className="col-md-6">
|
||||
<label>Company Name</label>
|
||||
<input
|
||||
name="company"
|
||||
value={form.company}
|
||||
onChange={handleChange}
|
||||
type="text"
|
||||
className="form-control ux-input"
|
||||
placeholder="enter name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Website */}
|
||||
<div className="col-md-6">
|
||||
<label>Website</label>
|
||||
<input
|
||||
name="website"
|
||||
value={form.website}
|
||||
onChange={handleChange}
|
||||
type="text"
|
||||
className="form-control ux-input"
|
||||
placeholder="enter website"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Project Type */}
|
||||
<div className="col-md-6">
|
||||
<label>Project Type</label>
|
||||
<select
|
||||
name="project_type"
|
||||
value={form.project_type}
|
||||
onChange={handleChange}
|
||||
className="form-select ux-input"
|
||||
>
|
||||
<option value="">select type</option>
|
||||
<option value="Web App">Web App</option>
|
||||
<option value="Mobile App">Mobile App</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Budget */}
|
||||
<div className="col-md-6">
|
||||
<label>Budget Range</label>
|
||||
<select
|
||||
name="budget"
|
||||
value={form.budget}
|
||||
onChange={handleChange}
|
||||
className="form-select ux-input"
|
||||
>
|
||||
<option value="">select range</option>
|
||||
<option value="$10K - $25K">$10K - $25K</option>
|
||||
<option value="$25K+">$25K+</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="col-md-6">
|
||||
<label>Timeline</label>
|
||||
<input
|
||||
name="timeline"
|
||||
value={form.timeline}
|
||||
onChange={handleChange}
|
||||
type="text"
|
||||
className="form-control ux-input"
|
||||
placeholder="estimated weeks"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="col-12">
|
||||
<label>Brief Description</label>
|
||||
<textarea
|
||||
name="description"
|
||||
value={form.description}
|
||||
onChange={handleChange}
|
||||
className="form-control ux-textarea"
|
||||
rows={6}
|
||||
placeholder="What are we building?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<div className="col-12 text-end">
|
||||
<button type="submit" className="ux-btn-primary" disabled={loading}>
|
||||
{loading ? "Submitting..." : "Start a Project"}
|
||||
<span className="ux-btn-icon">
|
||||
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* TOP CTA */}
|
||||
<div className="ux-footer-hero">
|
||||
<div className="container">
|
||||
<div className="ux-footer-hero-content text-center">
|
||||
<p className="ux-section-label">AAideA</p>
|
||||
<h2 className="ux-footer-title">
|
||||
If the idea is strong, we'll scale it.
|
||||
</h2>
|
||||
<div className="ux-hero-actions">
|
||||
<a href="#" className="btn ux-btn-primary">
|
||||
Start a Project{" "}
|
||||
<span className="ux-btn-icon">
|
||||
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user