Last feedbacks. We just miss the sticky headers for the price lists

tolokoban · tolokoban · commit 48183dd72bf9 · 2025-02-19T15:07:59.000+01:00
diff --git a/src/components/LandingPage/components/SanityContentRTF/SanityContentWidget/SanityContentWidget.tsx b/src/components/LandingPage/components/SanityContentRTF/SanityContentWidget/SanityContentWidget.tsx
@@ -58,6 +58,7 @@ export default function SanityContentWidget({ value }: SanityContentWidgetProps)
     case 'multipleMember':
       return <WidgetMultipleMember />;
     case 'repositories':
+    case 'resourcesList':
       return <WidgetRepositories />;
     default:
       return (
diff --git a/src/components/LandingPage/content/_common.ts b/src/components/LandingPage/content/_common.ts
@@ -6,8 +6,14 @@ import { assertType, TypeDef } from '@/util/type-guards';
  * @returns `true` if the type is correct.
  */
 export function tryType(typeName: string, data: unknown, type: TypeDef): boolean {
-  assertType(data, type);
-  return true;
+  try {
+    assertType(data, type);
+    return true;
+  } catch (ex) {
+    // eslint-disable-next-line no-console
+    console.log('Failing type:', type);
+    throw ex;
+  }
 }
 
 export type RichText = PortableTextBlock | PortableTextBlock[];
diff --git a/src/components/LandingPage/content/news.ts b/src/components/LandingPage/content/news.ts
@@ -12,6 +12,7 @@ export interface ContentForNewsItem {
   category: string;
   cardSize: string;
   isEPFL: boolean;
+  link: string | null;
   slug: string;
   imageURL: string;
   imageWidth: number;
@@ -82,6 +83,7 @@ export function useSanityContentForNewsList(limit?: number): ContentForNewsList
   "content": thumbnailIntroduction,
   "isEPFL": isBBPEPFLNews,
   "slug": slug.current,
+  "link": externalLink,
   category,
   cardSize,
   "imageURL": thumbnailImage.asset->url,
diff --git a/src/components/LandingPage/content/portals.ts b/src/components/LandingPage/content/portals.ts
@@ -6,11 +6,16 @@ export function useSanityContentForPortalsTitle(): string {
   return (
     useSanity(
       `*[_type=="pages" && slug.current=="home"][0].content[_type=="portalsList"][0].title`,
-      isString
+      isStringOrNull
     ) ?? ''
   );
 }
 
+function isStringOrNull(data: unknown): data is string | null {
+  if (data === null) return true;
+  return isString(data);
+}
+
 export interface ContentForPortalsListItem {
   title: string;
   description: string;
diff --git a/src/components/LandingPage/content/pricing.groq b/src/components/LandingPage/content/pricing.groq
@@ -0,0 +1,38 @@
+{
+  "features": *[_type=="featureBlocList"].featuresBloc[] {
+    title,
+    "available": isAvailable,
+    features[] {
+      title,
+      description,
+      "plans": linkedPlan[]{
+        "id": plan->_id,
+        "label": specialLabel,
+        tooltip
+      }
+    }
+  },
+  "plans": *[_type=="plan"] | order(position) {
+    "id": _id,
+    title,
+    notes,
+    "price": {
+      "month": monthlyPlanNormal[] {
+        "value": price,
+        currency
+      },
+      "discount": monthlyPlanDiscount[] {
+        "value": price,
+        currency
+      },
+      "yearNormal": yearlyPlanNormal[] {
+        "value": price,
+        currency
+      },
+      "yearDiscount": yearlyPlanDiscount[] {
+        "value": price,
+        currency
+      }
+    }
+  }
+}
diff --git a/src/components/LandingPage/content/pricing.ts b/src/components/LandingPage/content/pricing.ts
@@ -2,47 +2,10 @@
 import { tryType } from './_common';
 import { useSanity } from './content';
 import { typeBooleanOrNull, typeNumberOrNull, typeStringOrNull } from './types';
+import query from './pricing.groq';
 import { isBoolean, TypeDef } from '@/util/type-guards';
 
 export function useSanityContentForPricing(): ContentForPricing | undefined | null {
-  const query = `{
-  "features": *[_type=="featureBlocList"].featuresBloc[] {
-    title,
-    "available": isAvailable,
-    features[] {
-      title,
-      description,
-      "plans": linkedPlan[]{
-        "id": plan->_id,
-        "label": specialLabel,
-        tooltip
-      }
-    }
-  },
-  "plans": *[_type=="plan"] | order(position) {
-    "id": _id,
-    title,
-    notes,
-    "price": {
-      "month": monthlyPlanNormal[] {
-        "value": price,
-        currency
-      },
-      "discount": monthlyPlanDiscount[] {
-        "value": price,
-        currency
-      },
-      "yearNormal": yearlyPlanNormal[] {
-        "value": price,
-        currency
-      },
-      "yearDiscount": yearlyPlanDiscount[] {
-        "value": price,
-        currency
-      }
-    }
-  }
-}`;
   return sanityze(useSanity(query, isContentForPricing));
 }
 
diff --git a/src/components/LandingPage/sections/SectionNews/Card/Card.module.css b/src/components/LandingPage/sections/SectionNews/Card/Card.module.css
@@ -18,6 +18,7 @@
 
 .card.small .content {
   flex-direction: column;
+  height: auto;
 }
 
 .card > h1 {
@@ -33,6 +34,7 @@
   color: var(--color-neutral);
   gap: 2em;
   margin-bottom: 2em;
+  margin-top: 0.5em;
 }
 
 .content {
diff --git a/src/components/LandingPage/sections/SectionNews/Card/Card.tsx b/src/components/LandingPage/sections/SectionNews/Card/Card.tsx
@@ -6,7 +6,7 @@ import { classNames } from '@/util/utils';
 import ProgressiveImage from '@/components/LandingPage/components/ProgressiveImage';
 import { IconPlus } from '@/components/LandingPage/icons/IconPlus';
 import { styleButtonHoverable } from '@/components/LandingPage/styles';
-import { sanitizeURL } from '@/components/LandingPage/utils';
+
 import styles from './Card.module.css';
 
 export interface CardsProps {
@@ -29,6 +29,7 @@ export default function Cards({ className, news }: CardsProps) {
           </div>
           <button
             type="button"
+            title={news.link ?? ''}
             className={classNames(styleButtonHoverable, styles.button)}
             onClick={() => gotoNews(news)}
           >
@@ -56,6 +57,7 @@ function formatDate(d: string) {
 }
 
 function gotoNews(news: ContentForNewsItem): void {
-  const url = sanitizeURL(`/welcome/news/${news.slug}`);
-  window.location.href = url;
+  // const url = sanitizeURL(`/welcome/news/${news.slug}`);
+  const url = news.link;
+  if (url) window.open(url);
 }
diff --git a/src/components/LandingPage/widgets/CompanyMembers/TeamMember/TeamMember.module.css b/src/components/LandingPage/widgets/CompanyMembers/TeamMember/TeamMember.module.css
@@ -16,7 +16,6 @@
   content: '';
   background-size: cover;
   background-color: var(--color-primary);
-  background-image: url(./background.jpg);
 }
 
 .teamMember > div.image > img {
@@ -37,7 +36,6 @@
 .teamMember > div.name {
   font-family: var(--font-serif);
   font-size: var(--font-size-M);
-  font-weight: bolder;
   background-color: var(--color-neutral-light);
   padding: 0 1em;
   margin: 0;
diff --git a/src/components/LandingPage/widgets/CompanyMembers/TeamMember/background.jpg b/src/components/LandingPage/widgets/CompanyMembers/TeamMember/background.jpg
diff --git a/src/components/LandingPage/widgets/ContributorsPanel/ContributorsList/ContributorsList.module.css b/src/components/LandingPage/widgets/ContributorsPanel/ContributorsList/ContributorsList.module.css
@@ -21,7 +21,6 @@
 .contributorsList > div > .name {
   font-family: var(--font-serif);
   font-size: var(--font-size-M-plus);
-  font-weight: bolder;
   line-height: 1;
   padding: 0.4em 0.5em;
   background-color: var(--color-neutral-light);
diff --git a/src/components/LandingPage/widgets/ContributorsPanel/ContributorsList/ContributorsList.tsx b/src/components/LandingPage/widgets/ContributorsPanel/ContributorsList/ContributorsList.tsx
@@ -29,13 +29,18 @@ export default function ContributorsList({ className, list }: ContributorsListPr
               {contributor.google_scholar && (
                 <a
                   className={styleButtonHoverable}
+                  target="_BLANK"
                   href={`https://scholar.google.com/citations?user=${contributor.google_scholar}`}
                 >
                   Google Scholar
                 </a>
               )}
               {contributor.ORCID && (
-                <a className={styleButtonHoverable} href={`https://orcid.org/${contributor.ORCID}`}>
+                <a
+                  className={styleButtonHoverable}
+                  target="_BLANK"
+                  href={`https://orcid.org/${contributor.ORCID}`}
+                >
                   Orcid
                 </a>
               )}
diff --git a/src/components/LandingPage/widgets/FromCellToBrain/FromCellToBrain.module.css b/src/components/LandingPage/widgets/FromCellToBrain/FromCellToBrain.module.css
@@ -17,7 +17,7 @@
 
 .card {
   height: 240px;
-  margin: 8px 0;
+  margin: 24px 0;
   padding: 8px;
   border: 1px solid var(--color-neutral);
   display: grid;
@@ -35,6 +35,7 @@
   min-width: 120px;
   min-height: 120px;
   border-radius: 50%;
+  overflow: hidden;
 }
 
 .description {
diff --git a/src/components/LandingPage/widgets/MissionStatement/MissionStatement.module.css b/src/components/LandingPage/widgets/MissionStatement/MissionStatement.module.css
@@ -34,7 +34,8 @@ button.missionStatement {
 .missionStatement > div.text > h2 {
   font-family: var(--font-serif);
   font-size: var(--font-size-XL);
-  line-height: 1.5;
+  line-height: 1.2;
+  margin-left: 2em;
 }
 
 .missionStatement > div.background {
diff --git a/src/components/LandingPage/widgets/News/News.tsx b/src/components/LandingPage/widgets/News/News.tsx
@@ -18,6 +18,7 @@ export function WidgetNews() {
 
   if (news.length === 0) return null;
 
+  console.log('🚀 [News] styleBlockSmallExpandRight = ', styleBlockSmallExpandRight); // @FIXME: Remove this line written on 2025-02-19 at 14:09
   return (
     <>
       <Title value="News and events" />
diff --git a/src/components/LandingPage/widgets/PriceList/PlanHeader/PlanHeader.module.css b/src/components/LandingPage/widgets/PriceList/PlanHeader/PlanHeader.module.css
@@ -5,7 +5,7 @@
 .discount {
   color: var(--color-neutral);
   text-decoration: line-through;
-  text-decoration-color: var(--color-neutral-light);
+  text-decoration-color: currentColor;
 }
 
 .hide {
@@ -24,3 +24,25 @@
 .planHeader ul > li::marker {
   content: '+';
 }
+
+.pill {
+    content: "Launch";
+    color: var(--color-neutral);
+    font-size: var(--font-size-S);
+    height: 2em;
+    padding: 0 1em;
+    border-radius: 99vmax;
+    border: 1px solid currentColor;
+    margin-left: 1em;
+    display: grid;
+    place-items: center;
+}
+
+.price {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0;
+}
diff --git a/src/components/LandingPage/widgets/PriceList/PlanHeader/PlanHeader.tsx b/src/components/LandingPage/widgets/PriceList/PlanHeader/PlanHeader.tsx
@@ -32,17 +32,25 @@ export default function PlanHeader({ className, plan }: PlanHeaderProps) {
             </strong>
             <small>/month</small>
           </div>
-          <div>
+          <div className={classNames(styles.discount, discount ? styles.show : styles.hide)}>
+            <strong>
+              {currency} {yearNormal}
+            </strong>
+            <small>/year</small>
+          </div>
+          <div className={styles.price}>
             <big>
               {currency} {discount || month}
             </big>
             /month
+            {discount && <div className={styles.pill}>Launch</div>}
           </div>
-          <div>
+          <div className={styles.price}>
             <big>
               {currency} {discount ? yearDiscount : yearNormal}
             </big>
             /year
+            {discount && <div className={styles.pill}>Launch</div>}
           </div>
           <ul>
             {plan.notes.map((note, index) => (
diff --git a/src/components/LandingPage/widgets/multiple-member/hooks.ts b/src/components/LandingPage/widgets/multiple-member/hooks.ts
@@ -8,7 +8,7 @@ export function useSanityContentForMultipleMember() {
       `*[_type=="multipleMemberBloc"].memberList[]->{
   firstName,
   lastName,
-  biography,
+  "biography": shortBiography,
   "imageURL": image.asset->url,
   "imageWidth": image.asset->metadata.dimensions.width,
   "imageHeight": image.asset->metadata.dimensions.height
diff --git a/src/components/LandingPage/widgets/repositories/hooks.groq b/src/components/LandingPage/widgets/repositories/hooks.groq
@@ -1,4 +1,4 @@
-*[_type=="repositories"] {
+*[_type=="resourcesList"][0].resources[]-> {
   "type": objectOfStudy,
   title,
   author,
diff --git a/src/util/type-guards/index.ts b/src/util/type-guards/index.ts

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@`
`18`	`18`
`19`	`19`	`.card.small .content {`
`20`	`20`	`flex-direction: column;`
	`21`	`+ height: auto;`
`21`	`22`	`}`
`22`	`23`
`23`	`24`	`.card > h1 {`
`@@ -33,6 +34,7 @@`
`33`	`34`	`color: var(--color-neutral);`
`34`	`35`	`gap: 2em;`
`35`	`36`	`margin-bottom: 2em;`
	`37`	`+ margin-top: 0.5em;`
`36`	`38`	`}`
`37`	`39`
`38`	`40`	`.content {`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,8 @@ button.missionStatement {`
`34`	`34`	`.missionStatement > div.text > h2 {`
`35`	`35`	`font-family: var(--font-serif);`
`36`	`36`	`font-size: var(--font-size-XL);`
`37`		`- line-height: 1.5;`
	`37`	`+ line-height: 1.2;`
	`38`	`+ margin-left: 2em;`
`38`	`39`	`}`
`39`	`40`
`40`	`41`	`.missionStatement > div.background {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-*[_type=="repositories"] {`
	`1`	`+*[_type=="resourcesList"][0].resources[]-> {`
`2`	`2`	`"type": objectOfStudy,`
`3`	`3`	`title,`
`4`	`4`	`author,`