Skip to content

feat: alt landing page layout #2069

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

feat: alt landing page layout #2069

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1109180
feat: alt landing page
christiannwamba Mar 18, 2025
7f07d7d
chore: format
christiannwamba Mar 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 5 additions & 10 deletions docs/welcome.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: welcome
title: Welcome to Ory!
title: Welcome to Ory
sidebar_label: Introduction
slug: welcome
---
Expand All @@ -10,17 +10,12 @@ Find all the guides and resources you need to develop with Ory.
```mdx-code-block
import WelcomeCard from "@site/src/components/WelcomeCard/welcome-card";
import * as welcomeContent from "@site/src/pages/_assets/welcome-content";
import ExampleList from "@site/src/components/Examples/example-list"
import * as content from "@site/src/pages/_assets/examples-content"

<WelcomeCard {...welcomeContent.mainFeatures} />
<WelcomeCard {...welcomeContent.useOryCards} />
<WelcomeCard {...welcomeContent.authenticationCards} />

<WelcomeCard {...welcomeContent.features} />
<WelcomeCard {...welcomeContent.oauthCards} />

<WelcomeCard {...welcomeContent.frontendFrameworks} />
<WelcomeCard {...welcomeContent.permissionCards} />

<WelcomeCard {...welcomeContent.backendFrameworks} />


<ExampleList {...content.community} />
```
230 changes: 108 additions & 122 deletions src/components/WelcomeCard/welcome-card.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,81 @@
/* Section Styles */
.section {
max-width: var(--ifm-container-width-xl);
margin: 0 auto;
padding: 3rem 0;
/* Container for all welcome sections */
.welcomeContainer {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 1rem;
}

/* Section Styles */

.sectionHeading {
margin-bottom: 2.5rem;
width: 250px;
margin-right: 1.5rem;
margin-bottom: 1.5rem;
margin-top: 3rem;
}

.sectionTitle {
font-size: var(--ifm-h2-font-size);
margin-bottom: 0.75rem;
font-size: var(--ifm-h3-font-size);
margin-bottom: 0.5rem;
}

.sectionDescription {
font-size: var(--ifm-font-size-lg);
margin-bottom: 0;
color: var(--ifm-color-emphasis-700);
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

/* Card Grid */
/* Card Grid - Grid layout */
.cardGrid {
display: grid;
gap: 2rem;
grid-template-columns: 1fr;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
flex: 1;
}

@media screen and (min-width: 600px) {
.cardGrid {
/* Apply specific grid layouts for each section */
#authentication-section .cardGrid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

#oauth-section .cardGrid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

#permission-section .cardGrid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

#use-ory-section .cardGrid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Responsive adjustments for specific sections */
@media screen and (min-width: 992px) {
#authentication-section .cardGrid {
grid-template-columns: repeat(3, 1fr);
}

#oauth-section .cardGrid {
grid-template-columns: repeat(2, 1fr);
}

#permission-section .cardGrid {
grid-template-columns: repeat(2, 1fr);
}

#use-ory-section .cardGrid {
grid-template-columns: repeat(3, 1fr);
}
}

@media screen and (min-width: 996px) {
.cardGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
@media screen and (min-width: 1200px) {
#authentication-section .cardGrid {
grid-template-columns: repeat(6, 1fr);
}
}

Expand All @@ -51,95 +88,37 @@
height: 100%;
}

.cardLink:hover .cardLarge {
transform: translateY(-4px);
}

.cardLink:hover .card:not(.cardLarge) {
transform: translateX(4px);
}

/* Base Card Styles */
.card {
height: 100%;
height: 200px; /* Fixed height for all cards */
position: relative;
transition: all 0.2s ease;
}

/* Large Card (feature card) - Column layout */
.cardLarge {
background-color: var(--ifm-pre-background);
border-radius: 8px;
padding: 1.5rem;
display: flex;
flex-direction: column;
border: 1px solid var(--ifm-color-emphasis-200);
width: 100%;
overflow: hidden;
}

.cardLarge:hover {
border-color: var(--ifm-color-emphasis-300);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

/* Framework Card (non-large) - Row layout */
.card:not(.cardLarge) {
background-color: transparent;
border: none;
padding: 1rem 0;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1rem;
}

/* Grid span for large cards */
.cardLarge {
grid-column: span 1;
}

@media screen and (min-width: 600px) {
.cardLarge {
grid-column: span 2;
}
}

@media screen and (min-width: 996px) {
.cardLarge {
grid-column: span 3;
}
.card:hover {
border-color: var(--ifm-color-primary);
transform: translateY(-4px);
}

/* Icon Container */
.iconContainer {
display: flex;
align-items: center;
justify-content: center;
}

/* Icon Container for Large cards */
.cardLarge .iconContainer {
background-color: var(--ifm-color-emphasis-100);
border-radius: 8px;
padding: 0.75rem;
width: 60px;
height: 60px;
margin-bottom: 1.25rem;
}

/* Icon Container for Framework cards */
.card:not(.cardLarge) .iconContainer {
background-color: var(--ifm-color-emphasis-200);
border-radius: 8px;
padding: 0.75rem;
width: 40px;
height: 40px;
margin-bottom: 0;
transition: all 0.2s ease;
}

/* Icon container hover effect */
.cardLink:hover .card:not(.cardLarge) .iconContainer {
background-color: var(--ifm-color-emphasis-300);
padding: 0.5rem;
width: 36px;
height: 36px;
margin-bottom: 1rem;
}

/* Icon */
Expand All @@ -158,55 +137,62 @@

/* Card Title */
.cardTitle {
margin-bottom: 0.5rem;
margin-bottom: 0.25rem;
font-weight: 600;
}

/* Large Card Title */
.cardLarge .cardTitle {
font-size: var(--ifm-h3-font-size);
}

/* Framework Card Title */
.card:not(.cardLarge) .cardTitle {
color: var(--ifm-color-primary);
font-size: var(--ifm-h5-font-size);
transition: color 0.2s ease;
}

.cardLink:hover .card:not(.cardLarge) .cardTitle {
color: var(--ifm-color-primary-darker);
font-size: 1rem;
}

/* Card Description */
.cardDescription {
margin-bottom: 0;
color: var(--ifm-color-emphasis-700);
line-height: 1.5;
line-height: 1.4;
font-size: 0.875rem;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* Large Card Description */
.cardLarge .cardDescription {
font-size: var(--ifm-font-size-base);
/* Dark mode styling for cards */
:global([data-theme="dark"]) .card {
background-color: #1a1a2e;
border-color: #2a2a4a;
}

/* Framework Card Description */
.card:not(.cardLarge) .cardDescription {
font-size: 0.875rem;
:global([data-theme="dark"]) .iconContainer {
background-color: rgba(255, 255, 255, 0.1);
}

/* Card Arrow (only for large cards) */
.cardArrow {
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
font-size: 1.25rem;
opacity: 0;
transform: translateX(-8px);
transition: all 0.2s ease;
/* Better visibility for SVG icons in dark mode */
:global([data-theme="dark"]) .iconContainer svg {
stroke-width: 2.5;
filter: brightness(1.3);
}

.cardLink:hover .cardArrow {
opacity: 1;
transform: translateX(0);
/* Mobile view adjustments */
@media screen and (max-width: 768px) {
.section {
flex-direction: column;
}

.sectionHeading {
width: 100%;
margin-right: 0;
}

.cardGrid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
width: 100%;
}

.card {
height: 180px;
padding: 1.25rem;
}

.cardDescription {
-webkit-line-clamp: 4;
}
}
Loading
Loading