Skip to content

Commit 4e7cb32

Browse files
PoojaB26PoojaB26
committed
update card ui for info cards / feature cards
1 parent dd86b08 commit 4e7cb32

File tree

5 files changed

+110
-43
lines changed

5 files changed

+110
-43
lines changed

‎docs/index.md

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,28 @@ FlutterFlow is a visual development environment that lets you build mobile, web,
4141

4242
### FlutterFlow Tour
4343

44-
<div class="video-container"><iframe src="https://www.youtube.com/embed/GpXjU-ieAKU?si=moIEUUGry24CdSJN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
44+
<div class="video-container"><iframe src="https://www.youtube.com/embed/GpXjU-ieAKU?si=moIEUUGry24CdSJN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
45+
46+
## Key Features
47+
48+
<InfoCards>
49+
<InfoCard
50+
icon="🚀"
51+
title="Build your first app"
52+
description="Learn how everything fits together and our top tips for creating stunning, powerful websites and apps."
53+
pagePath="/quickstart"
54+
isLarge={true}
55+
/>
56+
<InfoCard
57+
icon="🔧"
58+
title="Troubleshooting"
59+
description="Resolve login issues and other known FlutterFlow issues."
60+
pagePath="/troubleshooting"
61+
/>
62+
<InfoCard
63+
icon="🔗"
64+
title="Integrations"
65+
description="Connect to tools like Github, Netlify, Figma, Supabase, Stripe, and more."
66+
pagePath="/ff-integrations"
67+
/>
68+
</InfoCards>

‎src/components/InfoCard/index.module.css

Lines changed: 52 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,89 @@
11
.infoCard {
2-
border: var(--border);
3-
border-radius: 4px;
4-
padding: 30px;
5-
transition: background-color 0.3s, box-shadow 0.3s;
6-
box-sizing: border-box; /* Ensures padding is included in width/height */
7-
box-shadow: none; /* Initial shadow */
2+
border: 1px solid var(--ifm-color-emphasis-200);
3+
border-radius: 8px;
4+
padding: 24px;
5+
transition: all 0.3s ease;
6+
box-sizing: border-box;
7+
background: var(--ifm-background-color);
8+
cursor: pointer;
9+
height: 100%;
10+
display: flex;
11+
flex-direction: column;
12+
}
13+
14+
.largeCard {
15+
grid-column: span 2; /* Makes the card span 2 columns */
816
}
917

10-
@media (max-width: 768px) { /* For landscape phones and smaller tablets */
18+
@media (max-width: 768px) {
1119
.infoCard {
12-
padding: 20px; /* Smaller padding on smaller screens */
20+
padding: 20px;
21+
}
22+
23+
.largeCard {
24+
grid-column: span 1; /* Reset on mobile */
1325
}
1426
}
1527

1628
.infoCard:hover {
17-
border: var(--selected-border); /* Keep the initial border */
18-
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.8); /* Elevation effect for light mode */
29+
border-color: var(--ifm-color-primary);
30+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
31+
transform: translateY(-2px);
1932
}
2033

2134
@media (prefers-color-scheme: dark) {
35+
.infoCard {
36+
border-color: var(--card-border-light 100%);
37+
}
38+
2239
.infoCard:hover {
23-
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2); /* Elevation effect for dark mode */
40+
border-color: var(--ifm-color-primary);
41+
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
2442
}
2543
}
2644

2745
.infoCardIcon {
2846
font-size: 24px;
29-
margin-bottom: 10px;
47+
margin-right: 12px;
48+
color: var(--ifm-color-primary);
49+
display: flex;
50+
align-items: center;
3051
}
3152

3253
.infoCardTitle {
33-
font-weight: bold;
34-
font-size: 20px;
54+
font-weight: 600;
55+
font-size: 18px;
56+
color: var(--ifm-color-primary);
57+
margin: 0;
3558
}
3659

3760
.titleContainer {
3861
display: flex;
3962
align-items: center;
40-
padding-bottom: 20px;
63+
margin-bottom: 16px;
4164
}
4265

4366
.logo {
44-
height: 1.5em; /* 1em typically equals the font-size of the parent, which is the h2 in this case */
67+
height: 1.5em;
4568
padding-right: 10px;
46-
width: auto; /* Maintain the aspect ratio of the image */
69+
width: auto;
70+
}
71+
72+
.infoCardDescription {
73+
color: var(--ifm-color-content);
74+
font-size: 14px;
75+
line-height: 1.5;
76+
margin: 0;
77+
flex-grow: 1;
4778
}
4879

4980
.infoCardLink {
50-
display: flex;
51-
color: var(--primary-texr);
81+
display: block;
82+
color: inherit;
83+
text-decoration: none;
5284
}
5385

5486
.infoCardLink:hover {
55-
color: var(--primary-texr);
87+
color: inherit;
5688
text-decoration: none;
5789
}

‎src/components/InfoCard/index.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from 'react';
22
import styles from './index.module.css';
33

4-
5-
const InfoCard = ({ icon, title, description, pagePath })=> {
4+
const InfoCard = ({ icon, title, description, pagePath, isLarge = false }) => {
65
return (
7-
<a href={pagePath} className={styles.infoCardLink}> {/* Link the card */}
8-
<div className={styles.infoCard}>
9-
<div className={styles.titleContainer}>
10-
<div className={styles.infoCardTitle}>{title}</div>
6+
<a href={pagePath} className={styles.infoCardLink}>
7+
<div className={`${styles.infoCard} ${isLarge ? styles.largeCard : ''}`}>
8+
<div className={styles.titleContainer}>
9+
{icon && <div className={styles.infoCardIcon}>{icon}</div>}
10+
<div className={styles.infoCardTitle}>{title}</div>
11+
</div>
12+
<div className={styles.infoCardDescription}>{description}</div>
1113
</div>
12-
<div className={styles.infoCardDescription}>{description}</div>
13-
</div>
1414
</a>
1515
);
1616
};

‎src/components/InfoCards/index.module.css

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11

22
.cardContainer {
3-
padding-top: 20px;
4-
display: grid;
5-
grid-template-columns: repeat(3, 1fr); /* Default to three columns */
6-
grid-auto-rows: 1fr; /* Each row has equal height, adjusting to content */
7-
gap: 20px;
3+
padding-top: 20px;
4+
display: grid;
5+
grid-template-columns: repeat(3, 1fr);
6+
grid-auto-rows: 1fr;
7+
gap: 24px;
8+
max-width: 1200px;
9+
margin: 0 auto;
810
}
911

10-
1112
/* Responsive adjustments */
12-
@media (max-width: 1024px) { /* For tablets and smaller desktops */
13-
.cardContainer {
14-
grid-template-columns: repeat(2, 1fr); /* Two columns */
15-
}
13+
@media (max-width: 1024px) {
14+
.cardContainer {
15+
grid-template-columns: repeat(2, 1fr);
1616
}
17-
18-
@media (max-width: 768px) { /* For landscape phones and smaller tablets */
19-
.cardContainer {
20-
grid-template-columns: 1fr; /* Single column for small devices */
2117
}
18+
19+
@media (max-width: 768px) {
20+
.cardContainer {
21+
grid-template-columns: 1fr;
22+
}
2223
}

‎src/css/custom.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,4 +234,14 @@ code {
234234

235235
.navbar-flutterflow-button:hover {
236236
background-color: #3B39EFFF; /* Slightly darker purple on hover */
237+
}
238+
239+
.theme-doc-sidebar-container {
240+
border-right: none !important;
241+
box-shadow: none !important;
242+
}
243+
244+
.navbar {
245+
border-bottom: none !important;
246+
box-shadow: none !important;
237247
}

0 commit comments

Comments
 (0)