Merge pull request #51 from Developer-DAO/feat/styling-fixes

Feat/styling fixes

README.md

@@ -42,25 +42,25 @@ This monorepo includes a few apps and packages.
 Run the following command:
 
 ```
-npx degit markkos89/turbo-monorepo-template my-monorepo
-cd my-monorepo
+git clone https://github.com/Developer-DAO/academy-turbo
+cd academy-turbo
 pnpm install
 ```
 
 ### Develop Next.js
 
-If you want to start `apps/website-ssr` and `apps/website` in development mode, and watch for changes in `packages/ui`, run at the root:
+If you want to start `apps/academy` in development mode, and watch for changes in `packages/ui`, run at the root:
 
 ```
-pnpm dev
+pnpm dev --filter academy
 ```
 
 ### Build Next.js
 
-If you want to build `apps/website-ssr` and `apps/website` for production, run at the root:
+If you want to build `apps/academy` for production, run at the root:
 
 ```
-pnpm build
+pnpm build --filter academy
 ```
 
 If you want to see an analysis of the generated bundles, specify the `ANALYZE` environment variable:

TODO.md

@@ -0,0 +1,19 @@
+#### MVP release TODOs
+
+- ~~trackpage: add half-width image~~
+- trackpage: we can try add another track
+- intro-to-ethereum page: more length in the track description (to wolovim)
+- ~~tracks/lessons card: add the border from figma (static and :hover border)~~
+- lesson's page: fix the mdx components (/component/mdx/Components.tsx)
+- remove overflow on tracksPage
+- ~~remove polygon logo from partners~~
+- ~~social buttons have incorrect vertical alignment (from wolovim - github, twitter and mirror logos)~~
+- lists (bullet points) on mdx is not being rendered correctly
+- headers lacks of some padding (maybe bottom padding)
+- wallet integration must be checked (markkos89)
+
+#### Links that are missing:
+
+- feedback button
+- newsletter button
+- mirror.xyz button

apps/academy/src/components/AboutCourse.tsx

@@ -1,27 +1,25 @@
 interface AboutCourseProps {
   lessonDescription: string;
+  tags: string[];
 }
 
-export default function AboutCourse({ lessonDescription }: AboutCourseProps) {
+export default function AboutCourse({ lessonDescription, tags }: AboutCourseProps) {
   return (
     <article className="px-7 pt-14 lg:ml-16 lg:w-[42rem] lg:p-0 ">
       <h2 className="text-2xl font-bold lg:text-3xl">About This Course</h2>
       <div className="mt-4">
-        <div className="mr-2 inline-flex h-8 w-14 items-center justify-center gap-2 rounded-3xl border border-neutral-600 border-opacity-30 bg-yellow-400 bg-opacity-40 p-2 backdrop-blur-md">
-          <div className="font-['Clash Display'] text-center text-sm font-semibold text-white">
-            Web3
+        {tags.map((tag, idx) => (
+          <div
+            key={idx}
+            className={`mr-2 inline-flex h-8 w-20 items-center justify-center gap-2 rounded-3xl border border-neutral-600 border-opacity-30 ${
+              idx % 3 === 0 ? "bg-[#FF0000]" : idx % 2 === 0 ? "bg-[#FAFF00]" : "bg-[#00F0FF]"
+            } bg-opacity-40 p-2 backdrop-blur-md`}
+          >
+            <div className="font-['Clash Display'] p-4 text-center text-sm font-semibold text-white">
+              {tag}
+            </div>
           </div>
-        </div>
-        <div className="mr-2 inline-flex h-8 w-14 items-center justify-center gap-2 rounded-3xl border border-neutral-600 border-opacity-30 bg-red-600 bg-opacity-30 p-2 backdrop-blur-md">
-          <div className="font-['Clash Display'] text-center text-sm font-semibold text-white">
-            Eth
-          </div>
-        </div>
-        <div className="inline-flex h-8 w-20 items-center justify-center gap-2 rounded-3xl border border-neutral-600 border-opacity-30 bg-cyan-400 bg-opacity-30 p-2 backdrop-blur-md">
-          <div className="font-['Clash Display'] text-center text-sm font-semibold text-white">
-            Beginner
-          </div>
-        </div>
+        ))}
       </div>
       <p className="mt-4 leading-tight tracking-wide lg:text-xl">{lessonDescription}</p>
     </article>

apps/academy/src/components/Header.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { useRouter } from "next/router";
 import type { FunctionComponent } from "react";
-import { Button,type NavItem, SideBar, TopBar } from "ui";
+import { Button, type NavItem, SideBar, TopBar } from "ui";
 
 import { ConnectButton } from "@/components/ConnectButton";
 
@@ -30,15 +30,17 @@ const PageHeader: FunctionComponent = () => {
   return (
     <header className="main-container absolute left-0 right-0 top-0 z-50 flex items-center justify-between pt-6 md:flex-row md:pt-0">
       <div className="hidden lg:flex ">
-        {pathname === "/" ? (
-          <div className="mt-14">
+        {pathname === "/" || pathname === "/tracks" ? (
+          <div className="mt-10">
             <TopBar menus={sampleMenus} />
           </div>
         ) : (
           <div className="mt-7 flex items-center justify-around gap-36 text-white lg:mt-8 lg:flex lg:justify-between lg:gap-5 lg:self-stretch">
             <div className="lg:ml-8 lg:flex lg:basis-[0%] lg:flex-col lg:items-stretch">
               <Button
-                onClick={() => { router.back(); }}
+                onClick={() => {
+                  router.back();
+                }}
                 variant="text"
                 className="flex flex-col text-white hover:text-black"
               >
@@ -75,7 +77,9 @@ const PageHeader: FunctionComponent = () => {
           ]}
         />
       </div>
-      <ConnectButton />
+      <div className="mt-10">
+        <ConnectButton />
+      </div>
     </header>
   );
 };

apps/academy/src/components/Layout.tsx

@@ -1,14 +1,17 @@
+import { useRouter } from "next/router";
 import type { FunctionComponent, PropsWithChildren } from "react";
 import { Footer } from "ui";
 
 import { Header } from "@/components/Header";
 
 export const Layout: FunctionComponent<PropsWithChildren> = ({ children }) => {
+  const router = useRouter();
+  const { pathname } = router;
   return (
     <>
       <Header />
-      {children}
-      <Footer />
+      <main className="">{children}</main>
+      {pathname !== "/tracks" ? <Footer /> : null}
     </>
   );
 };

apps/academy/src/components/TracksLayout.tsx

@@ -8,6 +8,7 @@ interface TracksLayoutProps {
   trackAuthor: string;
   trackAuthorDescription: string;
   trackAuthorTwitter: string;
+  tags: string[];
 }
 
 export default function TracksLayout({
@@ -17,6 +18,7 @@ export default function TracksLayout({
   trackAuthor,
   trackAuthorDescription,
   trackAuthorTwitter,
+  tags,
 }: TracksLayoutProps) {
   return (
     <main className="pt-32 text-white">
@@ -26,7 +28,7 @@ export default function TracksLayout({
       </section>
       <div className="flex-col justify-start lg:pt-24">
         <div className="">
-          <AboutCourse lessonDescription={trackDescription} />
+          <AboutCourse lessonDescription={trackDescription} tags={tags} />
         </div>
         <div className="text-left ">
           <TrackAuthor

apps/academy/src/pages/tracks/index.tsx

@@ -11,23 +11,87 @@ const TracksPage = () => {
       description:
         "Foundry is a blazing fast, portable and modular toolkit for Ethereum application development written in Rust.",
       tags: ["Beginner", "Web3", "DeFi"],
+      trackPath: "/tracks/intro-to-ethereum",
+    },
+    {
+      title: "Intro to Ethereum Part I, II & III.",
+      author: "wolovim",
+      imgPath: "/image16.png",
+      description:
+        "Foundry is a blazing fast, portable and modular toolkit for Ethereum application development written in Rust.",
+      tags: ["Beginner", "Web3", "DeFi"],
+      trackPath: "/tracks/intro-to-ethereum",
+    },
+    {
+      title: "Intro to Ethereum Part I, II & III.",
+      author: "wolovim",
+      imgPath: "/image16.png",
+      description:
+        "Foundry is a blazing fast, portable and modular toolkit for Ethereum application development written in Rust.",
+      tags: ["Beginner", "Web3", "DeFi"],
+      trackPath: "/tracks/intro-to-ethereum",
+    },
+    {
+      title: "Intro to Ethereum Part I, II & III.",
+      author: "wolovim",
+      imgPath: "/image16.png",
+      description:
+        "Foundry is a blazing fast, portable and modular toolkit for Ethereum application development written in Rust.",
+      tags: ["Beginner", "Web3", "DeFi"],
+      trackPath: "/tracks/intro-to-ethereum",
     },
   ];
   return (
-    <div className="relative mx-60 mb-40 mt-40 flex  ">
-      <div className="w-[50%] border text-white">TracksPage Background Image</div>
-      <div className="w-[50%] p-20">
-        {tracksArray.map((track, idx) => (
-          <Link href="/tracks/intro-to-ethereum" key={idx}>
-            <TrackCard
-              imgSrc={track.imgPath}
-              tags={track.tags}
-              title={track.title}
-              author={track.author}
-              description={track.description}
-            />
-          </Link>
-        ))}
+    // <div className="relative mx-60 mb-40 mt-40 flex  ">
+    //   <div className="w-[50%] border text-white">TracksPage Background Image</div>
+    //   <div className="w-[50%] p-20">
+    //     {tracksArray.map((track, idx) => (
+    //       <Link href="/tracks/intro-to-ethereum" key={idx}>
+    //         <TrackCard
+    //           imgSrc={track.imgPath}
+    //           tags={track.tags}
+    //           title={track.title}
+    //           author={track.author}
+    //           description={track.description}
+    //         />
+    //       </Link>
+    //     ))}
+    //   </div>
+    // </div>
+    <div className="flex h-full max-h-screen w-full flex-col space-y-10 overflow-hidden bg-black lg:flex-row">
+      <div
+        className="flex h-full flex-1 flex-col items-center justify-between 
+overflow-hidden bg-[url('/fundamental-bg.jpeg')] bg-cover bg-no-repeat object-center pt-[300px] md:pt-[325px] lg:fixed lg:inset-y-0 lg:w-1/2"
+      >
+        <div>
+          <h2 className="text-bttf text-3xl text-white sm:text-5xl">Fundamentals</h2>
+        </div>
+        <div className="md:hidden" />
+        <div className="flex justify-center">
+          <p className="max-w-[275px] text-center text-2xl font-bold text-white sm:max-w-xs sm:text-3xl md:max-w-full">
+            Nail the basics and then take on a track.
+          </p>
+        </div>
+        <div />
+      </div>
+      <div className="h-full overflow-hidden lg:fixed lg:right-0 lg:top-20 lg:h-screen lg:w-1/2">
+        <div className="flex w-full flex-1 flex-col space-y-10 overflow-hidden overflow-y-scroll bg-black px-8 pb-14 lg:max-h-screen lg:pb-28">
+          <div className="flex w-full justify-center overflow-hidden md:px-8 lg:pb-10">
+            <div className="grid w-fit justify-center gap-5 overflow-hidden sm:grid-cols-2 md:gap-x-10 md:gap-y-8 lg:grid-cols-1 lg:pb-8 xl:grid-cols-2">
+              {tracksArray.map((track, idx) => (
+                <Link href={track.trackPath} key={idx}>
+                  <TrackCard
+                    imgSrc={track.imgPath}
+                    tags={track.tags}
+                    title={track.title}
+                    author={track.author}
+                    description={track.description}
+                  />
+                </Link>
+              ))}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );

apps/academy/src/pages/tracks/intro-to-ethereum/index.tsx

@@ -42,6 +42,7 @@ const IntroToEthereumPage = () => {
         trackAuthor="wolovim"
         trackAuthorDescription="wolovim is a Full Stack Python Developer at the Ethereum Foundation."
         trackAuthorTwitter="@wolovim.eth"
+        tags={["Beginner", "Web3", "Eth"]}
       >
         <div className="flex w-full gap-10 p-20">
           {tracksArray.map((track, idx) => (

packages/ui/src/components/Banners/PartnerBanner.tsx

@@ -32,24 +32,23 @@ export const PartnerBanner: FC<PartnerBannerProps> = ({ href, imgSrc }) => {
       </div>
       <div className="mx-8 mt-8 max-w-sm md:m-auto">
         <div className="flex flex-col items-center gap-x-6 md:flex-row">
-          <Image src={imgSrc} width={120} height={120} alt="partner" className="rounded-full" />
+          <Image src={imgSrc} width={250} height={250} alt="partner" className="rounded-full" />
           <div className="separator" />
-          <div className=" flex flex-wrap items-center justify-center gap-6 md:justify-normal">
-            {[
-              "/partners/zerion.png",
-              "/partners/polygon-logo.png",
-              "/partners/pokt.png",
-              "/partners/api3-logo.png",
-            ].map((e, i) => (
-              <Image
-                key={i}
-                src={e}
-                width={200}
-                height={50}
-                alt="partner"
-                className="h-auto max-h-10 w-auto"
-              />
-            ))}
+          <div className=" flex flex-wrap items-center justify-center gap-10 md:justify-normal">
+            {["/partners/pokt.png", "/partners/zerion.png", "/partners/api3-logo.png"].map(
+              (logoPath, i) => (
+                <Image
+                  key={i}
+                  src={logoPath}
+                  width={200}
+                  height={50}
+                  alt="partner"
+                  className={`h-auto max-h-14 w-auto ${i === 0 ? "mb-3 pl-2" : ""} ${
+                    i === 2 ? "max-h-20" : ""
+                  }`}
+                />
+              ),
+            )}
           </div>
         </div>
       </div>