diff --git a/resources/css/components/card-container.css b/resources/css/components/card-container.css
new file mode 100644
index 0000000..9693e55
--- /dev/null
+++ b/resources/css/components/card-container.css
@@ -0,0 +1,11 @@
+.card-container {
+  @apply grid 
+	grid-cols-1 
+	sm:grid-cols-2 
+	xl:grid-cols-4 
+	max-w-screen-2xl 
+	px-8
+	py-16
+	gap-8
+	mx-auto;
+}
diff --git a/resources/css/components/heading-box.css b/resources/css/components/heading-box.css
new file mode 100644
index 0000000..881d652
--- /dev/null
+++ b/resources/css/components/heading-box.css
@@ -0,0 +1,15 @@
+.heading-box {
+  @apply bg-primary text-white text-center py-12 max-w-screen-xl mx-auto
+	mt-8 rounded-2xl relative pt-20;
+  &__title {
+    @apply uppercase font-medium text-xl tracking-widest;
+  }
+  &__description {
+    @apply font-bold text-4xl max-w-screen-md mx-auto pt-4 max-w-md mx-auto;
+    line-height: 1.2;
+  }
+  &__page-icon {
+    @apply mx-auto w-28 absolute top-0 left-1/2;
+    transform: translate(-50%, -50%);
+  }
+}