zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design Updates (#379)

Browse Source 
* Enhance Marketing Pages and UI Components

- Updated the marketing homepage to include an Ecosystem Showcase component, improving the presentation of the SaaS Starter Kit.
- Refined various UI components, including adjustments to spacing, typography, and layout for better visual consistency.
- Improved accessibility by adding aria-labels and ensuring proper semantic structure in components.
- Adjusted styles across multiple components to enhance responsiveness and user experience.
- Updated the pricing table and feature cards to align with the new design standards, ensuring a cohesive look and feel throughout the application.
- Updated plan picker design
This commit is contained in:
Giancarlo Buomprisco
2025-10-02 15:14:11 +08:00
committed by GitHub
parent d8bb7f56df
commit 54d6b4897f
56 changed files with 1014 additions and 1142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
apps/web/styles/markdoc.css
View File

@@ -6,137 +6,138 @@
*/
.markdoc {
@apply text-foreground;
@apply text-foreground;
}
.markdoc h1 {
@apply mt-8 lg:mt-14 text-4xl font-semibold font-heading tracking-tight dark:text-white text-foreground;
@apply font-heading text-foreground text-3xl font-medium tracking-tight lg:mt-14 dark:text-white;
}
.markdoc h2 {
@apply mb-3 lg:mb-6 mt-6 lg:mt-12 font-semibold text-2xl font-heading tracking-tight dark:text-white text-foreground;
@apply font-heading text-foreground text-2xl font-medium tracking-tight lg:mt-6 lg:mb-3 dark:text-white;
}
.markdoc h3 {
@apply mt-6 lg:mt-12 text-xl font-semibold font-heading tracking-tight dark:text-white text-foreground;
@apply font-heading text-foreground text-xl font-medium tracking-tight lg:mt-12 dark:text-white;
}
.markdoc h4 {
@apply mt-4 lg:mt-8 text-lg font-medium tracking-tight dark:text-white text-foreground;
@apply text-foreground mt-4 text-lg font-medium tracking-tight lg:mt-8 dark:text-white;
}
.markdoc h5 {
@apply mt-3 lg:mt-6 text-base font-medium tracking-tight dark:text-white text-foreground;
@apply text-foreground mt-3 text-base font-medium tracking-tight lg:mt-6 dark:text-white;
}
.markdoc h6 {
@apply mt-2 text-sm font-normal tracking-tight dark:text-white text-foreground;
@apply text-foreground mt-2 text-sm font-normal tracking-tight dark:text-white;
}
.markdoc p {
@apply mb-3 lg:mb-6 mt-2 lg:mt-4 text-base leading-7 text-muted-foreground;
@apply text-muted-foreground my-3 text-base leading-7;
}
.markdoc li {
@apply relative my-1.5 text-base leading-7 text-muted-foreground;
@apply text-muted-foreground relative my-0.5 text-base leading-7;
}
.markdoc ul > li:before {
content: '-';
content: '-';
@apply mr-2;
@apply mr-2;
}
.markdoc ol > li:before {
@apply inline-flex font-medium text-muted-foreground;
@apply text-secondary-foreground inline-flex font-medium;
content: counters(counts, '.') '. ';
font-feature-settings: 'tnum';
content: counters(counts, '.') '. ';
font-feature-settings: 'tnum';
}
.markdoc b,
.markdoc strong {
@apply font-semibold text-secondary-foreground dark:text-white;
@apply text-secondary-foreground font-semibold dark:text-white;
}
.markdoc img,
.markdoc video {
@apply rounded-md;
@apply rounded-md;
}
.markdoc ul,
.markdoc ol {
@apply pl-1;
@apply pl-1;
}
.markdoc ol > li {
counter-increment: counts;
counter-increment: counts;
}
.markdoc ol > li:before {
@apply mr-2 inline-flex font-semibold;
@apply mr-2 inline-flex font-semibold;
content: counters(counts, '.') '. ';
font-feature-settings: 'tnum';
content: counters(counts, '.') '. ';
font-feature-settings: 'tnum';
}
.markdoc p > code, .markdoc li > code {
@apply p-0.5 text-sm font-semibold bg-muted/50 border font-mono text-secondary-foreground;
.markdoc p > code,
.markdoc li > code {
@apply bg-muted/50 text-secondary-foreground border p-0.5 font-mono text-sm font-semibold;
}
.markdoc pre {
@apply overflow-x-auto bg-muted/50 rounded-md border border-border p-4 text-sm font-mono text-foreground;
@apply bg-muted/50 border-border text-foreground my-4 overflow-x-auto rounded-md border p-4 font-mono text-sm;
}
.markdoc blockquote {
@apply my-4 border-l-8 border border-primary px-6 py-4 text-lg font-medium text-muted-foreground;
@apply border-primary text-muted-foreground my-4 border border-l-8 px-6 py-4 text-lg font-medium;
}
.markdoc a {
@apply border-b-black border-b hover:border-b-2 pb-0.5 text-secondary-foreground font-semibold dark:border-yellow-300;
@apply text-secondary-foreground border-b border-b-black pb-0.5 font-semibold hover:border-b-2 dark:border-yellow-300;
}
.markdoc hr {
@apply mt-8 mb-6 border-border;
@apply border-border mt-8 mb-6;
}
.markdoc [role='alert'] {
@apply py-4 m-0 my-8;
@apply m-0 my-8 py-4;
}
.markdoc [role='alert'] * {
color: inherit;
@apply m-0 p-0 text-sm;
color: inherit;
@apply m-0 p-0 text-sm;
}
.markdoc [role='alert'] h5 {
color: inherit;
color: inherit;
}
.markdoc table {
@apply w-full caption-bottom text-sm my-4;
@apply my-4 w-full caption-bottom text-sm;
}
.markdoc th {
@apply [&_tr]:border-b;
@apply [&_tr]:border-b;
}
.markdoc tbody {
@apply [&_tr:last-child]:border-0;
@apply [&_tr:last-child]:border-0;
}
.markdoc tfoot {
@apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;
@apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;
}
.markdoc tr {
@apply data-[state=selected]:bg-muted border-b transition-colors;
@apply data-[state=selected]:bg-muted border-b transition-colors;
}
.markdoc th {
@apply text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
@apply text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
}
.markdoc td {
@apply p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
}
@apply p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
}