Initial commit from remix

2025-09-25 16:01:00 +00:00
commit 5ddc52658d
149 changed files with 32798 additions and 0 deletions
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -0,0 +1,143 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Search, MapPin, Home, Utensils, Calendar, ShoppingBag, Building, Dumbbell } from "lucide-react";
+import heroImage from "@/assets/hero-beach.jpg";
+
+const HeroSection = () => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [location, setLocation] = useState("");
+
+  const categories = [
+    {
+      icon: <Home className="w-8 h-8" />,
+      title: "Appartment",
+      count: "99+",
+      description: "listings"
+    },
+    {
+      icon: <Utensils className="w-8 h-8" />,
+      title: "Restaurant",
+      count: "55+",
+      description: "listings"
+    },
+    {
+      icon: <Calendar className="w-8 h-8" />,
+      title: "Events/Arts",
+      count: "55+",
+      description: "listings"
+    },
+    {
+      icon: <ShoppingBag className="w-8 h-8" />,
+      title: "Shops",
+      count: "80+",
+      description: "listings"
+    },
+    {
+      icon: <Building className="w-8 h-8" />,
+      title: "Museum",
+      count: "96+",
+      description: "listings"
+    },
+    {
+      icon: <Dumbbell className="w-8 h-8" />,
+      title: "Gymnasiums",
+      count: "21+",
+      description: "listings"
+    }
+  ];
+
+  return (
+    <section 
+      className="relative min-h-screen flex items-center justify-center"
+      style={{
+        backgroundImage: `url(${heroImage})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat'
+      }}
+    >
+      {/* Background Overlay */}
+      <div className="absolute inset-0 bg-black/40"></div>
+
+      {/* Content */}
+      <div className="relative z-10 w-full max-w-6xl mx-auto px-4 text-center">
+        {/* Header Badge */}
+        <div className="mb-8">
+          <div className="inline-flex items-center px-4 py-2 rounded-full text-white/90 text-sm font-medium mb-6 bg-white/10 backdrop-blur-sm">
+            WE ARE #1 ON THE MARKET
+          </div>
+        </div>
+
+        {/* Main Heading */}
+        <div className="mb-12">
+          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight">
+            We're Here To Help You{" "}
+            <span className="italic underline decoration-4" style={{textDecorationColor: '#F84525'}}>Navigate</span>{" "}
+            While Traveling
+          </h1>
+          <p className="text-xl md:text-2xl text-white/90 max-w-3xl mx-auto leading-relaxed">
+            You'll get comprehensive results based on the provided location.
+          </p>
+        </div>
+
+        {/* Search Bar */}
+        <div className="max-w-4xl mx-auto mb-16">
+          <div className="flex flex-col md:flex-row gap-4 bg-white/10 backdrop-blur-md rounded-2xl p-4">
+            <div className="flex-1 relative">
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-600 w-5 h-5" />
+              <Input
+                placeholder="What are you looking for?"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-12 bg-white border-0 text-gray-700 placeholder:text-gray-500 h-14 text-lg rounded-xl"
+              />
+            </div>
+            <div className="flex-1 relative">
+              <MapPin className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-600 w-5 h-5" />
+              <Input
+                placeholder="Location"
+                value={location}
+                onChange={(e) => setLocation(e.target.value)}
+                className="pl-12 bg-white border-0 text-gray-700 placeholder:text-gray-500 h-14 text-lg rounded-xl"
+              />
+            </div>
+            <Button 
+              className="h-14 px-8 text-lg font-semibold rounded-xl text-white hover:opacity-90"
+              style={{backgroundColor: '#F84525'}}
+            >
+              Search places
+            </Button>
+          </div>
+        </div>
+
+        {/* Category Cards Grid */}
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl mx-auto">
+          {categories.map((category, index) => (
+            <div
+              key={index}
+              className="bg-white/10 backdrop-blur-md rounded-2xl p-6 text-center text-white cursor-pointer hover:bg-white/20 transition-all duration-300 group"
+            >
+              <div className="flex items-center justify-start gap-4">
+                <div 
+                  className="p-3 rounded-full group-hover:scale-110 transition-transform duration-300"
+                  style={{backgroundColor: '#F84525'}}
+                >
+                  {category.icon}
+                </div>
+                <div className="text-left">
+                  <h3 className="font-semibold text-lg mb-1">{category.title}</h3>
+                  <div className="font-bold text-sm" style={{color: '#F84525'}}>
+                    {category.count} {category.description}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;