Finishing up main page, starting to work on recs.

.gitmodules

@@ -5,7 +5,7 @@
 [submodule "joinlemmy-translations"]
 	path = joinlemmy-translations
 	url = https://github.com/lemmynet/joinlemmy-translations
-	branch = main
+	branch = tailwind_rework
 [submodule "lemmy-translations"]
 	path = lemmy-translations
 	url = https://github.com/lemmynet/lemmy-translations

crawl.mjs

@@ -52,7 +52,7 @@ try {
     process.stdout.write(strData);
   });
 
-  run.on("close", exitCode => {
+  run.on("close", _exitCode => {
     var stats = JSON.parse(savedOutput);
     // Crawl results from all instances include tons of data which needs to be compiled.
     // If it is too much data it breaks the build, so we need to exclude as much as possible.

joinlemmy-translations

@@ -1 +1 @@
-Subproject commit f96ec38a927aa2477d9a1d21f6a637ed8838b913
+Subproject commit 57cc965548287bbf508fbbe8aadf15b1449fb839

lemmy-docs

@@ -1 +1 @@
-Subproject commit 46e7d377c5e27418c89df28e6c620a7a3265b62f
+Subproject commit bc063f46eb15fa09391639a4777b0cabb0cdcef5

lemmy-translations

@@ -1 +1 @@
-Subproject commit 18da10858d8c63750beb06247947f25d91944741
+Subproject commit 0a5b9790fbae41e8dc51021c2d20ec0f5743b1d8

recommended-instances.json

@@ -1,23 +1,12 @@
 {
-  "en": [
+  "recommended": [
-    "sopuli.xyz",
+    "lemmy.ml",
-    "sh.itjust.works",
-    "lemmy.fmhy.ml",
-    "discuss.tchncs.de",
     "lemm.ee",
+    "lemmygrad.ml",
     "reddthat.com",
-    "discuss.online"
+    "hexbear.net",
+    "lemmy.fmhy.ml"
   ],
-  "fr": ["sh.itjust.works"],
-  "da": ["feddit.dk"],
-  "de": ["feddit.de", "discuss.tchncs.de"],
-  "nl": ["feddit.nl"],
-  "pt": ["lemmy.pt"],
-  "pt-PT": ["lemmy.pt"],
-  "pt-BR": ["lemmy.pt"],
-  "eu": ["lemmy.eus"],
-  "ja": ["tabinezumi.net", "lm.korako.me"],
-  "it": ["feddit.it"],
   "exclude": [
     "lemmy.glasgow.social",
     "ds9.lemmy.ml",

src/shared/components/apps.tsx

@@ -1,6 +1,7 @@
 import { Component } from "inferno";
 import { Helmet } from "inferno-helmet";
 import { i18n } from "../i18next";
+import { T } from "inferno-i18next";
 import { BottomSpacer, TEXT_GRADIENT } from "./common";
 import {
   ANDROID_APPS,
@@ -15,7 +16,9 @@ import { Icon } from "./icon";
 
 const TitleBlock = () => (
   <div className="flex flex-col items-center pt-16 mb-8">
-    <p className={`text-4xl ${TEXT_GRADIENT} mb-3`}>{i18n.t("lemmy_apps")}</p>
+    <T i18nKey="lemmy_apps" className="text-4xl font-bold mb-3">
+      #<span className={TEXT_GRADIENT}>#</span>
+    </T>
     <p className="text-2xl text-gray-300 text-center">
       {i18n.t("choose_from_apps")}
     </p>
@@ -45,7 +48,7 @@ interface AppDetailsButtonsProps {
 const AppDetailsButtons = ({ links }: AppDetailsButtonsProps) => (
   <div class="flex flex-row justify-between gap-2">
     {links.map(l => (
-      <a class="btn btn-sm btn-primary text-white" href={l.link}>
+      <a class="btn btn-sm btn-primary text-white normal-case" href={l.link}>
         <Icon icon={l.icon} />
       </a>
     ))}

src/shared/components/common.tsx

@@ -6,6 +6,9 @@ import classNames from "classnames";
 export const TEXT_GRADIENT =
   "bg-gradient-to-r bg-clip-text text-transparent from-[#69D066] to-[#03A80E]";
 
+export const CARD_GRADIENT =
+  "bg-gradient-to-r from-[#797979]/[.05] via-[#07B0BA]/[.15] to-[#797979]/[.05]";
+
 export const BACKGROUND_GRADIENT_1 =
   "min-h-full bg-gradient-to-r from-transparent via-[#12D10E]/[.15] to-transparent";
 
@@ -37,29 +40,35 @@ export const DonateDesc = () => (
 export const DonateButtons = () => (
   <div class="flex flex-row flex-wrap justify-between gap-2">
     <a
-      class="btn btn-primary text-white sm:max-md:btn-block"
+      class="btn btn-primary text-white sm:max-md:btn-block normal-case"
       href="https://liberapay.com/Lemmy"
     >
-      {i18n.t("support_on_liberapay")}
+      <T i18nKey="support_on_liberapay">
+        #<span className="font-bold">#</span>
+      </T>
     </a>
     <a
-      class="btn btn-secondary text-white sm:max-md:btn-block"
+      class="btn btn-secondary text-white sm:max-md:btn-block normal-case"
       href="https://www.patreon.com/dessalines"
     >
-      {i18n.t("support_on_patreon")}
+      <T i18nKey="support_on_patreon">
+        #<span className="font-bold">#</span>
+      </T>
     </a>
     <a
-      class="btn btn-primary text-white sm:max-md:btn-block"
+      class="btn btn-primary text-white sm:max-md:btn-block normal-case"
       href="https://opencollective.com/lemmy"
     >
-      {i18n.t("support_on_opencollective")}
+      <T i18nKey="support_on_opencollective">
+        #<span className="font-bold">#</span>
+      </T>
     </a>
   </div>
 );
 
 export const SupportDonateBlock = () => (
   <div className="flex flex-col items-center pt-16">
-    <div className="card card-bordered bg-neutral-800 shadow-xl">
+    <div className={`card card-bordered ${CARD_GRADIENT} shadow-xl`}>
       <div className="card-body px-32 py-16">
         <p class={`card-title text-4xl mb-3 ${TEXT_GRADIENT}`}>
           {i18n.t("support_donate")}

src/shared/components/contact.tsx

@@ -29,7 +29,10 @@ const ContactBlock = () => (
 );
 
 const ContactBtn = ({ title, url }) => (
-  <a className="btn btn-block bg-neutral-800 mb-3 justify-start" href={url}>
+  <a
+    className="btn btn-block bg-neutral-800 mb-3 justify-start normal-case"
+    href={url}
+  >
     <Icon icon="embed" classes={`fill-current text-primary`} />
     <span className="underline">{title}</span>
   </a>

src/shared/components/donate.tsx

@@ -137,7 +137,10 @@ const GoldSponsorCards = ({ title, sponsors }: GoldSponsorCardsProps) =>
       <p class="text-sm text-gray-300 mb-3">{title}</p>
       <div class="flex flex-row flex-wrap gap-2 mb-2">
         {sponsors.map(s => (
-          <a class="btn btn-primary btn-outline w-32 h-16" href={s.link}>
+          <a
+            class="btn btn-primary btn-outline w-32 h-16 normal-case"
+            href={s.link}
+          >
             <img src={s.avatar} />
           </a>
         ))}

src/shared/components/instances-definitions.ts

@@ -29,3 +29,101 @@ export const INSTANCE_HELPERS: InstanceHelper[] = [
     link: "https://browse.feddit.de/",
   },
 ];
+
+// TODO add i18n strings, Icons
+export enum InstanceCategory {
+  Tech,
+  Sports,
+}
+
+export interface RecommendedInstance {
+  domain: string;
+  languages: string[];
+  categories: InstanceCategory[];
+}
+
+// TODO fix these up
+export const RECOMMENDED_INSTANCES: RecommendedInstance[] = [
+  {
+    domain: "lemmy.fmhy.ml",
+    languages: ["en"],
+    categories: [InstanceCategory.Tech],
+  },
+  {
+    domain: "discuss.tchncs.de",
+    languages: ["en"],
+    categories: [InstanceCategory.Tech],
+  },
+  {
+    domain: "lemm.ee",
+    languages: ["en"],
+    categories: [InstanceCategory.Tech],
+  },
+  {
+    domain: "reddthat.com",
+    languages: ["en"],
+    categories: [InstanceCategory.Tech],
+  },
+  {
+    domain: "discuss.online",
+    languages: ["en"],
+    categories: [InstanceCategory.Tech],
+  },
+  {
+    domain: "feddit.dk",
+    languages: ["da"],
+    categories: [InstanceCategory.Tech],
+  },
+  {
+    domain: "feddit.de",
+    languages: ["de"],
+    categories: [InstanceCategory.Tech],
+  },
+
+  {
+    domain: "discuss.tchncs.de",
+    languages: ["de"],
+    categories: [InstanceCategory.Tech],
+  },
+  {
+    domain: "feddit.nl",
+    languages: ["nl"],
+    categories: [InstanceCategory.Tech],
+  },
+
+  {
+    domain: "lemmy.pt",
+    languages: ["pt", "pt-PT", "pt-BR"],
+    categories: [InstanceCategory.Tech],
+  },
+
+  {
+    domain: "lemmy.pt",
+    languages: ["pt", "pt-PT", "pt-BR"],
+    categories: [InstanceCategory.Tech],
+  },
+
+  {
+    domain: "lemmy.eus",
+    languages: ["eu"],
+    categories: [InstanceCategory.Tech],
+  },
+
+  {
+    domain: "tabinezumi.net",
+    languages: ["ja"],
+    categories: [InstanceCategory.Tech],
+  },
+
+  {
+    domain: "lm.korako.me",
+    languages: ["ja"],
+    categories: [InstanceCategory.Tech],
+  },
+
+  {
+    domain: "feddit.it",
+    languages: ["it"],
+    categories: [InstanceCategory.Tech],
+  },
+];

src/shared/components/instances.tsx

@@ -1,6 +1,7 @@
 import { Component, InfernoEventHandler } from "inferno";
 import { Helmet } from "inferno-helmet";
 import { i18n } from "../i18next";
+import { T } from "inferno-i18next";
 import { instance_stats } from "../instance_stats";
 import { mdToHtml, numToSI } from "../utils";
 import { Badge, TEXT_GRADIENT } from "./common";
@@ -9,9 +10,9 @@ import { Icon } from "./icon";
 
 const TitleBlock = () => (
   <div className="flex flex-col items-center pt-16 mb-16">
-    <p className={`text-4xl ${TEXT_GRADIENT} mb-3`}>
+    <T i18nKey="lemmy_servers" className="text-4xl font-bold mb-3">
-      {i18n.t("lemmy_servers")}
+      #<span className={TEXT_GRADIENT}>#</span>
-    </p>
+    </T>
     <p className="text-xl text-gray-300 text-center max-w-xl">
       {i18n.t("instance_totals", {
         instances: numToSI(instance_stats.stats.crawled_instances),
@@ -89,8 +90,6 @@ const InstanceCard = ({ instance }: InstanceCardProps) => {
 
   const modalId = `modal_${domain}`;
 
-  // TODO do users / month, posts / month, comments / month instead of totals
-
   return (
     <div className="card card-bordered bg-neutral-900 shadow-xl">
       <div className="card-body p-4">
@@ -116,19 +115,18 @@ const InstanceCard = ({ instance }: InstanceCardProps) => {
         <p className="text-sm text-gray-300 mb-2">{description}</p>
         <div class="flex flex-row flex-wrap justify-between gap-2">
           <a
-            class="btn btn-primary text-white sm:max-md:btn-block bg-gradient-to-r from-[#69D066] to-[#03A80E]"
+            class="btn btn-primary text-white sm:max-md:btn-block bg-gradient-to-r from-[#69D066] to-[#03A80E] normal-case"
             href={buildUrl(domain)}
           >
             {i18n.t("join_a_server")}
           </a>
           <button
-            class="btn btn-secondary btn-outline text-white sm:max-md:btn-block"
+            class="btn btn-secondary btn-outline text-white sm:max-md:btn-block normal-case"
             onClick={() =>
               (document.getElementById(modalId) as any).showModal()
             }
           >
-            {/* TODO add more information */}
+            {i18n.t("more_information")}
-            {i18n.t("more_features")}
           </button>
         </div>
       </div>
@@ -178,7 +176,7 @@ export const StatsBadges = ({ users, comments, monthlyUsers }) => (
         <div className="text-sm text-gray-500">
           <Icon icon="user-check" classes="mr-2" />
           <span>
-            {i18n.t("users_active_per_month", {
+            {i18n.t("per_month", {
               formattedCount: monthlyUsers.toLocaleString(),
             })}
           </span>
@@ -221,8 +219,8 @@ export const DetailsModal = ({
           comments={comments}
           monthlyUsers={monthlyUsers}
         />
-        <div className="btn btn-primary btn-outline btn-sm">
+        <div className="btn btn-primary btn-outline btn-sm normal-case">
-          <a href={buildUrl(domain)}>{i18n.t("join_a_server")}</a>
+          <a href={buildUrl(domain)}>{i18n.t("join")}</a>
         </div>
       </div>
       {sidebar && (
@@ -231,10 +229,10 @@ export const DetailsModal = ({
         </article>
       )}
       <a
-        className="btn btn-primary btn-block text-white"
+        className="btn btn-primary btn-block text-white normal-case"
         href={buildUrl(domain)}
       >
-        {i18n.t("join_a_server")}
+        {i18n.t("join")}
       </a>
     </div>
   </dialog>

src/shared/components/main.tsx

@@ -5,11 +5,16 @@ import { i18n } from "../i18next";
 import { T } from "inferno-i18next";
 import { isBrowser } from "../utils";
 import { Icon } from "./icon";
-import { BottomSpacer, SupportDonateBlock, TEXT_GRADIENT } from "./common";
+import {
+  BottomSpacer,
+  CARD_GRADIENT,
+  SupportDonateBlock,
+  TEXT_GRADIENT,
+} from "./common";
 
 const TitleBlock = () => (
-  <div className="pt-16 flex flex-col items-center">
+  <div className="py-16 flex flex-col items-center">
-    <div className="flex flex-col items-center mb-2">
+    <div className="flex flex-col items-center gap-4 mb-8">
       <p className={`text-6xl font-bold ${TEXT_GRADIENT}`}>Lemmy</p>
       <p className="text-3xl font-medium text-center">{i18n.t("lemmy_desc")}</p>
     </div>
@@ -20,15 +25,51 @@ const TitleBlock = () => (
   </div>
 );
 
+const CarouselBlock = () => (
+  <div>
+    <div className="carousel carousel-center p-4 space-x-4 rounded-box">
+      <div id="item1" className="carousel-item w-10/12">
+        <img
+          src={"/static/assets/images/main_screenshot.webp"}
+          className="rounded-box"
+        />
+      </div>
+      <div id="item2" className="carousel-item w-10/12">
+        <img
+          src={"/static/assets/images/main_screenshot.webp"}
+          className="rounded-box"
+        />
+      </div>
+      <div id="item3" className="carousel-item w-10/12">
+        <img
+          src={"/static/assets/images/main_screenshot.webp"}
+          className="rounded-box"
+        />
+      </div>
+    </div>
+    <div className="flex justify-center w-full py-2 gap-4">
+      <a href="#item1" className={TEXT_GRADIENT}>
+        ●
+      </a>
+      <a href="#item2" className={TEXT_GRADIENT}>
+        ●
+      </a>
+      <a href="#item3" className={TEXT_GRADIENT}>
+        ●
+      </a>
+    </div>
+  </div>
+);
+
 const JoinServerButton = () => (
-  <Link className="btn btn-primary text-white" to="/instances">
+  <Link className="btn btn-primary text-white normal-case" to="/instances">
     {i18n.t("join_a_server")}
   </Link>
 );
 
 const RunServerButton = () => (
   <a
-    class="btn btn-secondary text-white"
+    class="btn btn-secondary text-white normal-case"
     href={`/docs/administration/administration.html`}
   >
     {i18n.t("run_a_server")}
@@ -37,11 +78,14 @@ const RunServerButton = () => (
 
 const FollowCommunitiesBlock = () => (
   <div className="flex flex-col items-center mt-16">
-    <div className="card card-bordered bg-neutral-800 shadow-xl">
+    <div className={`card card-bordered ${CARD_GRADIENT} shadow-xl`}>
       <div className="card-body items-center px-32 py-16">
-        <p class="card-title text-4xl text-center mb-3">
+        <T
-          {i18n.t("follow_communities")}
+          i18nKey="follow_communities"
-        </p>
+          className="card-title font-bold text-4xl text-center mb-3 inline-block"
+        >
+          #<span className={TEXT_GRADIENT}>#</span>
+        </T>
         <p class="text-sm text-gray-300 text-center mb-6">
           {i18n.t("lemmy_long_desc")}
         </p>
@@ -51,10 +95,10 @@ const FollowCommunitiesBlock = () => (
   </div>
 );
 
-const FeatureCard = ({ pic, title, subtitle }) => (
+const FeatureCard = ({ pic, title, subtitle, classes }) => (
-  <div className="card card-bordered bg-neutral-800 shadow-xl">
+  <div className={`card card-bordered bg-neutral-800 shadow-xl ${classes}`}>
-    <figure className="px-10 pt-10">
+    <figure className="p-4">
-      <img src={pic} className="rounded-xl" />
+      <img src={pic} className="rounded-xl w-full object-fill min-h-[300px]" />
     </figure>
     <div className="card-body">
       <h2 className="card-title text-secondary">{title}</h2>
@@ -63,9 +107,10 @@ const FeatureCard = ({ pic, title, subtitle }) => (
   </div>
 );
 
-const OpenSourceCard = () => (
+const OpenSourceCard = ({ classes }) => (
   <FeatureCard
-    pic={"/static/assets/images/review_pic.webp"}
+    classes={classes}
+    pic={"/static/assets/images/main_open_source.webp"}
     title={i18n.t("open_source")}
     subtitle={
       <T i18nKey="open_source_desc">
@@ -87,9 +132,10 @@ const OpenSourceCard = () => (
   />
 );
 
-const BlazingFastCard = () => (
+const BlazingFastCard = ({ classes }) => (
   <FeatureCard
-    pic={"/static/assets/images/code_pic.webp"}
+    classes={classes}
+    pic={"/static/assets/images/main_blazing_fast.webp"}
     title={i18n.t("blazing_fast")}
     subtitle={
       <T i18nKey="blazing_fast_desc">
@@ -114,33 +160,40 @@ const BlazingFastCard = () => (
   />
 );
 
-const ModToolsCard = () => (
+const ModToolsCard = ({ classes }) => (
   <FeatureCard
-    pic={"/static/assets/images/mod_pic.webp"}
+    classes={classes}
+    pic={"/static/assets/images/main_powerful.webp"}
     title={i18n.t("mod_tools")}
     subtitle={i18n.t("mod_tools_desc")}
   />
 );
 
+const CensorshipCard = ({ classes }) => (
+  <FeatureCard
+    classes={classes}
+    pic={"/static/assets/images/main_censorship.webp"}
+    title={i18n.t("censorship_resistant")}
+    subtitle={i18n.t("censorship_resistant_desc")}
+  />
+);
+
+const FederationCard = ({ classes }) => (
+  <FeatureCard
+    classes={classes}
+    pic={"/static/assets/images/main_federation.webp"}
+    title={i18n.t("federation")}
+    subtitle={i18n.t("federation_desc")}
+  />
+);
+
 const FeatureCardsBlock = () => (
   <div className="grid md:grid-cols-12 grid-cols-1 gap-4 mt-16">
-    <div className="md:col-span-7">
+    <OpenSourceCard classes="md:col-span-7" />
-      <OpenSourceCard />
+    <BlazingFastCard classes="md:col-span-5" />
-    </div>
+    <ModToolsCard classes="md:col-span-4" />
-    <div className="md:col-span-5">
+    <CensorshipCard classes="md:col-span-4" />
-      <BlazingFastCard />
+    <FederationCard classes="md:col-span-4" />
-    </div>
-    <div className="md:col-span-4">
-      <ModToolsCard />
-    </div>
-    {/* TODO Add censorship and other cards */}
-
-    <div className="md:col-span-4">
-      <ModToolsCard />
-    </div>
-    <div className="md:col-span-4">
-      <ModToolsCard />
-    </div>
   </div>
 );
 
@@ -148,16 +201,18 @@ const DiscussionPlatformBlock = () => (
   <div className="flex flex-col items-center mt-16">
     <div className="card card-bordered bg-gradient-to-r text-transparent from-primary to-secondary shadow-xl">
       <div className="card-body items-center px-32 py-16">
-        <p class="card-title text-4xl text-center text-white mb-3">
+        <T
-          {i18n.t("create_discussion_platform")}
+          i18nKey="create_discussion_platform"
-        </p>
+          className="card-title font-medium text-4xl text-center text-white mb-3 inline-block"
-        <p class="text-sm text-white text-center mb-6">
-          <T i18nKey="create_discussion_platform_desc">
-            #
-            <a
-              className="link"
-              href={`/docs/administration/administration.html`}
         >
+          #<span className="font-bold">#</span>
+        </T>
+        <T
+          i18nKey="create_discussion_platform_desc"
+          className="text-sm text-white text-center mb-6"
+        >
+          #
+          <a className="link" href={`/docs/administration/administration.html`}>
             #
           </a>
           <i>#</i>
@@ -165,22 +220,22 @@ const DiscussionPlatformBlock = () => (
             #
           </a>
         </T>
-        </p>
+        <Link
-        <Link className="btn btn-primary bg-white" to="/instances">
+          className="btn btn-primary bg-white text-primary normal-case"
-          <div className="text-primary">{i18n.t("join_a_server")}</div>
+          to="/instances"
+        >
+          {i18n.t("join_a_server")}
         </Link>
       </div>
     </div>
   </div>
 );
 
-// TODO more FEATURES(needs to be green)
-// TODO add all of these ones
 const MoreFeaturesBlock = () => (
   <div className="mt-16">
-    <div className={`text-center text-4xl mb-8 ${TEXT_GRADIENT}`}>
+    <T i18nKey="more_features" className={`text-center text-4xl mb-8`}>
-      {i18n.t("more_features")}
+      #<span className={TEXT_GRADIENT}>#</span>
-    </div>
+    </T>
     <div className="grid md:grid-cols-5 grid-cols-1 gap-4">
       <MoreFeaturesCard
         icons={<Icon icon="embed" />}
@@ -343,7 +398,7 @@ const MoreFeaturesBlock = () => (
             <Icon icon="eye-off" />
           </div>
         }
-        text={"TODO Censorship resistant"}
+        text={i18n.t("censorship_resistant_desc")}
       />
     </div>
   </div>
@@ -372,11 +427,15 @@ export class Main extends Component<any, any> {
   render() {
     const title = i18n.t("lemmy_title");
     return (
-      <div className="container mx-auto bg-blue">
+      <div>
         <Helmet title={title}>
           <meta property={"title"} content={title} />
         </Helmet>
+        <div className="container mx-auto">
           <TitleBlock />
+        </div>
+        <CarouselBlock />
+        <div className="container mx-auto">
           <FollowCommunitiesBlock />
           <FeatureCardsBlock />
           <DiscussionPlatformBlock />
@@ -384,6 +443,7 @@ export class Main extends Component<any, any> {
           <SupportDonateBlock />
           <BottomSpacer />
         </div>
+      </div>
     );
   }
 }

src/shared/components/navbar.tsx

@@ -8,7 +8,7 @@ const NavLink = ({ content }) => <li className="text-gray-400">{content}</li>;
 
 const NavLinks = () => (
   <>
-    <NavLink content={<Link to="/instances">{i18n.t("join_a_server")}</Link>} />
+    <NavLink content={<Link to="/instances">{i18n.t("join")}</Link>} />
     <NavLink content={<Link to="/news">{i18n.t("news")}</Link>} />
     <NavLink content={<Link to="/apps">{i18n.t("apps")}</Link>} />
     <NavLink content={<Link to="/donate">{i18n.t("donate")}</Link>} />
@@ -45,14 +45,14 @@ export const Navbar = ({ footer = false }) => (
     </div>
     <div className="navbar-end">
       {footer ? (
-        <a className="text-sm text-gray-600 TODO sm:max-lg:hidden">
+        <a className="text-sm text-gray-600 sm:max-lg:hidden">
-          @c Lemmy -2023. All Rights Reserved.
+          {i18n.t("copyright_line")}
         </a>
       ) : (
         <>
           <select
             onChange={linkEvent(this, handleLanguageChange)}
-            class="select select-ghost select-bordered text-gray-400"
+            class="select select-sm select-ghost select-bordered text-gray-400"
           >
             {languageList().map((language, i) => (
               <option

src/shared/components/news.tsx

@@ -42,7 +42,7 @@ function previewMarkdown(markdown: string): string {
 }
 
 const TitleBlock = () => (
-  <div className="pt-16 text-center text-4xl mb-8">{title}</div>
+  <div className="pt-16 text-center text-4xl font-bold mb-8">{title}</div>
 );
 
 const NewsCards = () => buildNewsInfoArray().map(n => <NewsCard news={n} />);
@@ -70,7 +70,10 @@ const NewsCard = ({ news }: NewsProps) => (
           </div>
           <div className="text-sm text-gray-300">{news.preview}</div>
         </div>
-        <Link to={news.url} className="md:col-span-2 btn btn-secondary">
+        <Link
+          to={news.url}
+          className="md:col-span-2 btn btn-secondary normal-case"
+        >
           {i18n.t("read_more")}
         </Link>
       </div>