Skip to content

Commit b5595db

Browse files
Kapil GowruKapil Gowru
Kapil Gowru
authored and
Kapil Gowru
committed
feat: adding homepage designs
1 parent 9a4d633 commit b5595db

File tree

6 files changed

+130
-45
lines changed

6 files changed

+130
-45
lines changed

‎fern/products/home/pages/images/Slack Icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎fern/products/home/pages/images/ai-search-preview.svg‎

Lines changed: 2 additions & 9 deletions
Loading

‎fern/products/home/pages/images/docs-preview.svg‎

Lines changed: 77 additions & 7 deletions
Loading

‎fern/products/home/pages/images/email.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎fern/products/home/pages/images/slack.svg‎

Lines changed: 3 additions & 0 deletions
Loading

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

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ layout: custom
183183
padding: 2rem;
184184
display: flex;
185185
flex-direction: column;
186-
gap: 1rem;
186+
gap: 1.5rem;
187187
}
188188
189189
.card-header {
@@ -661,15 +661,17 @@ layout: custom
661661

662662
{/* Action Buttons */}
663663
<div className="action-buttons">
664-
<button className="btn-primary">
664+
<button className="fern-button filled normal primary gap-1">
665665
Quick start
666666
<img src="./images/arrow-right-light.svg" alt="Arrow right light" />
667667
</button>
668-
<button className="btn-secondary">
668+
<button className="fern-button minimal normal gap-1">
669669
Capabilities
670+
<img src="./images/arrow-right-dark.svg" alt="Arrow right light" />
670671
</button>
671-
<button className="btn-secondary">
672+
<button className="fern-button minimal normal gap-1">
672673
Customers
674+
<img src="./images/arrow-right-dark.svg" alt="Arrow right light" />
673675
</button>
674676
</div>
675677
</div>
@@ -686,30 +688,37 @@ layout: custom
686688
<img src="./images/docs-preview.svg" alt="Docs Preview" className="docs-preview-img" />
687689

688690
<div className="action-buttons-vertical">
689-
<button className="btn-primary">
691+
<button className="fern-button filled normal primary gap-1 w-fit">
690692
Quickstart
691693
<img src="./images/arrow-right-light.svg" alt="Arrow right light" />
692694
</button>
693-
<button className="btn-secondary">
695+
<button className="fern-button minimal normal w-fit gap-1">
694696
Import your brand language
697+
<img src="./images/arrow-right-dark.svg" alt="Arrow right light" />
695698
</button>
696-
<button className="btn-secondary">
699+
<button className="fern-button minimal normal w-fit gap-1">
697700
Add multiple specs to your docs site
701+
<img src="./images/arrow-right-dark.svg" alt="Arrow right light" />
698702
</button>
699-
<button className="btn-secondary">
703+
<button className="fern-button minimal normal w-fit gap-1">
700704
Set up tabs
705+
<img src="./images/arrow-right-dark.svg" alt="Arrow right light" />
701706
</button>
702-
<button className="btn-secondary">
707+
<button className="fern-button minimal normal w-fit gap-1">
703708
Configure multiple products
709+
<img src="./images/arrow-right-dark.svg" alt="Arrow right light" />
704710
</button>
705-
<button className="btn-secondary">
711+
<button className="fern-button minimal normal w-fit gap-1">
706712
Create versions
713+
<img src="./images/arrow-right-dark.svg" alt="Arrow right light" />
707714
</button>
708-
<button className="btn-secondary">
715+
<button className="fern-button minimal normal w-fit gap-1">
709716
Customize slug from MDX
717+
<img src="./images/arrow-right-dark.svg" alt="Arrow right light" />
710718
</button>
711-
<button className="btn-secondary">
719+
<button className="fern-button minimal normal w-fit gap-1">
712720
See all available components
721+
<img src="./images/arrow-right-dark.svg" alt="Arrow right light" />
713722
</button>
714723
</div>
715724
</div>
@@ -726,12 +735,13 @@ layout: custom
726735
<img src="./images/ai-search-preview.svg" alt="AI Search Mockup" className="ai-search-preview-img" />
727736

728737
<div className="action-buttons">
729-
<button className="btn-primary">
738+
<button className="fern-button filled normal primary gap-1">
730739
Configure
731740
<img src="./images/arrow-right-light.svg" alt="Arrow right light" />
732741
</button>
733-
<button className="btn-secondary">
742+
<button className="fern-button minimal normal gap-1">
734743
Customers
744+
<img src="./images/arrow-right-dark.svg" alt="Arrow right light" />
735745
</button>
736746
</div>
737747
</div>
@@ -750,7 +760,7 @@ layout: custom
750760
<p className="community-card-description">
751761
See our most recent product updates.
752762
</p>
753-
<button className="btn-secondary">
763+
<button className="fern-button outlined normal gap-1">
754764
View
755765
<img src="./images/arrow-right-dark.svg" alt="Arrow right dark" />
756766
</button>
@@ -762,7 +772,7 @@ layout: custom
762772
<p className="community-card-description">
763773
Follow progress and contribute to the codebase.
764774
</p>
765-
<button className="btn-secondary">
775+
<button className="fern-button outlined normal gap-1">
766776
View
767777
<img src="./images/arrow-right-dark.svg" alt="Arrow right dark" />
768778
</button>
@@ -774,7 +784,7 @@ layout: custom
774784
<p className="community-card-description">
775785
Connect with the Fern community.
776786
</p>
777-
<button className="btn-secondary">
787+
<button className="fern-button outlined normal gap-1">
778788
View
779789
<img src="./images/arrow-right-dark.svg" alt="Twitter Preview" />
780790
</button>
@@ -788,7 +798,7 @@ layout: custom
788798
<p className="community-card-description">
789799
Get updates on the Fern platform.
790800
</p>
791-
<button className="btn-secondary">
801+
<button className="fern-button outlined normal gap-1">
792802
View
793803
<img src="./images/arrow-right-dark.svg" alt="Twitter Preview" />
794804
</button>
@@ -806,17 +816,20 @@ layout: custom
806816
</div>
807817

808818
<div className="help-buttons">
809-
<div className="help-button">
810-
<span className="help-button-text">File a Github issue</span>
811-
</div>
812-
813-
<div className="help-button">
814-
<span className="help-button-text">Email us</span>
815-
</div>
816-
817-
<div className="help-button">
818-
<span className="help-button-text">Slack (for customers only)</span>
819-
</div>
819+
<button className="fern-button outlined normal gap-2">
820+
<img src="./images/github.svg" alt="Github" className="h-4 w-4"/>
821+
File a Github issue
822+
</button>
823+
824+
<button className="fern-button outlined normal gap-2">
825+
<img src="./images/email.svg" alt="Email" className="h-4 w-4"/>
826+
Email us
827+
</button>
828+
829+
<button className="fern-button outlined normal gap-2">
830+
<img src="./images/slack.svg" alt="Slack" className="h-4 w-4"/>
831+
Slack (for customers only)
832+
</button>
820833
</div>
821834
</div>
822835

0 commit comments

Comments
 (0)