1
import React from 'react';
2
import { Heart, MessageCircle, Plus } from 'lucide-react';
3
 
4
const LocalsHomepage = () => {
5
  return (
6
    <div className="max-w-sm mx-auto bg-white rounded-xl overflow-hidden shadow-lg">
7
      <div className="p-4">
8
        <div className="flex items-center justify-between">
9
          <h1 className="text-2xl font-bold">Locals</h1>
10
          <button className="p-2 bg-gray-100 rounded-full">
11
            <Plus className="w-6 h-6" />
12
          </button>
13
        </div>
14
 
15
        <div className="mt-4">
16
          <div className="relative rounded-xl overflow-hidden">
17
            <img
18
              src="/path/to/jools_image.jpg"
19
              alt="picsbyjools"
20
              className="w-full object-cover"
21
            />
22
 
23
            <div className="absolute top-0 left-0 bg-gradient-to-b from-transparent to-black opacity-60 w-full h-full"></div>
24
 
25
            <div className="absolute bottom-4 left-4 text-white">
26
              <h2 className="text-xl font-semibold">picsbyjools</h2>
27
              <div className="flex items-center gap-4 text-sm">
28
                <div className="flex items-center gap-1">
29
                  <Heart className="w-4 h-4" />
30
                  <span>2.4k</span>
31
                </div>
32
                <div className="flex items-center gap-1">
33
                  <MessageCircle className="w-4 h-4" />
34
                  <span>comments</span>
35
                </div>
36
              </div>
37
            </div>
38
          </div>
39
        </div>
40
 
41
        <div className="mt-4 overflow-x-auto">
42
          <div className="flex gap-3">
43
            {['ALL', 'Emily', 'Sarah', 'Carlos'].map((name, idx) => (
44
              <div key={idx} className="flex-shrink-0 text-center">
45
                <div className="w-14 h-14 bg-gray-200 rounded-full"></div>
46
                <span className="text-xs">{name}</span>
47
              </div>
48
            ))}
49
          </div>
50
        </div>
51
 
52
        <div className="mt-6 flex justify-between items-center text-gray-500">
53
          <button className="flex flex-col items-center">
54
            <span>Explore</span>
55
          </button>
56
          <button className="flex flex-col items-center text-orange-500">
57
            <span>Community</span>
58
          </button>
59
          <button className="flex flex-col items-center">
60
            <span>Favourites</span>
61
          </button>
62
          <button className="flex flex-col items-center">
63
            <span>Account</span>
64
          </button>
65
        </div>
66
      </div>
67
    </div>
68
  );
69
};
70
 
71
export default LocalsHomepage;