David/Wfdash-OnlineShop
1
0
Fork 0
mirror of https://gitlab.com/davidels1986/ore-cart-checkout.git synced 2026-10-30 02:59:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Visual edit in Lovable

Browse source 
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot] 2026-01-29 21:18:30 +00:00
parent 8eeea3b737
commit ef31dc6861
2 changed files with 30 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
src/components/QuoteRequestForm.tsx
View file

@ -3,17 +3,9 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { toast } from '@/hooks/use-toast';
import { Send } from 'lucide-react';
export function QuoteRequestForm() {
const [open, setOpen] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
@ -22,35 +14,41 @@ export function QuoteRequestForm() {
email: '',
phone: '',
company: '',
message: '',
message: ''
});
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
const {
name,
value
} = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
// Simulate form submission
await new Promise(resolve => setTimeout(resolve, 1000));
toast({
title: "Quote Request Sent!",
description: "We'll get back to you within 24 hours.",
description: "We'll get back to you within 24 hours."
});
setFormData({
name: '',
email: '',
phone: '',
company: '',
message: ''
});
setFormData({ name: '', email: '', phone: '', company: '', message: '' });
setIsSubmitting(false);
setOpen(false);
};
return (
<Dialog open={open} onOpenChange={setOpen}>
return <Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<button className="inline-flex items-center gap-2 bg-primary-foreground text-primary font-semibold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity">
<button className="inline-flex items-center gap-2 bg-primary-foreground font-semibold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity text-zinc-700">
<Send className="w-4 h-4" />
Request Quote
</button>
@ -66,77 +64,31 @@ export function QuoteRequestForm() {
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="name">Full Name *</Label>
<Input
id="name"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="John Doe"
required
maxLength={100}
/>
<Input id="name" name="name" value={formData.name} onChange={handleChange} placeholder="John Doe" required maxLength={100} />
</div>
<div className="space-y-2">
<Label htmlFor="email">Email *</Label>
<Input
id="email"
name="email"
type="email"
value={formData.email}
onChange={handleChange}
placeholder="john@company.com"
required
maxLength={255}
/>
<Input id="email" name="email" type="email" value={formData.email} onChange={handleChange} placeholder="john@company.com" required maxLength={255} />
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="phone">Phone Number</Label>
<Input
id="phone"
name="phone"
type="tel"
value={formData.phone}
onChange={handleChange}
placeholder="+27 12 345 6789"
maxLength={20}
/>
<Input id="phone" name="phone" type="tel" value={formData.phone} onChange={handleChange} placeholder="+27 12 345 6789" maxLength={20} />
</div>
<div className="space-y-2">
<Label htmlFor="company">Company Name</Label>
<Input
id="company"
name="company"
value={formData.company}
onChange={handleChange}
placeholder="ABC Mining Ltd"
maxLength={100}
/>
<Input id="company" name="company" value={formData.company} onChange={handleChange} placeholder="ABC Mining Ltd" maxLength={100} />
</div>
</div>
<div className="space-y-2">
<Label htmlFor="message">Message / Product Requirements *</Label>
<Textarea
id="message"
name="message"
value={formData.message}
onChange={handleChange}
placeholder="Please describe the products you need, quantities, and any specific requirements..."
className="min-h-[120px]"
required
maxLength={1000}
/>
<Textarea id="message" name="message" value={formData.message} onChange={handleChange} placeholder="Please describe the products you need, quantities, and any specific requirements..." className="min-h-[120px]" required maxLength={1000} />
</div>
<Button
type="submit"
className="w-full bg-brand-yellow text-brand-yellow-foreground hover:opacity-90"
disabled={isSubmitting}
>
<Button type="submit" className="w-full bg-brand-yellow text-brand-yellow-foreground hover:opacity-90" disabled={isSubmitting}>
{isSubmitting ? 'Sending...' : 'Submit Quote Request'}
</Button>
</form>
</DialogContent>
</Dialog>
);
}
</Dialog>;
}

4
src/pages/Index.tsx
View file

@ -146,7 +146,7 @@ const Index = () => {
</section>
{/* CTA Section */}
<section className="py-16 opacity-100 bg-accent">
<section className="py-16 opacity-100 bg-[#e3b24f]">
<div className="container mx-auto px-4 text-center">
<h2 className="font-display text-3xl md:text-4xl font-bold text-primary-foreground mb-4">
Need a Custom Quote?
@ -156,7 +156,7 @@ const Index = () => {
Add items to your cart and request a personalized quote today.
</p>
<div className="flex flex-wrap justify-center gap-4">
<a href="tel:+27123456789" className="inline-flex items-center gap-2 text-brand-yellow-foreground font-semibold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity bg-destructive">
<a href="tel:+27123456789" className="inline-flex items-center gap-2 text-brand-yellow-foreground font-semibold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity bg-zinc-700 text-white border-white">
Call Us Now
</a>
<QuoteRequestForm />