feat: implement screendesign

assets/styles/components/pagination.css

@@ -0,0 +1,60 @@
+:root {
+    --pagination-skew: 2rem;
+    --pagination-border-width: 1px;
+}
+
+.pagination {
+    @apply flex h-12 lg:h-16 overflow-hidden bg-primary-bg shadow-md;
+}
+
+.pagination-item {
+    flex: 1 1 0;
+    margin-right: calc(-1 * var(--pagination-skew));
+    @apply relative;
+}
+
+.pagination-item:last-child {
+    @apply mr-0;
+}
+
+/* Outer clip-path for button shape */
+.pagination-item:first-child {
+    clip-path: polygon(0 0, calc(100% - var(--pagination-skew)) 0, 100% 100%, 0 100%);
+}
+
+.pagination-item:not(:first-child):not(:last-child) {
+    clip-path: polygon(0 0, calc(100% - var(--pagination-skew)) 0, 100% 100%, var(--pagination-skew) 100%);
+}
+
+.pagination-item:last-child {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pagination-skew) 100%);
+}
+
+/* Border and content wrappers */
+.pagination-item__border {
+    @apply w-full h-full flex items-center justify-center bg-primary-dark/10;
+}
+
+.pagination-item__inner {
+    @apply w-full h-full flex items-center justify-center;
+    @apply lg:text-2xl font-bold;
+}
+
+a.pagination-item__border > .pagination-item__inner:hover {
+    @apply bg-primary-light text-white;
+}
+
+/* Inner clip-path for border effect */
+.pagination-item:first-child .pagination-item__inner {
+    clip-path: polygon(0 0, calc(100% - var(--pagination-skew)) 0, 100% 100%, 0 100%);
+}
+
+.pagination-item:not(:first-child) .pagination-item__inner {
+    /* No left/bottom-left border on overlapping edge to prevent double borders */
+    clip-path: polygon(0 0, calc(100% - var(--pagination-skew) - var(--pagination-border-width)) 0, calc(100% - var(--pagination-border-width)) 100%, var(--pagination-skew) 100%);
+}
+
+.pagination-item:last-child .pagination-item__inner {
+    /* No left/bottom-left border on overlapping edge, no right border */
+    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pagination-skew) 100%);
+}