features components

src/components/details/highlights.tsx

@@ -0,0 +1,26 @@
+import { Star, MapPin } from "lucide-react";
+
+export function Highlights() {
+    return (
+        <div className="space-y-6 pb-8 border-b-2 border-gray-100">
+            <div className="flex gap-4 items-start">
+                <div className="p-2 border-2 border-black bg-[#E7FE78]">
+                    <Star className="w-6 h-6" />
+                </div>
+                <div>
+                    <h3 className="font-medium text-lg">Top rated host</h3>
+                    <p className="text-gray-600 text-sm">John has received 5-star ratings from 95% of recent guests.</p>
+                </div>
+            </div>
+            <div className="flex gap-4 items-start">
+                <div className="p-2 border-2 border-black bg-white">
+                    <MapPin className="w-6 h-6" />
+                </div>
+                <div>
+                    <h3 className="font-medium text-lg">Great location</h3>
+                    <p className="text-gray-600 text-sm">100% of recent guests gave the location a 5-star rating.</p>
+                </div>
+            </div>
+        </div>
+    );
+}