Feat/style: landing page #7

IgboPharaoh · 2024-08-21T13:30:50Z

LANDING PAGE

Install necessary dependencies
Add page icons, images and assets
Add media responsiveness across all screen sizes
Add algorithms for generating categories, types, latest, featured and randomise transcripts

vercel · 2024-08-21T13:30:53Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
registry	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 4, 2024 6:25am

Emmanuel-Develops · 2024-09-03T18:05:09Z

Mobile screen has search button that doesn't do anything (we can remove search for now)

Emmanuel-Develops · 2024-09-03T18:15:22Z

Image doesn't display sometimes, try replicating the issue

IgboPharaoh · 2024-09-04T06:06:43Z

Image doesn't display sometimes, try replicating the issue

Hmmmm, I'll look into it

src/app/components/ExploreTranscripts.tsx

Emmanuel-Develops

The landing page page.ts downloaded to the browser is about 18mb this takes a while to load and longer till interactivity.

This may be due to this bottleneck #7 (review)

A fix will be included in the next PR, for now lets get this merge as 2 other separate PR's depends on this

kouloumos

Post-Merge Review

Great work, @IgboPharaoh! I’ve left a few inline comments on the code, but nothing major.

Below are the issues that Tobi and I found during our review, comparing the current UI against the designs:

Header Section

Logo:
- Desktop: The logo's width and height are incorrect; it should be larger according to the designs. This also affects the padding, which looks off.
- Mobile: The logo's width is incorrect; it should be larger based on the designs.

Hero Section

Background Orange Circles: The circles are missing. You can export them from Figma the same way you exported the transcript cards for the hero section.
Body Text: There is an awkward sentence break in the mobile (and desktop) view. Ideally, the text should fit on one line, and if it doesn’t, the second sentence should appear on its own line.

Featured Transcripts Section

Background Color: The background color doesn’t match the designs. Notice how it transitions when moving between sections.
Card Shadows: The card shadows need to be softer, as seen in the designs on Figma. The shadows for the cards in the "Explore Transcripts" section seem fine, so it’s just an issue here.
"x days ago": The text color is incorrect compared to the designs.

Why Transcripts Section

Background Color: Similar to the "Featured Transcripts" section, the background color is incorrect. Refer to the designs for how it should transition between sections.
First Sub-Section:
- The copy doesn’t match the Figma file; please update it to reflect the correct text.
- Replace the placeholder image with the GIF from the designs.
Sub-Section Heading: The padding is too large; it should be 18px instead of 24px. The font also needs to be slightly bolder to match the design specs.
Sub-Section Body Text: The text stretches too much on larger screens. Refer to the Bitcoin Search landing page for a similar layout; we should aim for a consistent approach.

kouloumos · 2024-09-06T07:23:44Z

contentlayer.config.ts

+    "README.md",
+    "STYLE.md",
+    "twitter_handles.json",
+    ".json",


Nice, I forgot the contentDirExclude when I did the refactoring.

Does ".json" means that it's excluding all the JSON files?

No it doesn't, this and other things in the contentDirExclude array just excludes files at the root directory

So it excludes all JSON files in the root directory? If that's the case then you don't need to separate specify "twitter_handles.json"

let me tag this comment to the pr in prod

kouloumos · 2024-09-06T07:24:45Z

public/images/word-list.png

Please check the designs, we are using a different word-cloud image.

kouloumos · 2024-09-06T07:26:14Z

public/svgs/circle-background.svg

You added this circle-background but I can't see it on the actual page.
Also, there is another outside circle as part of the hero design.

kouloumos · 2024-09-06T07:33:20Z

src/app/components/index.tsx

+import Header from "./Header";
+import HeroSection from "./HeroSection";
+import Logo from "./Logo";
+import Wrapper from "./Wrapper";
+import FeaturedTranscripts from "./FeaturedTranscripts";
+import TranscriptCard, { ExploreTranscriptCard } from "./TranscriptCard";
+import ExploreTranscripts from "./ExploreTranscripts";
+import FooterTop from "./FooterTop";
+import WhyTranscripts from "./WhyTranscripts";
+import FooterComponent from "./FooterComponent";
+import SuggestModal from "./SuggestionModal";
+import ExploreTranscriptClient from "./ExploreTranscriptClient";
+import FeaturedTranscriptClient from "./FeaturedTranscriptClient";
+
+export {
+  Header,
+  HeroSection,
+  Logo,
+  Wrapper,
+  FeaturedTranscripts,
+  FeaturedTranscriptClient,
+  TranscriptCard,
+  ExploreTranscripts,
+  FooterTop,
+  WhyTranscripts,
+  FooterComponent,
+  SuggestModal,
+  ExploreTranscriptClient,
+  ExploreTranscriptCard,
+};


I like using index.ts files as they allow us to export everything from a central location. However, we've been following a different export pattern across the rest of the projects, and I believe it would be best to maintain consistency.

For reference, here's the pattern used in another file (src):

export * from "./review.routes"; export * from "./transaction.routes"; export * from "./transcript.routes"; export * from "./user.routes";

And the alternative we use elsewhere (src):

export { default as ReviewGuidelinesModal } from "./ReviewGuidelinesModal"; export { default as SubmitTranscriptModal } from "./SubmitTranscriptModal"; export { default as RestoreOriginalModal } from "./RestoreOriginalModal"; export { default as SuggestModal } from "./SuggestModal";

Personally, I prefer the second approach, but I’m open to discussing this further to see what works best for everyone.
cc @Emmanuel-Develops

kouloumos · 2024-09-06T07:35:55Z

src/utils/data.ts

+  {
+    href: "https://bitcoindevs.xyz/",
+    image: bitcoindevs,
+    alt: "Bitcoin Devs",
+    title: "Build the future of money - Study & contribute to bitcoin and lightning open source",
+  },
+  {
+    href: "https://chat.bitcoinsearch.xyz",
+    image: chatbtc,
+    alt: "ChatBTC image",
+    title: "Interactive AI chat to learn about bitcoin technology and its history",
+  },
+  {
+    href: "https://bitcoinsearch.xyz/",
+    image: bitcoinSearch,
+    alt: "Bitcoin search",
+    title: "Technical bitcoin search engine",
+  },
+  {
+    href: "https://tldr.bitcoinsearch.xyz/",
+    image: bitcointldr,
+    alt: "Bitcoin TLDR",
+    title: "Daily summary of key bitcoin tech development discussions and updates",
+  },
+  {
+    href: "https://savingsatoshi.com",
+    image: savingSatoshi,
+    alt: "Saving Satoshi",
+    title: "Engaging bitcoin dev intro for coders using technical texts and code challenges",
+  },
+  {
+    href: "https://review.btctranscripts.com/",
+    image: transcriptsreview,
+    alt: "Bitcoin Transcripts Review",
+    title: "Review technical bitcoin transcripts and earn sats",
+  },


@Emmanuel-Develops, does it make sense to store this information, along with the logos for each product, in the components library as a central source of truth? We're currently repeating them across various products, and in some cases, the copy is even inconsistent.

Yes they should be in the component library. Given that the library should be lightweight it would not be wise to have the images in there, rather they should point to where they are hosted. Ideally somewhere on cloudflare.

Cloudflare has a limited free image hosting and that would serve our purposes for now

I was mostly thinking about the text data, but your point regarding the images is spot on! I just opened an issue in order to keep track of this bitcoin-dev-project/bdp-ui#30

* build: install bdp-ui icons * build: set config requirements * style: add assets and icons * chore: remove redundant styles, add menu data * chore: add landing page components * chore: create landing page with responsive styles * fix: build error * replace image assets * add mobile menu and app menu * install bdp-ui from npm * complete landing page requirements * remove search icon, change image path and add priority prop

* simplify contentlayer.config (#6) a simplification of the config alongside some changes to the pages in order to show the structure based on the new simplified implementation. * Feat/style: landing page (#7) * build: install bdp-ui icons * build: set config requirements * style: add assets and icons * chore: remove redundant styles, add menu data * chore: add landing page components * chore: create landing page with responsive styles * fix: build error * replace image assets * add mobile menu and app menu * install bdp-ui from npm * complete landing page requirements * remove search icon, change image path and add priority prop * feat: Add hugo built pages (#15) * feat: fetch and render hugo built pages in nextJs * refactor: use rewrites in place of [...slug] * Fix/landing page build (#18) * add required assets * enhance contentlayer algorithm * add design corrections * filter languages that are not english * remove unnecessary console.log * capitalize titles and sort types * refactor code structure * add product favicon * chore: rm commented code * fix: hash navigation, change stock image to btc prague conference image (#24) --------- Co-authored-by: Andreas <[email protected]> Co-authored-by: Solomon eze <[email protected]>

IgboPharaoh added 6 commits August 21, 2024 14:21

build: install bdp-ui icons

1380c83

build: set config requirements

1c302b8

style: add assets and icons

a81fb2a

chore: remove redundant styles, add menu data

18ab7c9

chore: add landing page components

1ff9fa0

chore: create landing page with responsive styles

e540db7

vercel bot had a problem deploying to Preview August 21, 2024 13:32 Failure

fix: build error

d71c49b

vercel bot deployed to Preview August 21, 2024 13:43 View deployment

IgboPharaoh added 2 commits August 27, 2024 14:54

replace image assets

9f86b99

add mobile menu and app menu

f98ce5b

vercel bot deployed to Preview August 27, 2024 14:13 View deployment

0tuedon mentioned this pull request Sep 2, 2024

Transcript bio data component #13

Closed

IgboPharaoh added 2 commits September 2, 2024 19:22

install bdp-ui from npm

adfada7

complete landing page requirements

55dd3c3

vercel bot deployed to Preview September 2, 2024 18:27 View deployment

IgboPharaoh marked this pull request as ready for review September 2, 2024 18:39

remove search icon, change image path and add priority prop

bb911d4

vercel bot deployed to Preview September 4, 2024 06:25 View deployment

Emmanuel-Develops mentioned this pull request Sep 5, 2024

feat: Add hugo built pages #15

Merged

Emmanuel-Develops reviewed Sep 5, 2024

View reviewed changes

src/app/components/ExploreTranscripts.tsx Show resolved Hide resolved

Emmanuel-Develops approved these changes Sep 5, 2024

View reviewed changes

Emmanuel-Develops merged commit 0c7db98 into staging Sep 5, 2024
2 checks passed

kouloumos reviewed Sep 6, 2024

View reviewed changes

kouloumos mentioned this pull request Sep 12, 2024

Fix/landing page build #18

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/style: landing page #7

Feat/style: landing page #7

IgboPharaoh commented Aug 21, 2024 •

edited

Loading

vercel bot commented Aug 21, 2024 •

edited

Loading

Emmanuel-Develops commented Sep 3, 2024

Emmanuel-Develops commented Sep 3, 2024

IgboPharaoh commented Sep 4, 2024

Emmanuel-Develops left a comment

kouloumos left a comment

kouloumos Sep 6, 2024

IgboPharaoh Sep 11, 2024

kouloumos Sep 12, 2024

IgboPharaoh Sep 12, 2024

kouloumos Sep 6, 2024

kouloumos Sep 6, 2024

kouloumos Sep 6, 2024

kouloumos Sep 6, 2024

Emmanuel-Develops Sep 11, 2024

kouloumos Sep 12, 2024

Feat/style: landing page #7

Feat/style: landing page #7

Conversation

IgboPharaoh commented Aug 21, 2024 • edited Loading

vercel bot commented Aug 21, 2024 • edited Loading

Emmanuel-Develops commented Sep 3, 2024

Emmanuel-Develops commented Sep 3, 2024

IgboPharaoh commented Sep 4, 2024

Emmanuel-Develops left a comment

Choose a reason for hiding this comment

kouloumos left a comment

Choose a reason for hiding this comment

Header Section

Hero Section

Featured Transcripts Section

Why Transcripts Section

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

IgboPharaoh commented Aug 21, 2024 •

edited

Loading

vercel bot commented Aug 21, 2024 •

edited

Loading