mapbox-grid-block

1"use client"
2 
3import { MapboxPointer } from "@/components/ui/mapbox-pointer"
4 
5export default function MapboxGridBlockPage() {
6  return (
7    <div className="bg-background flex min-h-screen w-full items-center justify-center">
8      <div className="mx-auto w-full max-w-7xl p-6">
9        <div className="space-y-8">
10          <div className="space-y-4 text-center">
11            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
12              Where we're cooking
13            </h1>
14            <p className="text-muted-foreground mx-auto max-w-2xl text-base sm:text-lg">
15              Building the future from three world-class innovation hubs
16            </p>
17          </div>
18 
19          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
20            {/* New York City */}
21            <div className="space-y-3">
22              <MapboxPointer
23                latitude={40.7128}
24                longitude={-74.006}
25                zoom={11}
26                markerColor="#679BFF"
27                className="aspect-square w-full"
28                label="New York City, USA"
29                interactive={false}
30              />
31            </div>
32 
33            {/* SF Bay Area */}
34            <div className="space-y-3">
35              <MapboxPointer
36                latitude={37.7749}
37                longitude={-122.4194}
38                zoom={11}
39                markerColor="#679BFF"
40                className="aspect-square w-full"
41                label="San Francisco, USA"
42                interactive={false}
43              />
44            </div>
45 
46            {/* London */}
47            <div className="space-y-3">
48              <MapboxPointer
49                latitude={51.5074}
50                longitude={-0.1278}
51                zoom={11}
52                markerColor="#679BFF"
53                className="aspect-square w-full"
54                label="London, United Kingdom"
55                interactive={false}
56              />
57            </div>
58          </div>
59        </div>
60      </div>
61    </div>
62  )
63}