diff --git a/components/ImageAndText.js b/components/ImageAndText.js
new file mode 100644
index 0000000..8e0416e
--- /dev/null
+++ b/components/ImageAndText.js
@@ -0,0 +1,57 @@
+function Button({ text, ...props }) {
+ return (
+ <a
+ className="inline-block py-2 px-5 mt-4 text-lg font-bold border-2 transition-colors duration-200 ease-in-out hover:bg-white focus:bg-white bg-secondary border-secondary text-tertiary hover:border-quinary hover:text-quinary focus:border-quinary focus:text-quinary"
+ href="#0"
+ >
+ {text}
+ </a>
+ );
+}
+
+export default function ImageAndText({
+ buttonText,
+ children,
+ imageUrl,
+ title,
+ ...props
+}) {
+ return (
+ <>
+ <div data-theme="teal" className="mx-auto max-w-6xl">
+ {/* Themes: blue, purple, teal */}
+ <h2 className="sr-only">Featured case study</h2>
+ <section className="font-sans text-black">
+ <div className="lg:flex lg:items-center fancy-corners fancy-corners--large fancy-corners--top-left fancy-corners--bottom-right">
+ <div className="flex-shrink-0 self-stretch sm:flex-basis-40 md:flex-basis-50 xl:flex-basis-60">
+ <div className="h-full">
+ <article className="h-full">
+ <div className="h-full">
+ <img
+ className="object-cover h-full"
+ src={imageUrl}
+ width="733"
+ height="412"
+ alt='""'
+ typeof="foaf:Image"
+ />
+ </div>
+ </article>
+ </div>
+ </div>
+
+ <div className="p-6 bg-grey">
+ <div className="leading-relaxed">
+ <h2 className="text-4xl font-bold leading-tight">{title}</h2>
+ <div className="mt-4 markup">{children}</div>
+ <p>
+ <Button text="Explore this event" />
+ </p>
+ </div>
+ </div>
+ </div>
+ </section>
+ </div>
+ </>
+ );
+}
diff --git a/package.json b/package.json
index b5321f1..41bc28d 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
},
"dependencies": {
"next": "12.3.0",
+ "postcss-nested": "^5.0.6",
"react": "18.2.0",
"react-dom": "18.2.0"
},
diff --git a/pages/index.js b/pages/index.js
index 57b69c4..577bdd5 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,58 +1,29 @@
+import ImageAndText from "../components/ImageAndText";
+
export default function Home() {
return (
<div>
<div className="flex flex-col justify-center p-24 min-h-screen bg-white">
- {/* Themes: blue, purple, teal */}
- <div data-theme="blue" className="mx-auto max-w-6xl">
- <h2 className="sr-only">Featured case study</h2>
- <section className="font-sans text-black">
- <div className="lg:flex lg:items-center fancy-corners fancy-corners--large fancy-corners--top-left fancy-corners--bottom-right">
- <div className="flex-shrink-0 self-stretch sm:flex-basis-40 md:flex-basis-50 xl:flex-basis-60">
- <div className="h-full">
- <article className="h-full">
- <div className="h-full">
- <img
- className="object-cover h-full"
- src="https://inviqa.com/sites/default/files/styles/pullout/public/2020-08/XD-1.jpeg?h=f75d236a&itok=PBoXPDmW"
- width="733"
- height="412"
- alt='""'
- typeof="foaf:Image"
- />
- </div>
- </article>
- </div>
- </div>
- <div className="p-6 bg-grey">
- <div className="leading-relaxed">
- <h2 className="text-4xl font-bold leading-tight">
- CXcon: Experience Transformation
- </h2>
- <p className="mt-4">
- Our second CXcon in October was dedicated to experience
- transformation. The free one-day virtual event brought
- together 230+ heads of digital, thought leaders, and UX
- practitioners to discuss all aspects of experience design..
- </p>
- <p className="mt-4">
- In a jam-packed day filled with keynote sessions, panels,
- and virtual networking we explored topics including design
- leadership, UX ethics, designing for emotion and innovation
- at scale.
- </p>
- <p>
- <a
- className="inline-block py-2 px-5 mt-4 text-lg font-bold border-2 transition-colors duration-200 ease-in-out hover:bg-white focus:bg-white bg-secondary border-secondary text-tertiary hover:border-quinary hover:text-quinary focus:border-quinary focus:text-quinary"
- href="https://inviqa.com/cxcon-experience-transformation"
- >
- Explore this event
- </a>
- </p>
- </div>
- </div>
- </div>
- </section>
- </div>
+ <ImageAndText
+ buttonText={"Explore this event"}
+ imageUrl={
+ "https://inviqa.com/sites/default/files/styles/pullout/public/2020-08/XD-1.jpeg?h=f75d236a&itok=PBoXPDmW"
+ }
+ title={"CXcon: Experience Transformation"}
+ >
+ <p>
+ Our second CXcon in October was dedicated to experience
+ transformation. The free one-day virtual event brought together
+ 230+ heads of digital, thought leaders, and UX practitioners to
+ discuss all aspects of experience design..
+ </p>
+
+ <p>
+ In a jam-packed day filled with keynote sessions, panels, and
+ virtual networking we explored topics including design leadership,
+ UX ethics, designing for emotion and innovation at scale.
+ </p>
+ </ImageAndText>
</div>
</div>
);
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..ab92d07 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,6 @@
module.exports = {
plugins: {
+ 'postcss-nested': {},
tailwindcss: {},
autoprefixer: {},
},
diff --git a/styles/globals.css b/styles/globals.css
index 878fcbb..e1d9960 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -3,6 +3,12 @@
@tailwind utilities;
@layer components {
+ .markup {
+ * + * {
+ @apply mt-4;
+ }
+ }
+
.fancy-corners {
position: relative;
background-color: #fff;
@@ -14,7 +20,7 @@
position: absolute;
width: 8em;
height: 8em;
- background-color: theme('colors.primary');
+ background-color: theme("colors.primary");
background-size: 100% 100%;
background-position: 0 0;
transform: translateZ(-1px);