Made a proper Ui for the Architect page

Author: MYSTICxSAM

src/pages/categories/Architects.tsx

@@ -4,7 +4,7 @@ import { useAuth } from "@/contexts/AuthContext";
 import { useNavigate } from "react-router-dom";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
-import { Loader2 } from "lucide-react";
+import { Loader2, CheckCircle2, Smile } from "lucide-react";
 
 const ArchitectsPage = () => {
   const { user } = useAuth();
@@ -21,7 +21,6 @@ const ArchitectsPage = () => {
   });
   const [message, setMessage] = useState("");
 
-  // Fetch architects
   const fetchArchitects = async () => {
     setLoading(true);
     const { data, error } = await supabase.from("architects").select("*");
@@ -34,12 +33,12 @@ const ArchitectsPage = () => {
     fetchArchitects();
   }, []);
 
-  // Handle form input
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
-  // Register architect
   const handleRegister = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!user) {
@@ -56,17 +55,15 @@ const ArchitectsPage = () => {
     setLoading(true);
     setMessage("");
 
-    const { error } = await supabase
-      .from("architects")
-      .insert([
-        {
-          name,
-          specialization,
-          description,
-          image_url,
-          user_id: user.id, // must match your Supabase table column exactly
-        },
-      ]);
+    const { error } = await supabase.from("architects").insert([
+      {
+        name,
+        specialization,
+        description,
+        image_url,
+        user_id: user.id,
+      },
+    ]);
 
     setLoading(false);
 
@@ -75,13 +72,17 @@ const ArchitectsPage = () => {
       setMessage(`Failed to register: ${error.message}`);
     } else {
       setMessage("Successfully registered as architect!");
-      setFormData({ name: "", specialization: "", description: "", image_url: "" });
+      setFormData({
+        name: "",
+        specialization: "",
+        description: "",
+        image_url: "",
+      });
       setShowForm(false);
       fetchArchitects();
     }
   };
 
-  // Filtered architects
   const filteredArchitects = architects.filter(
     (arch) =>
       arch.name?.toLowerCase().includes(search.toLowerCase()) ||
@@ -92,35 +93,83 @@ const ArchitectsPage = () => {
     <div className="bg-white min-h-screen font-sans">
       <Navbar />
 
-      <section className="max-w-6xl mx-auto px-4 md:px-0 pt-12 sm:pt-20 flex flex-col md:flex-row items-center justify-between gap-10">
-        <div className="md:w-1/2">
-          <h1 className="text-4xl sm:text-5xl font-extrabold mb-6">
-            Find <span className="text-purple-600">Top Architects</span> for Your Project
+      {/* Hero Section (Professional Look) */}
+      <section className="max-w-7xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
+        {/* Left content */}
+        <div>
+          <h1 className="text-4xl md:text-5xl font-extrabold leading-tight mb-4">
+            Hire <span className="text-blue-600">Skilled</span> Architect <br /> in{" "}
+            <span className="text-blue-600">Minutes</span>
           </h1>
+          <p className="text-gray-600 text-lg mb-6">
+            Connect with expert architects to design your dream spaces — from modern homes to smart offices, all with precision and creativity
+          </p>
+
+          <div className="relative w-full max-w-md mb-6">
+            <input
+              type="text"
+              placeholder="Search services"
+              className="w-full py-3 px-5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 outline-none"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+            <button className="absolute right-2 top-1/2 -translate-y-1/2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
+              Search →
+            </button>
+          </div>
+
+          <div className="flex flex-wrap gap-3 text-sm text-gray-700 mb-4">
+            <span>Popular Services:</span>
+            <span className="px-3 py-1 bg-gray-100 rounded-full">Aashiana Architect</span>
+            <span className="px-3 py-1 bg-gray-100 rounded-full">Aviral Design Studio</span>
+          </div>
 
           {user && (
             <button
               onClick={() => setShowForm(!showForm)}
-              className="bg-purple-600 text-white px-5 py-2 rounded-lg font-semibold hover:bg-purple-700 transition"
+              className="bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 transition"
             >
               {showForm ? "Cancel" : "Register as Architect"}
             </button>
           )}
         </div>
 
-        <div className="md:w-1/2 flex justify-center hidden md:flex">
-          <img
-            src="https://thearchitectsdiary.com/wp-content/uploads/2019/12/architect-construction-plans.jpg"
-            alt="Architectural planning"
-            className="rounded-2xl shadow-xl object-cover w-full h-[300px] sm:h-[340px] md:max-w-[420px]"
-          />
+        {/* Right Video */}
+        <div className="relative">
+          <div className="rounded-2xl overflow-hidden shadow-xl border border-gray-200">
+            <iframe
+              width="100%"
+              height="320"
+              src="https://www.youtube.com/embed/5aJjXXQPqpM"
+              title="Customer Review"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+              className="w-full rounded-2xl"
+            ></iframe>
+          </div>
+
+          {/* Floating Popups */}
+          <div className="absolute top-4 right-4 bg-white shadow-lg rounded-xl px-4 py-2 flex items-center gap-2">
+            <CheckCircle2 className="text-green-500 w-5 h-5" />
+            <div className="text-sm">
+              <p className="font-semibold text-gray-800">Verified Experts</p>
+              <p className="text-gray-500 text-xs">Background Checked</p>
+            </div>
+          </div>
+
+          <div className="absolute bottom-4 left-4 bg-white shadow-lg rounded-xl px-4 py-2 flex items-center gap-2">
+            <Smile className="text-blue-500 w-5 h-5" />
+            <div className="text-sm">
+              <p className="font-semibold text-gray-800">Happy Customers</p>
+            </div>
+          </div>
         </div>
       </section>
 
-      {/* Registration Form */}
+      {/* Architect Registration Form */}
       {showForm && (
         <section className="max-w-4xl mx-auto mt-10 bg-gray-50 p-6 rounded-2xl shadow-md border border-gray-200">
-          <h2 className="text-2xl font-bold mb-4 text-center text-purple-700">
+          <h2 className="text-2xl font-bold mb-4 text-center text-blue-700">
             Register as an Architect
           </h2>
 
@@ -131,7 +180,7 @@ const ArchitectsPage = () => {
               placeholder="Full Name"
               value={formData.name}
               onChange={handleChange}
-              className="p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-600 focus:outline-none"
+              className="p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-600 focus:outline-none"
               required
             />
             <input
@@ -140,15 +189,15 @@ const ArchitectsPage = () => {
               placeholder="Specialization (e.g. Interior Design)"
               value={formData.specialization}
               onChange={handleChange}
-              className="p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-600 focus:outline-none"
+              className="p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-600 focus:outline-none"
               required
             />
             <textarea
               name="description"
               placeholder="Short Description about your work"
               value={formData.description}
               onChange={handleChange}
-              className="p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-600 focus:outline-none"
+              className="p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-600 focus:outline-none"
               rows={4}
               required
             />
@@ -158,12 +207,12 @@ const ArchitectsPage = () => {
               placeholder="Image URL (optional)"
               value={formData.image_url}
               onChange={handleChange}
-              className="p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-600 focus:outline-none"
+              className="p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-600 focus:outline-none"
             />
 
             <button
               type="submit"
-              className="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700 transition"
+              className="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition"
             >
               Register
             </button>
@@ -181,22 +230,11 @@ const ArchitectsPage = () => {
         </section>
       )}
 
-      {/* Search Bar */}
-      <section className="max-w-6xl mx-auto px-4 md:px-0 mt-8">
-        <input
-          type="text"
-          placeholder="Search architects by name or specialization"
-          className="w-full sm:w-1/2 px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-600 focus:outline-none mb-6"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
-      </section>
-
       {/* Architects Grid */}
-      <section className="max-w-6xl mx-auto px-4 md:px-0 mt-4 mb-20">
+      <section className="max-w-6xl mx-auto px-4 md:px-0 mt-12 mb-20">
         {loading ? (
           <div className="flex justify-center items-center h-40">
-            <Loader2 className="animate-spin w-8 h-8 text-purple-600" />
+            <Loader2 className="animate-spin w-8 h-8 text-blue-600" />
           </div>
         ) : filteredArchitects.length === 0 ? (
           <p className="text-center text-gray-500">No architects found.</p>
@@ -222,17 +260,19 @@ const ArchitectsPage = () => {
                       {arch.specialization || "Specialization not specified"}
                     </p>
                     <p className="text-gray-700 mb-5 text-sm line-clamp-3">
-                      {arch.description || "Expert in architectural design and planning."}
+                      {arch.description ||
+                        "Expert in architectural design and planning."}
                     </p>
                   </div>
 
-                  {/* View Details Button */}
                   <button
-  onClick={() => navigate(`/categories/architect-detail/${arch.id}`)}
-  className="mt-auto bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition"
->
-  View Details
-</button>
+                    onClick={() =>
+                      navigate(`/categories/architect-detail/${arch.id}`)
+                    }
+                    className="mt-auto bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition"
+                  >
+                    View Details
+                  </button>
                 </div>
               </div>
             ))}