app/services/page.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

import Header from "../components/Header";

export const metadata = {
    title: 'Services',
    description: 'Local services that we have here in the Alure Regions',
}

export default function Services() {
    return (
        <main className="flex flex-col">
            <Header title={metadata.title} description={metadata.description} />
            <div>
                <ul>
                    <li>
                        <div className="bg-center bg-no-repeat bg-[url('/regions/alee-isle.webp')] bg-gray-600 bg-blend-multiply">
                            <div className="sm:px-40 px-10 py-14 space-y-2">
                                <h1 className="font-medium sm:text-4xl text-3xl">Alure Post</h1>
                                <h2 className="text-xl">Local and international postal service</h2>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className="bg-center bg-no-repeat bg-[url('/regions/alee-isle.webp')] bg-gray-600 bg-blend-multiply">
                            <div className="sm:px-40 px-10 py-14 space-y-2">
                                <h1 className="font-medium sm:text-4xl text-3xl">ExploreAlure</h1>
                                <h2 className="text-xl">Tourism service</h2>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className="bg-center bg-no-repeat bg-[url('/regions/alee-isle.webp')] bg-gray-600 bg-blend-multiply">
                            <div className="sm:px-40 px-10 py-14 space-y-2">
                                <h1 className="font-medium sm:text-4xl text-3xl">MinePot</h1>
                                <h2 className="text-xl">International restaurant</h2>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className="bg-center bg-no-repeat bg-[url('/regions/alee-isle.webp')] bg-gray-600 bg-blend-multiply">
                            <div className="sm:px-40 px-10 py-14 space-y-2">
                                <h1 className="font-medium sm:text-4xl text-3xl">Intel Computer Shop</h1>
                                <h2 className="text-xl">International computer shop</h2>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className="bg-center bg-no-repeat bg-[url('/regions/alee-isle.webp')] bg-gray-600 bg-blend-multiply">
                            <div className="sm:px-40 px-10 py-14 space-y-2">
                                <h1 className="font-medium sm:text-4xl text-3xl">Gigabit Mall</h1>
                                <h2 className="text-xl">Commercial shopping mall</h2>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className="bg-center bg-no-repeat bg-[url('/regions/alee-isle.webp')] bg-gray-600 bg-blend-multiply">
                            <div className="sm:px-40 px-10 py-14 space-y-2">
                                <h1 className="font-medium sm:text-4xl text-3xl">Bill Gates Hospital</h1>
                                <h2 className="text-xl">Hospital</h2>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </main>
    )
}