Photo

1export interface PhotoProps {
2  image?: string;
3  label: string;
4  title: string;
5  brand: string;
6  logo?: string;
7}
8 
9export const Photo = ({
10  image,
11  label,
12  title,
13  brand,
14  logo = "",
15}: PhotoProps) => {
16  const fallback =
17    "linear-gradient(135deg, #0f172a 0%, #1e3a8a 45%, #7c3aed 100%)";
18 
19  return (
20    <div
21      style={{
22        backgroundColor: "#0a0a0a",
23        backgroundImage: image ? `url(${image})` : fallback,
24        backgroundPosition: "center",
25        backgroundSize: "1200px 630px",
26        color: "#ffffff",
27        display: "flex",
28        flexDirection: "column",
29        height: "100%",
30        justifyContent: "flex-end",
31        padding: "80px",
32        position: "relative",
33        width: "100%",
34      }}
35    >
36      <div
37        style={{
38          backgroundImage:
39            "linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.85) 100%)",
40          bottom: 0,
41          left: 0,
42          position: "absolute",
43          right: 0,
44          top: 0,
45        }}
46      />
47 
48      <div
49        style={{
50          alignSelf: "flex-start",
51          backgroundColor: "rgba(255,255,255,0.12)",
52          border: "1px solid rgba(255,255,255,0.4)",
53          borderRadius: "999px",
54          display: "flex",
55          fontSize: "26px",
56          fontWeight: 600,
57          letterSpacing: "0.04em",
58          padding: "10px 22px",
59          textTransform: "uppercase",
60        }}
61      >
62        {label}
63      </div>
64 
65      <div
66        style={{
67          display: "flex",
68          fontSize: title.length > 36 ? 72 : 88,
69          fontWeight: 700,
70          letterSpacing: "-0.03em",
71          lineHeight: 1.02,
72          marginTop: "28px",
73          maxWidth: "1000px",
74          textShadow: "0 2px 24px rgba(0,0,0,0.5)",
75        }}
76      >
77        {title}
78      </div>
79 
80      <div
81        style={{
82          alignItems: "center",
83          display: "flex",
84          gap: "12px",
85          marginTop: "32px",
86        }}
87      >
88        {logo ? (
89          <img
90            alt=""
91            height={36}
92            src={logo}
93            width={36}
94            style={{
95              borderRadius: "8px",
96              objectFit: "contain",
97            }}
98          />
99        ) : (
100          <div
101            style={{
102              alignItems: "center",
103              backgroundColor: "rgba(255,255,255,0.2)",
104              borderRadius: "8px",
105              color: "#ffffff",
106              display: "flex",
107// … truncated