feat: adding homepage designs

Author: Kapil Gowru

fern/products/home/pages/images/arrow-right-dark.svg

@@ -279,7 +279,7 @@ layout: custom
 
     .btn-primary {
       border: 1px solid var(--accent-9);
-      border-radius: 1000px;
+      border-radius: 6px;
       background-color: var(--accent-9);
       color: var(--accent-contrast);
       text-align: center;
@@ -309,12 +309,15 @@ layout: custom
       background-color: var(--grayscale-a3);
       color: var(--grayscale-a10);
       padding: 0.5rem 0.75rem;
-      border-radius: 9999px;
+      border-radius: 6px;
       font-size: 0.875rem;
       border: none;
       cursor: pointer;
       transition: box-shadow .3s cubic-bezier(.19,1,.22,1), color .3s cubic-bezier(.19,1,.22,1), background-color .3s cubic-bezier(.19,1,.22,1);
       width: fit-content;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
 
       &:hover {
         background-color: var(--grayscale-a4);
@@ -349,17 +352,19 @@ layout: custom
       flex-direction: column;
       gap: 0.5rem;
       padding: 0;
+      align-items: flex-start;
     }
 
     .community-card-title {
       font-size: 1rem;
       font-weight: bold;
-      color: #1e1f24;
+      color: var(--grayscale-12);
     }
 
     .community-card-description {
       font-size: 0.875rem;
-      color: #62636c;
+      color: var(--grayscale-10);
+      margin-bottom: 0.5rem;
     }
 
     .community-card-arrow {
@@ -657,6 +662,7 @@ layout: custom
         <div className="action-buttons">
           <button className="btn-primary">
             Quick start
+            <img src="./images/arrow-right-light.svg" alt="Arrow right light" />
           </button>
           <button className="btn-secondary">
             Capabilities
@@ -681,6 +687,7 @@ layout: custom
         <div className="action-buttons-vertical">
           <button className="btn-primary">
             Quickstart
+            <img src="./images/arrow-right-light.svg" alt="Arrow right light" />
           </button>
           <button className="btn-secondary">
             Import your brand language
@@ -720,6 +727,7 @@ layout: custom
         <div className="action-buttons">
           <button className="btn-primary">
             Configure
+            <img src="./images/arrow-right-light.svg" alt="Arrow right light" />
           </button>
           <button className="btn-secondary">
             Customers
@@ -743,6 +751,7 @@ layout: custom
           </p>
           <button className="btn-secondary">
             View
+            <img src="./images/arrow-right-dark.svg" alt="Arrow right dark" />
           </button>
         </div>
 
@@ -754,6 +763,7 @@ layout: custom
           </p>
           <button className="btn-secondary">
             View
+            <img src="./images/arrow-right-dark.svg" alt="Arrow right dark" />
           </button>
         </div>
 
@@ -765,19 +775,21 @@ layout: custom
           </p>
           <button className="btn-secondary">
             View
+            <img src="./images/arrow-right-dark.svg" alt="Twitter Preview" />
           </button>
         </div>
 
         <div className="community-card">
           <img src="./images/x.svg" alt="Twitter Preview" />
           <h3 className="community-card-title">
-            <span className="twitter-strikethrough">Twitter</span>
+            <span className="twitter-strikethrough">Twitter</span> X
           </h3>
           <p className="community-card-description">
             Get updates on the Fern platform.
           </p>
           <button className="btn-secondary">
             View
+            <img src="./images/arrow-right-dark.svg" alt="Twitter Preview" />
           </button>
         </div>
       </div>