Skip to content

Commit bc66eee

Browse files
author
Kapil Gowru
committed
feat: adding social logos
1 parent 4421cf0 commit bc66eee

File tree

4 files changed

+128
-52
lines changed

4 files changed

+128
-52
lines changed

‎fern/products/docs/pages/getting-started/overview.mdx‎

Lines changed: 127 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -8,59 +8,141 @@ description: Meet documentation that is stunning by default, AI-ready, and desig
88
.fern-card {
99
text-decoration: none !important;
1010
}
11+
12+
.docs-homepage {
13+
position: relative;
14+
15+
.dashed-pattern-left {
16+
position: absolute;
17+
left: -4rem;
18+
top: -8.5rem;
19+
height: calc(100% + 26rem);
20+
width: 1rem;
21+
opacity: 1;
22+
pointer-events: none;
23+
border-right: 1px solid var(--grayscale-5);
24+
border-left: 1px solid var(--grayscale-5);
25+
mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0 ) 100%);
26+
-webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
27+
}
28+
29+
.dashed-pattern-right {
30+
position: absolute;
31+
right: -4rem;
32+
top: -8.5rem;
33+
height: calc(100% + 26rem);
34+
width: 1rem;
35+
opacity: 1;
36+
pointer-events: none;
37+
border-right: 1px solid var(--grayscale-5);
38+
border-left: 1px solid var(--grayscale-5);
39+
mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
40+
-webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
41+
}
42+
43+
.dashed-gradient {
44+
height: 100%;
45+
width: 100%;
46+
background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_351_76922)"><rect width="100" height="100" fill="transparent"/><path d="M0 100L100 -7.07537e-07" stroke="%23E0E1E6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_351_76922"><rect width="100" height="100" fill="white"/></clipPath></defs></svg>');
47+
background-repeat: repeat;
48+
background-size: 12px 12px;
49+
mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
50+
-webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
51+
}
52+
53+
.fern-card {
54+
border: none !important;
55+
padding: 0 !important;
56+
box-shadow: none !important;
57+
58+
img {
59+
transition: transform 0.15s ease-in-out;
60+
}
61+
62+
.arrow-right {
63+
transition: transform 0.15s ease-in-out;
64+
opacity: 0;
65+
}
66+
67+
&:hover {
68+
img {
69+
transform: scale(1.01);
70+
}
71+
72+
.arrow-right {
73+
opacity: 1;
74+
}
75+
}
76+
}
77+
}
1178
`}
1279
</style>
1380

14-
<CardGroup cols={2}>
15-
<a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/guides/getting-started/quickstart">
16-
<div class="flex items-start flex-col space-y-3">
17-
<img class="mx-auto dark:hidden" alt="Quickstart" src="./images/quickstart.png" />
18-
<img class="mx-auto hidden dark:block" alt="Quickstart" src="./images/quickstart-dark.png" />
19-
<div class="w-full space-y-1 overflow-hidden">
20-
<div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Quickstart</div>
21-
<div class="text-(color:--grayscale-a11) font-light">
22-
<p>Start building beautiful documentation in under 5 minutes.</p>
81+
<div className="docs-homepage">
82+
{/* Dashed Pattern - Left Side */}
83+
<div className="dashed-pattern-left">
84+
<div className="dashed-gradient"></div>
85+
</div>
86+
87+
{/* Dashed Pattern - Right Side */}
88+
<div className="dashed-pattern-right">
89+
<div className="dashed-gradient"></div>
90+
</div>
91+
<CardGroup cols={2}>
92+
<a class="fern-card interactive not-prose relative block p-6 text-base" href="/docs/guides/getting-started/quickstart">
93+
<div class="flex items-start flex-col space-y-3">
94+
<img class="mx-auto dark:hidden" alt="Quickstart" src="./images/quickstart.png" />
95+
<img class="mx-auto hidden dark:block" alt="Quickstart" src="./images/quickstart-dark.png" />
96+
<div class="w-full space-y-1 overflow-hidden">
97+
<div class="text-(color:--grayscale-a12) text-body text-base font-semibold">
98+
Quickstart
99+
<img src="./images/arrow-right-black.svg" alt="Arrow right light" className="dark:hidden m-0" noZoom />
100+
<img src="./images/arrow-right-white.svg" alt="Arrow right light" className="hidden dark:block m-0" noZoom />
101+
</div>
102+
<div class="text-(color:--grayscale-a11) font-light">
103+
<p>Start building beautiful documentation in under 5 minutes.</p>
104+
</div>
23105
</div>
24106
</div>
25-
</div>
26-
</a>
27-
28-
<a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/guides/getting-started/what-is-docs-yml">
29-
<div class="flex items-start flex-col space-y-3">
30-
<img class="mx-auto dark:hidden" alt="Configure with ease" src="./images/configure.png" />
31-
<img class="mx-auto hidden dark:block" alt="Configure with ease" src="./images/configure-dark.png" />
32-
<div class="w-full space-y-1 overflow-hidden">
33-
<div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Configure with ease</div>
34-
<div class="text-(color:--grayscale-a11) font-light">
35-
<p>One simple file that can be used to generate documentation that fits your brand.</p>
107+
</a>
108+
109+
<a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/guides/getting-started/what-is-docs-yml">
110+
<div class="flex items-start flex-col space-y-3">
111+
<img class="mx-auto dark:hidden" alt="Configure with ease" src="./images/configure.png" />
112+
<img class="mx-auto hidden dark:block" alt="Configure with ease" src="./images/configure-dark.png" />
113+
<div class="w-full space-y-1 overflow-hidden">
114+
<div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Configure with ease</div>
115+
<div class="text-(color:--grayscale-a11) font-light">
116+
<p>One simple file that can be used to generate documentation that fits your brand.</p>
117+
</div>
36118
</div>
37119
</div>
38-
</div>
39-
</a>
40-
41-
<a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/component-library/overview">
42-
<div class="flex items-start flex-col space-y-3">
43-
<img class="mx-auto dark:hidden" alt="Flexible component library" src="./images/component-library.png" />
44-
<img class="mx-auto hidden dark:block" alt="Flexible component library" src="./images/component-library-dark.png" />
45-
<div class="w-full space-y-1 overflow-hidden">
46-
<div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Flexible component library</div>
47-
<div class="text-(color:--grayscale-a11) font-light">
48-
<p>Use pre-built or custom React components for a polished look.</p>
120+
</a>
121+
122+
<a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/component-library/overview">
123+
<div class="flex items-start flex-col space-y-3">
124+
<img class="mx-auto dark:hidden" alt="Flexible component library" src="./images/component-library.png" />
125+
<img class="mx-auto hidden dark:block" alt="Flexible component library" src="./images/component-library-dark.png" />
126+
<div class="w-full space-y-1 overflow-hidden">
127+
<div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Flexible component library</div>
128+
<div class="text-(color:--grayscale-a11) font-light">
129+
<p>Use pre-built or custom React components for a polished look.</p>
130+
</div>
49131
</div>
50132
</div>
51-
</div>
52-
</a>
53-
54-
<a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/component-library/writing-content/visual-editor">
55-
<div class="flex items-start flex-col space-y-3">
56-
<img class="mx-auto dark:hidden" alt="Visual Editor" src="./images/visual-editor.png" />
57-
<img class="mx-auto hidden dark:block" alt="Visual Editor" src="./images/visual-editor-dark.png" />
58-
<div class="w-full space-y-1 overflow-hidden">
59-
<div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Visual Editor</div>
60-
<div class="text-(color:--grayscale-a11) font-light">
61-
<p>Modify your documentation without touching code and publish to your GitHub.</p>
133+
</a>
134+
135+
<a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/component-library/writing-content/visual-editor">
136+
<div class="flex items-start flex-col space-y-3">
137+
<img class="mx-auto dark:hidden" alt="Visual Editor" src="./images/visual-editor.png" />
138+
<img class="mx-auto hidden dark:block" alt="Visual Editor" src="./images/visual-editor-dark.png" />
139+
<div class="w-full space-y-1 overflow-hidden">
140+
<div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Visual Editor</div>
141+
<div class="text-(color:--grayscale-a11) font-light">
142+
<p>Modify your documentation without touching code and publish to your GitHub.</p>
143+
</div>
62144
</div>
63145
</div>
64-
</div>
65-
</a>
66-
</CardGroup>
146+
</a>
147+
</CardGroup>
148+
</div>

‎fern/products/home/pages/images/arrow-right-light.svg‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎fern/products/home/pages/images/arrow-right-white.svg‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎fern/products/home/pages/welcome.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { FernFooter } from "../../../components/FernFooter";
1414
inset: 0,
1515
position: "fixed",
1616
backgroundImage: "linear-gradient(to bottom right, var(--green-1), var(--grayscale-0), var(--grayscale-1))"
17-
}}
17+
}}
1818
className="box-border block"
1919
/>
2020
<div className="bg-gradient-green-left box-border block" />

0 commit comments

Comments
 (0)