feat: demonstrate shared component architecture

src/components/Duck/Duck.module.css

@@ -0,0 +1,86 @@
+@reference '../../styles/globals.css';
+
+.duck {
+	display: block;
+	width: 100%;
+	height: 100%;
+	overflow: visible;
+}
+
+.shadow {
+	fill: rgba(0, 0, 0, 0.14);
+}
+
+.body {
+	stroke: rgba(120, 120, 120, 0.28);
+	stroke-width: 1;
+}
+
+.wing {
+	fill: rgba(0, 0, 0, 0.07);
+}
+
+.beak {
+	fill: #e8893f;
+}
+
+.eye {
+	fill: #15151a;
+}
+
+/* accessories hidden by default; one is revealed per store */
+.monocle,
+.shades,
+.hat {
+	display: none;
+}
+
+.monocle circle,
+.monocle line {
+	stroke: #c9a86a;
+	stroke-width: 1.3;
+	fill: none;
+}
+
+.shades rect {
+	fill: #0a0a0a;
+}
+
+.shades line {
+	stroke: #0a0a0a;
+	stroke-width: 2;
+}
+
+.hat rect,
+.hat ellipse {
+	fill: #fff;
+	stroke: rgba(0, 0, 0, 0.08);
+	stroke-width: 1;
+}
+
+@store executive {
+	.beak {
+		fill: #c9a86a;
+	}
+	.monocle {
+		display: block;
+	}
+}
+
+@store crypto {
+	.duck {
+		filter: drop-shadow(0 0 7px var(--color-accent));
+	}
+	.beak {
+		fill: var(--color-accent);
+	}
+	.shades {
+		display: block;
+	}
+}
+
+@store supper {
+	.hat {
+		display: block;
+	}
+}