diff --git a/app/components/Services.tsx b/app/components/Services.tsx new file mode 100644 index 0000000..070b648 --- /dev/null +++ b/app/components/Services.tsx @@ -0,0 +1,82 @@ +import Image from "next/image"; + +const services = [ + { + number: "1", + title: "Brand Discovery", + description: + "Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.", + image: "/service-1.jpg", + }, + { + number: "2", + title: "Web design & Dev", + description: + "Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.", + image: "/service-2.jpg", + }, + { + number: "3", + title: "Marketing", + description: + "Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.", + image: "/service-3.jpg", + }, + { + number: "4", + title: "Photography", + description: + "Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.", + image: "/service-4.jpg", + }, +]; + +export function Services() { + return ( +
+ {/* Label */} + + [ services ] + + + {/* "[4] DELIVERABLES" heading */} +
+ [4] + Deliverables +
+ + {/* Service list */} +
+ {services.map((service) => ( +
+ {/* Number + divider */} + + [ {service.number} ] + +
+ + {/* Title + description + image */} +
+

+ {service.title} +

+
+

+ {service.description} +

+
+ {service.title} +
+
+
+
+ ))} +
+
+ ); +} diff --git a/app/page.tsx b/app/page.tsx index c213d4f..774933f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,6 +2,7 @@ import { Hero } from "./components/Hero"; import { Tagline } from "./components/Tagline"; import { About } from "./components/About"; import { FullbleedImage } from "./components/FullbleedImage"; +import { Services } from "./components/Services"; export default function Home() { return ( @@ -10,6 +11,7 @@ export default function Home() { + ); } diff --git a/public/service-1.jpg b/public/service-1.jpg new file mode 100644 index 0000000..54af59d Binary files /dev/null and b/public/service-1.jpg differ diff --git a/public/service-2.jpg b/public/service-2.jpg new file mode 100644 index 0000000..06532b1 Binary files /dev/null and b/public/service-2.jpg differ diff --git a/public/service-3.jpg b/public/service-3.jpg new file mode 100644 index 0000000..67a9507 Binary files /dev/null and b/public/service-3.jpg differ diff --git a/public/service-4.jpg b/public/service-4.jpg new file mode 100644 index 0000000..4c00bdd Binary files /dev/null and b/public/service-4.jpg differ