Merge version_1 into main #7

Merged
bender merged 1 commits from version_1 into main 2026-03-11 11:29:59 +00:00

View File

@@ -1,91 +1,267 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Home } from "lucide-react";
const navItems = [
{ name: "Home", id: "/" },
];
interface FormField {
id: string;
label: string;
type: "text" | "email" | "tel" | "textarea" | "select";
required?: boolean;
placeholder?: string;
options?: string[];
}
const heroAvatars = [
{
src: "http://img.b2bpic.net/free-photo/close-up-businessman-smiling_23-2150771099.jpg", alt: "Paul Blaga"},
];
interface FormProps {
title: string;
userImage: string;
userName: string;
userPhone: string;
fields: FormField[];
gdprCheckbox: { label: string; required: boolean };
termsCheckbox: { label: string; required: boolean };
buttonText: string;
successMessage: string;
floatingButton?: boolean;
validateOnChange?: boolean;
}
const gdprFaqs = [
{
id: "1", title: "Cine este operatorul de date personale?", content:
"Datele dumneavoastră personale sunt colectate și prelucrate de MULTI TASK CLUB S.R.L., cu sediul în Loc. Deva, Aleea Romanilor 23, Bl. 12, Ap. 107, Județul Hunedoara, România, înregistrată la ONRC cu CUI 46528927, în calitate de operator de date."},
{
id: "2", title: "Care este scopul prelucrării datelor?", content:
"Datele colectate prin acest formular vor fi utilizate exclusiv pentru: furnizarea de informații și oferte imobiliare; contactarea dumneavoastră în scopul prezentării serviciilor noastre; gestionarea cererilor și a leadurilor generate prin formular."},
{
id: "3", title: "Care este temeiul legal al prelucrării?", content:
"Prelucrarea datelor se face pe baza consimțământului dumneavoastră explicit, conform art. 6 alin. (1) lit. a) din GDPR."},
{
id: "4", title: "Ce categorii de date sunt colectate?", content:
"Datele pe care le vom prelucra pot include: nume și prenume; adresă de e-mail; număr de telefon; orice alte informații pe care le furnizați voluntar prin formular."},
{
id: "5", title: "Cât timp sunt stocate datele personale?", content:
"Datele personale vor fi stocate pentru o perioadă de maximum 3 ani sau până la retragerea consimțământului."},
{
id: "6", title: "Care sunt drepturile mele?", content:
"Aveți dreptul de a: accesa datele personale; rectifica datele inexacte; solicita ștergerea datelor (dreptul de a fi uitat); restricționa prelucrarea sau de a vă opune; solicita portabilitatea datelor; retrage consimțământul în orice moment; depune o plângere la ANSPDCP."},
];
const LeadForm: React.FC<FormProps> = ({
title,
userImage,
userName,
userPhone,
fields,
gdprCheckbox,
termsCheckbox,
buttonText,
successMessage,
floatingButton = true,
validateOnChange = true,
}) => {
const [formData, setFormData] = React.useState<Record<string, string>>({});
const [errors, setErrors] = React.useState<Record<string, string>>({});
const [submitted, setSubmitted] = React.useState(false);
const [gdprChecked, setGdprChecked] = React.useState(false);
const [termsChecked, setTermsChecked] = React.useState(false);
const termsFaqs = [
{
id: "1", title: "Operatorul și scopul", content:
"Acest site/formular este operat de MULTI TASK CLUB S.R.L., cu sediul în Loc. Deva, Aleea Romanilor 23, Bl. 12, Ap. 107, Județul Hunedoara, România, înregistrată la ONRC cu CUI 46528927. Prin accesarea și utilizarea acestui formular, sunteți de acord cu acești termeni și condiții."},
{
id: "2", title: "Serviciile oferite", content:
"MULTI TASK CLUB S.R.L. furnizează servicii de intermediere imobiliară, consultanță și prezentarea de oferte pentru achiziții, închirieri și management imobiliar. Toate informațiile și materialele prezentate au caracter informativ și nu constituie oferte contractuale definitive."},
{
id: "3", title: "Utilizarea formularului", content:
"Utilizatorul se angajează să furnizeze informații corecte și complete. Este interzisă utilizarea site-ului în scopuri ilegale sau pentru transmiterea de conținut neadecvat."},
{
id: "4", title: "Protecția datelor personale", content:
"Datele colectate prin site sau formular sunt prelucrate conform Politicii de Confidențialitate și Clauzelor GDPR disponibile pe site."},
{
id: "5", title: "Proprietatea intelectuală", content:
"Conținutul site-ului (texte, imagini, logo-uri, videoclipuri) este proprietatea MULTI TASK CLUB S.R.L. și nu poate fi copiat, distribuit sau folosit fără acordul scris al companiei."},
{
id: "6", title: "Limitarea răspunderii", content:
"MULTI TASK CLUB S.R.L. nu este responsabilă pentru: erori, omisiuni sau inexactități ale informațiilor prezentate; deciziile luate pe baza informațiilor din site/formular; eventuale pierderi directe sau indirecte cauzate de accesarea serviciilor."},
];
const validateField = (field: FormField, value: string): string | null => {
if (field.required && !value.trim()) {
return `${field.label} is required`;
}
if (field.type === "email" && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
return "Please enter a valid email";
}
if (field.type === "tel" && value && !/^[\d\s\-\+\(\)]+$/.test(value)) {
return "Please enter a valid phone number";
}
return null;
};
const footerColumns = [
{
title: "Companie", items: [
{ label: "Despre noi", href: "#" },
{ label: "Servicii", href: "#services" },
{ label: "Contact", href: "#contact" },
],
},
{
title: "Legal", items: [
{ label: "Termeni și Condiții", href: "#terms" },
{ label: "GDPR", href: "#gdpr" },
{ label: "Politica de Confidențialitate", href: "#" },
{ label: "Politica Cookie", href: "#" },
],
},
{
title: "Contact", items: [
{
label: "Email: paul.blaga@activimob.ro", href: "mailto:paul.blaga@activimob.ro"},
{ label: "Telefon: 0750 290 998", href: "tel:+40750290998" },
{
label: "Adresă: Aleea Romanilor 23, Bl. 12, Ap. 107, Loc. Deva, Județul Hunedoara, România", href: "#"},
],
},
];
const handleFieldChange = (fieldId: string, value: string) => {
setFormData((prev) => ({ ...prev, [fieldId]: value }));
if (validateOnChange) {
const field = fields.find((f) => f.id === fieldId);
if (field) {
const error = validateField(field, value);
setErrors((prev) => ({
...prev,
[fieldId]: error || ""}));
}
}
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const newErrors: Record<string, string> = {};
fields.forEach((field) => {
const error = validateField(field, formData[field.id] || "");
if (error) {
newErrors[field.id] = error;
}
});
if (gdprCheckbox.required && !gdprChecked) {
newErrors.gdpr = "GDPR consent is required";
}
if (termsCheckbox.required && !termsChecked) {
newErrors.terms = "Terms acceptance is required";
}
if (Object.keys(newErrors).length === 0) {
setSubmitted(true);
setTimeout(() => {
setSubmitted(false);
setFormData({});
setGdprChecked(false);
setTermsChecked(false);
}, 3000);
} else {
setErrors(newErrors);
}
};
return (
<div id="form-section" data-section="form-section" className="w-full py-16 px-4">
<div className="max-w-2xl mx-auto">
<h2 className="text-3xl font-bold mb-8 text-center">{title}</h2>
{submitted ? (
<div className="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
<p className="text-green-800 font-medium">{successMessage}</p>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6">
<div className="flex items-center gap-4 mb-6 pb-6 border-b">
<img
src={userImage}
alt={userName}
className="w-12 h-12 rounded-full object-cover"
/>
<div>
<p className="font-semibold">{userName}</p>
<p className="text-sm text-gray-600">{userPhone}</p>
</div>
</div>
{fields.map((field) => (
<div key={field.id}>
<label className="block text-sm font-medium mb-2">
{field.label}
{field.required && <span className="text-red-500 ml-1">*</span>}
</label>
{field.type === "select" ? (
<select
value={formData[field.id] || ""}
onChange={(e) => handleFieldChange(field.id, e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">Select an option</option>
{field.options?.map((opt) => (
<option key={opt} value={opt}>
{opt}
</option>
))}
</select>
) : field.type === "textarea" ? (
<textarea
value={formData[field.id] || ""}
onChange={(e) => handleFieldChange(field.id, e.target.value)}
placeholder={field.placeholder}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-24 resize-none"
/>
) : (
<input
type={field.type}
value={formData[field.id] || ""}
onChange={(e) => handleFieldChange(field.id, e.target.value)}
placeholder={field.placeholder}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
)}
{errors[field.id] && (
<p className="text-red-500 text-sm mt-1">{errors[field.id]}</p>
)}
</div>
))}
<div className="space-y-3 pt-4">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={gdprChecked}
onChange={(e) => {
setGdprChecked(e.target.checked);
setErrors((prev) => ({
...prev,
gdpr: ""}));
}}
className="w-4 h-4"
/>
<span className="text-sm">{gdprCheckbox.label}</span>
</label>
{errors.gdpr && <p className="text-red-500 text-sm">{errors.gdpr}</p>}
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={termsChecked}
onChange={(e) => {
setTermsChecked(e.target.checked);
setErrors((prev) => ({
...prev,
terms: ""}));
}}
className="w-4 h-4"
/>
<span className="text-sm">{termsCheckbox.label}</span>
</label>
{errors.terms && <p className="text-red-500 text-sm">{errors.terms}</p>}
</div>
<button
type="submit"
className="w-full bg-blue-600 text-white font-semibold py-3 rounded-lg hover:bg-blue-700 transition-colors"
>
{buttonText}
</button>
</form>
)}
</div>
</div>
);
};
const GDPRSection: React.FC<{
title: string;
sections: Array<{ id: string; title: string; content: string }>;
}> = ({ title, sections }) => (
<div id="gdpr" data-section="gdpr" className="w-full py-16 px-4 bg-gray-50">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold mb-12">{title}</h2>
<div className="space-y-8">
{sections.map((section) => (
<div key={section.id}>
<h3 className="text-xl font-semibold mb-4">{section.title}</h3>
<p className="text-gray-700 whitespace-pre-line">{section.content}</p>
</div>
))}
</div>
</div>
</div>
);
const TermsSection: React.FC<{
title: string;
sections: Array<{ id: string; title: string; content: string }>;
}> = ({ title, sections }) => (
<div id="terms" data-section="terms" className="w-full py-16 px-4">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold mb-12">{title}</h2>
<div className="space-y-8">
{sections.map((section) => (
<div key={section.id}>
<h3 className="text-xl font-semibold mb-4">{section.title}</h3>
<p className="text-gray-700 whitespace-pre-line">{section.content}</p>
</div>
))}
</div>
</div>
</div>
);
export default function Home() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Formular", id: "form-section" },
{ name: "GDPR", id: "gdpr" },
{ name: "Termeni", id: "terms" },
];
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
@@ -100,65 +276,143 @@ export default function Home() {
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleApple navItems={navItems} brandName="Webild" />
<NavbarLayoutFloatingOverlay
navItems={navItems}
brandName="MULTI TASK CLUB"
button={{
text: "Contact", href: "tel:0750290998"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
<HeroBillboardScroll
title="Spune-ne ce proprietate ai"
description="Completează formularul și un consultant te va contacta în cel mai scurt timp."
background={{ variant: "plain" }}
avatars={heroAvatars}
avatarText="Paul Blaga - 0750 290 998"
background={{ variant: "circleGradient" }}
tag="Lead Collection"
tagIcon={Home}
tagAnimation="slide-up"
buttons={[]}
buttonAnimation="opacity"
className="relative min-h-screen flex items-center justify-center overflow-hidden"
imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780697.jpg"
imageAlt="Real estate consultation"
className="min-h-screen flex items-center justify-center relative overflow-hidden"
containerClassName="flex flex-col items-center justify-center gap-8 relative z-10"
textBoxClassName="max-w-2xl text-center"
titleClassName="text-4xl md:text-6xl font-extrabold"
descriptionClassName="text-lg md:text-xl opacity-90 mt-4"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Formular de colectare lead-uri pentru servicii imobiliare"
animationType="entrance-slide"
buttons={[]}
background={{ variant: "plain" }}
useInvertedBackground={false}
className="py-16 px-4"
/>
</div>
<LeadForm
title="Detaliile Proprietății"
userImage="http://img.b2bpic.net/free-photo/professional-woman-stylish-suit-office_23-2150167727.jpg"
userName="Paul Blaga"
userPhone="0750 290 998"
fields={[
{
id: "propertyType", label: "Tip proprietate", type: "select", required: true,
options: ["Apartament", "Casă", "Teren", "Spațiu comercial", "Alt tip"],
},
{
id: "address", label: "Adresa completă a proprietății (oraș, stradă, număr)", type: "textarea", required: true,
placeholder: "Introduceți adresa completă"},
{
id: "transactionType", label: "Tip tranzacție", type: "select", required: true,
options: ["Vânzare", "Închiriere"],
},
{
id: "fullName", label: "Nume complet", type: "text", required: true,
placeholder: "Introduceți numele"},
{
id: "phone", label: "Număr de telefon", type: "tel", required: true,
placeholder: "0700 000 000"},
]}
gdprCheckbox={{
label: "Sunt de acord cu prelucrarea datelor mele personale în scopul menționat", required: true,
}}
termsCheckbox={{
label: "Prin completarea acestui formular, sunt de acord cu termenii și condițiile site-ului", required: true,
}}
buttonText="Trimite solicitarea"
successMessage="Mulțumim! Un consultant te va contacta în curând."
floatingButton={true}
validateOnChange={true}
/>
<div id="gdpr" data-section="gdpr">
<FaqSplitMedia
title="Protecția Datelor Personale - GDPR"
description="Înțelegeți cum sunt colectate, procesate și protejate datele dumneavoastră personale conform regulamentelor GDPR."
faqs={gdprFaqs}
mediaAnimation="opacity"
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
mediaPosition="left"
showCard={true}
/>
</div>
<GDPRSection
title="Protecția Datelor Personale (GDPR)"
sections={[
{
id: "operator", title: "Operatorul de date personale", content: "Datele dumneavoastră personale sunt colectate și prelucrate de MULTI TASK CLUB S.R.L., cu sediul în Loc. Deva, Aleea Romanilor 23, Bl. 12, Ap. 107, Județului Hunedoara, România, înregistrată la ONRC cu CUI 46528927, în calitate de operator de date."},
{
id: "purpose", title: "Scopul prelucrării datelor", content: "Datele colectate prin acest formular vor fi utilizate exclusiv pentru:\n• furnizarea de informații și oferte imobiliare;\n• contactarea dumneavoastră în scopul prezentării serviciilor noastre;\n• gestionarea cererilor și a leadurilor generate prin formular."},
{
id: "legal-basis", title: "Temeiul legal al prelucrării", content: "Prelucrarea datelor se face pe baza consimțământului dumneavoastră explicit, conform art. 6 alin. (1) lit. a) din GDPR."},
{
id: "data-categories", title: "Categorii de date colectate", content: "Datele pe care le vom prelucra pot include:\n• nume și prenume;\n• adresă de e-mail;\n• număr de telefon;\n• orice alte informații pe care le furnizați voluntar prin formular."},
{
id: "recipients", title: "Destinatarii datelor", content: "Datele dumneavoastră nu vor fi vândute și vor fi partajate doar cu colaboratori autorizați care contribuie la realizarea serviciilor imobiliare oferite."},
{
id: "storage-duration", title: "Durata stocării datelor", content: "Datele personale vor fi stocate pentru o perioadă de maximum 3 ani sau până la retragerea consimțământului."},
{
id: "rights", title: "Drepturile persoanelor vizate", content: "Aveți dreptul de a:\n• accesa datele personale;\n• rectifica datele inexacte;\n• solicita ștergerea datelor (\"dreptul de a fi uitat\");\n• restricționa prelucrarea sau de a vă opune;\n• solicita portabilitatea datelor;\n• retrage consimțământul în orice moment fără a afecta legalitatea prelucrării efectuate anterior retragerii;\n• depune o plângere la Autoritatea Națională de Supraveghere a Prelucrării Datelor cu Caracter Personal (ANSPDCP)."},
]}
/>
<div id="terms" data-section="terms">
<FaqSplitMedia
title="Termeni și Condiții"
description="Termenii și condițiile care guvernează utilizarea acestui formular și serviciilor noastre."
faqs={termsFaqs}
mediaAnimation="opacity"
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
mediaPosition="left"
showCard={true}
/>
</div>
<TermsSection
title="Termeni și Condiții"
sections={[
{
id: "operator-purpose", title: "Operatorul și scopul", content: "Acest site/formular este operat de MULTI TASK CLUB S.R.L., cu sediul în Loc. Deva, Aleea Romanilor 23, Bl. 12, Ap. 107, Județul Hunedoara, România, înregistrată la ONRC cu CUI 46528927.\n\nPrin accesarea și utilizarea acestui formular sau site, sunteți de acord cu acești termeni și condiții."},
{
id: "services", title: "Serviciile oferite", content: "MULTI TASK CLUB S.R.L. furnizează servicii de intermediere imobiliară, consultanță și prezentarea de oferte pentru achiziții, închirieri și management imobiliar.\n\nToate informațiile și materialele prezentate au caracter informativ și nu constituie oferte contractuale definitive."},
{
id: "usage", title: "Utilizarea site-ului / formularului", content: "• Utilizatorul se angajează să furnizeze informații corecte și complete.\n• Este interzisă utilizarea site-ului în scopuri ilegale sau pentru transmiterea de conținut neadecvat."},
{
id: "data-protection", title: "Protecția datelor personale", content: "Datele colectate prin site sau formular sunt prelucrate conform Politicii de Confidențialitate / Clauzelor GDPR disponibile pe site."},
{
id: "intellectual-property", title: "Proprietatea intelectuală", content: "Conținutul site-ului (texte, imagini, logo-uri, videoclipuri) este proprietatea MULTI TASK CLUB S.R.L. și nu poate fi copiat, distribuit sau folosit fără acordul scris al companiei."},
{
id: "liability", title: "Limitarea răspunderii", content: "MULTI TASK CLUB S.R.L. nu este responsabilă pentru:\n• erori, omisiuni sau inexactități ale informațiilor prezentate;\n• deciziile luate pe baza informațiilor din site/formular;\n• eventuale pierderi directe sau indirecte cauzate de accesarea serviciilor."},
{
id: "modifications", title: "Modificarea termenilor și condițiilor", content: "MULTI TASK CLUB S.R.L. își rezervă dreptul de a modifica acești termeni și condiții în orice moment. Modificările vor fi publicate pe site și vor intra în vigoare imediat după publicare."},
{
id: "jurisdiction", title: "Legea aplicabilă și jurisdicția", content: "Acești termeni și condiții sunt guvernați de legislația română. Orice litigiu va fi soluționat de instanțele competente din România."},
{
id: "contact-info", title: "Contact", content: "Pentru orice întrebări privind termenii și condițiile sau serviciile noastre, ne puteți contacta la:\n• Email: paul.blaga@activimob.ro\n• Telefon: 0750 290 998\n• Adresă: Aleea Romanilor 23, Bl. 12, Ap. 107, Loc. Deva, Județul Hunedoara, România"},
]}
/>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={footerColumns}
copyrightText="© 2025 MULTI TASK CLUB S.R.L. Toate drepturile rezervate."
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780697.jpg"
imageAlt="Real estate services footer"
columns={[
{
title: "Produse", items: [
{ label: "Lead Collection", href: "#form-section" },
{ label: "Dashboard", href: "#" },
{ label: "Pricing", href: "#" },
],
},
{
title: "Companie", items: [
{ label: "Despre Noi", href: "#" },
{ label: "Contact", href: "tel:0750290998" },
{ label: "Careers", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#gdpr" },
{ label: "Terms & Conditions", href: "#terms" },
{ label: "Cookie Policy", href: "#" },
],
},
]}
logoText="MULTI TASK CLUB"
copyrightText="© 2025 MULTI TASK CLUB S.R.L. | Deva, Hunedoara, România"
containerClassName="bg-gradient-to-b from-transparent to-accent/5"
/>
</div>
</ThemeProvider>