[WIP] align components to figma

codux-demos · Mar 3, 2024 · fbe30e6 · fbe30e6
1 parent b0e291e
commit fbe30e6
Show file tree

Hide file tree

Showing 13 changed files with 147 additions and 123 deletions.
diff --git a/src/_codux/boards/landing-page/landing-page.board.tsx b/src/_codux/boards/landing-page/landing-page.board.tsx
@@ -16,7 +16,7 @@ export default createBoard({
             top: 1,
             right: 0,
         },
-        windowHeight: 768,
-        windowWidth: 1024,
+        windowHeight: 1311,
+        windowWidth: 1616,
     },
 });
diff --git a/src/components/cities-section/cities-section.module.scss b/src/components/cities-section/cities-section.module.scss
@@ -1,33 +1,51 @@
 .root {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-self: stretch;
 }
 
 .header {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
 }
 
 .title {
-    font-size: var(--heading-extra-large-font-size);
-    line-height: var(--heading-extra-large-line-height);
+  font-size: var(--heading-extra-large-font-size);
+  line-height: var(--heading-extra-large-line-height);
+  color: var(--text-emphasized);
+}
+
+.viewAllCitiesButton {
+  color: var(--link);
 }
 
 .list {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    column-count: 4;
-    column-gap: 20px;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  column-count: 4;
+  column-gap: 20px;
+}
+
+.listItem {
+  padding-bottom: 12px;
 }
 
 .content {
-    display: flex;
-    flex-direction: column;
-    max-width: 1200px;
-    padding: 80px 32px;
-    width: 100%;
-    row-gap: 48px;
-}
+  display: flex;
+  flex-direction: column;
+  max-width: 1200px;
+  padding: 80px 32px;
+  width: 100%;
+  row-gap: 48px;
+}
+
+.countrySelect {
+  color: currentColor;
+  text-decoration: underline;
+  &:hover {
+    color: #eca828;
+  }
+}
diff --git a/src/components/cities-section/cities-section.tsx b/src/components/cities-section/cities-section.tsx
@@ -15,13 +15,13 @@ export const CitiesSection = ({ className, country }: CitiesSectionProps) => {
             <div className={styles.content}>
                 <div className={styles.header}>
                     <h2 className={styles.title}>
-                        Yum cities in <LinkButton>{country.name}</LinkButton>
+                        Yum cities in <LinkButton className={styles.countrySelect}>{country.name}</LinkButton>
                     </h2>
-                    <LinkButton>View all Yum cities</LinkButton>
+                    <LinkButton className={styles.viewAllCitiesButton}>View all Yum cities</LinkButton>
                 </div>
                 <ul className={styles.list}>
                     {cities.map((city) => (
-                        <li key={city.id}>
+                        <li className={styles.listItem} key={city.id}>
                             <LinkButton>{city.name}</LinkButton>
                         </li>
                     ))}

diff --git a/src/components/hero-section/hero-section.module.scss b/src/components/hero-section/hero-section.module.scss
@@ -1,6 +1,6 @@
 .root {
     min-height: 640px;
-    background: right center / cover url('https://static.wixstatic.com/media/f09b13_5372211550174dd4a9b85ebf72698027~mv2.jpg');
+    background: right center / cover url('https://static.wixstatic.com/media/f09b13_6334ce140de54f5498d0080fcdb4dcd6~mv2.jpg');
     display: flex;
     align-items: center;
     justify-content: center;

diff --git a/src/components/link-button/link-button.module.scss b/src/components/link-button/link-button.module.scss
@@ -1,5 +1,5 @@
 .root {
-  color: 'currentColor';
+  color: currentColor;
   font-size: inherit;
   line-height: inherit;
 

diff --git a/src/components/more-than-delivery-section/more-than-delivery-section.module.scss b/src/components/more-than-delivery-section/more-than-delivery-section.module.scss
@@ -1,28 +1,29 @@
 .root {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
 .title {
-    font-size: var(--heading-extra-large-font-size);
-    line-height: var(--heading-extra-large-line-height);
+  font-size: var(--heading-extra-large-font-size);
+  line-height: var(--heading-extra-large-line-height);
+  color: var(--text-emphasized);
 }
 
 .content {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    row-gap: 32px;
-    padding-top: 80px;
-    padding-bottom: 120px;
-    padding-right: 32px;
-    padding-left: 32px;
-    min-height: 560px;
-    justify-content: center;
-    max-width: 800px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  row-gap: 32px;
+  padding-top: 80px;
+  padding-bottom: 160px;
+  padding-right: 32px;
+  padding-left: 32px;
+  min-height: 560px;
+  justify-content: center;
+  max-width: 800px;
 }
 
 .text {
-    font-size: var(--text-extra-large-font-size);
-    line-height: var(--text-extra-large-line-height);
-}
+  font-size: var(--text-extra-large-font-size);
+  line-height: var(--text-extra-large-line-height);
+}
diff --git a/src/components/partner-card/partner-card.module.scss b/src/components/partner-card/partner-card.module.scss
@@ -1,27 +1,21 @@
 .root {
-    display: grid;
-    grid-template-rows: min-content 1fr min-content;
-    text-align: center;
-    background-color: var(--background-white);
-    box-shadow: 0px 24px 48px -24px rgba(0, 0, 0, 0.15), 0px 80px 80px 0px rgba(0, 0, 0, 0.05);
+  display: grid;
+  grid-template-rows: min-content 1fr;
+  text-align: center;
+  background-color: var(--background-white);
+  box-shadow:
+    0px 24px 48px -24px rgba(0, 0, 0, 0.15),
+    0px 80px 80px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 12px;
+  overflow: hidden;
 }
 
 .image {
-    aspect-ratio: 3/2;
-    background-size: cover;
-    background-position: center;
+  aspect-ratio: 3/2;
+  background-size: cover;
+  background-position: center;
 }
 
 .title {
-    margin-top: 32px;
-    margin-bottom: 16px;
-    margin-right: 32px;
-    margin-left: 32px;
+  padding: 32px;
 }
-
-.link {
-    margin-bottom: 32px;
-    align-self: end;
-    margin-right: 32px;
-    margin-left: 32px;
-}
diff --git a/src/components/partner-card/partner-card.tsx b/src/components/partner-card/partner-card.tsx
@@ -6,25 +6,20 @@ import styles from './partner-card.module.scss';
 export interface PartnerCardProps {
     imageSrc?: string;
     title?: string;
-    link?: string;
     to?: To;
     className?: string;
 }
 
 export const PartnerCard = ({
     className,
     title = 'Card title',
-    link = 'Link label',
     to = '/',
     imageSrc = 'https://static.wixstatic.com/media/f09b13_6ec13d6fe0cc4ecb8834fe856605b9f6~mv2.jpg',
 }: PartnerCardProps) => {
     return (
-        <div className={classNames(styles.root, className)}>
+        <Link className={classNames(styles.root, className)} to={to}>
             <div className={styles.image} style={{ backgroundImage: `url(${imageSrc})` }} />
             <h3 className={styles.title}>{title}</h3>
-            <Link className={styles.link} to={to}>
-                {link}
-            </Link>
-        </div>
+        </Link>
     );
 };
diff --git a/src/components/partners-section/partners-section.module.scss b/src/components/partners-section/partners-section.module.scss
@@ -1,25 +1,26 @@
 .root {
-    display: flex;
-    justify-content: center;
-    background: var(--background-light-grey);
+  display: flex;
+  justify-content: center;
+  background: var(--background-light-grey);
 }
 
 .content {
-    max-width: 1200px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    column-gap: 16px;
-    padding-top: 80px;
-    padding-bottom: 80px;
-    padding-right: 32px;
-    padding-left: 32px;
-    row-gap: 40px;
+  max-width: 1200px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: 16px;
+  padding-top: 80px;
+  padding-bottom: 80px;
+  padding-right: 32px;
+  padding-left: 32px;
+  row-gap: 40px;
 }
 
 .title {
-    font-size: var(--heading-extra-large-font-size);
-    line-height: var(--heading-extra-large-line-height);
-    grid-column-start: 1;
-    grid-column-end: 4;
-    text-align: center;
-}
+  font-size: var(--heading-extra-large-font-size);
+  line-height: var(--heading-extra-large-line-height);
+  grid-column-start: 1;
+  grid-column-end: 4;
+  text-align: center;
+  color: var(--text-emphasized);
+}
diff --git a/src/components/partners-section/partners-section.tsx b/src/components/partners-section/partners-section.tsx
@@ -13,16 +13,13 @@ export const PartnersSection = ({ className }: PartnersSectionProps) => {
                 <h2 className={styles.title}>Partner with Yum</h2>
                 <PartnerCard
                     title="Become a courier"
-                    link="Apply now"
                     imageSrc="https://static.wixstatic.com/media/f09b13_cc65552b1f204b308eced8021c9d34c6~mv2.jpg "
                 />
                 <PartnerCard
                     title="Join Yum as a restaurant owner"
-                    link="Apply now"
                     imageSrc="https://static.wixstatic.com/media/f09b13_ad2dcbc153d549a4bebf8c0ba391d09b~mv2.jpg"
                 />
                 <PartnerCard
-                    link="Contact us"
                     title="Yum for work"
                     imageSrc="https://static.wixstatic.com/media/f09b13_1a15e075502247da999b424c2bd61a24~mv2.jpg "
                 />

diff --git a/src/components/what-is-section/what-is-section.module.scss b/src/components/what-is-section/what-is-section.module.scss
@@ -1,50 +1,59 @@
 .root {
-    background-color: var(--background-light-grey);
-    padding-bottom: 80px;
-    padding-top: 80px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-right: 32px;
-    padding-left: 32px;
+  background-color: transparent;
+  padding-bottom: 80px;
+  padding-top: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-right: 32px;
+  padding-left: 32px;
+  background-image: linear-gradient(
+    180deg,
+    var(--background-light-grey) 0%,
+    var(--background-white) 100%
+  );
 }
 
 .card {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    overflow: hidden;
-    max-width: 1200px;
-    min-height: 600px;
-    border-radius: 12px;
-    background-color: var(--background-white);
-    box-shadow: 0px 24px 48px -24px rgba(0, 0, 0, 0.15), 0px 80px 80px 0px rgba(0, 0, 0, 0.05);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  overflow: hidden;
+  max-width: 1200px;
+  min-height: 600px;
+  border-radius: 12px;
+  background-color: var(--background-white);
+  box-shadow:
+    0px 24px 48px -24px rgba(0, 0, 0, 0.15),
+    0px 80px 80px 0px rgba(0, 0, 0, 0.05);
 }
 
 .image {
-    background: center / cover no-repeat url("https://static.wixstatic.com/media/f09b13_4b8cabf6e2cd464287c1ccf0e4c1a5fc~mv2.jpg");
-
+  background: center / cover no-repeat
+    url('https://static.wixstatic.com/media/f09b13_4b8cabf6e2cd464287c1ccf0e4c1a5fc~mv2.jpg');
 }
 
 .content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 80px;
 }
 
 .title {
-    display: block;
+  display: block;
 }
 
 .title {
-    font-size: var(--heading-small-font-size);
-    line-height: var(--heading-small-line-height);
+  font-size: var(--heading-small-font-size);
+  line-height: var(--heading-small-line-height);
+  color: var(--text-emphasized);
 }
 
 .emphasizedText {
-    font-size: var(--heading-extra-large-font-size);
-    line-height: var(--heading-extra-large-line-height);
-    font-family: Poppins, system-ui, sans-serif;
-    margin-top: 16px;
-    margin-bottom: 32px;
-}
+  font-size: var(--heading-extra-large-font-size);
+  line-height: var(--heading-extra-large-line-height);
+  font-family: Poppins, system-ui, sans-serif;
+  margin-top: 16px;
+  margin-bottom: 32px;
+  color: var(--text-emphasized);
+}
diff --git a/src/index.scss b/src/index.scss
@@ -45,6 +45,10 @@ p {
   margin: 0;
 }
 
+img{
+  vertical-align: middle;
+}
+
 *,
 *:before,
 *:after {