Newer
Older
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React from "react";
import Button from "./Button";
import ButtonCard from "./ButtonCard";
interface Service {
title: string;
subtitle: string;
icon: string;
}
interface Action {
title: string;
to: string;
}
interface Props {
title: string;
subtitle: string;
description: string;
action: Action;
services: Array<Service>;
}
const Hero = (props: Props) => {
// Data structure (default value)
const {
title = "eGEO Project",
subtitle = "Hub géospatial collaboratif",
description = "Solution Open Source sur-mesure pour communiquer et valoriser les données disponibles sur votre territoire ou vos infrastructures.",
action = {
title: "Découvres nos cartes interactives",
to: "#",
},
services = [
{
title: "Datastore",
subtitle: "Accédez à votre catalogue de données.",
icon: "../images/hero/datastore.png",
to: "#",
},
{
title: "Map",
subtitle:
"Consulter, gérer, mettre à jour et diffuser vos contenus cartographiques.",
icon: "../images/hero/datastore.png",
to: "#",
},
{
title: "Dataviz",
subtitle: "Croisez et mettez en forme vos données.",
icon: "../images/hero/datastore.png",
to: "#",
},
{
title: "Contrib",
subtitle: "Validez et collectez vos informations.",
icon: "../images/hero/datastore.png",
to: "#",
},
],
} = props;
return (
<div className="hero min-h-screen bg-[url('../images/fond.png')]">
{/* <div className="hero-overlay bg-opacity-60"></div> */}
<div className="hero-content text-center text-neutral-content">
<div className="max-w-4xl">
<h1 className="mb-5 text-3xl lg:text-6xl font-extrabold tracking-tight">
{title}
<div className="text-primary">{subtitle}</div>
</h1>
<p className="mb-10">{description}</p>
{action ? (
<Button className="btn-primary text-white" {...action} />
) : null}
</div>
</div>
<div className="row-start-2 flex flex-col lg:flex-row gap-6 mx-6">
{services && services.map((service) => <ButtonCard {...service} />)}
</div>
<div className="row-start-3"> </div>
</div>
);
};
export default Hero;