feat: create hub page

[thewbuk]

Figma

Because

• Implements new hub page

This commit

• New hub page, new "What's new" and "Newsletter" components, Featured pipelines, username display, pipelines count etc

TODO BIG:

• [x] Connect to backend for "featured" pipelines. Waiting for backend to be populated

TODO SMALL:

• [x] Sorting works but selecting some combinations does not show both ticks
• [x] Blogs are not sorted correctly and the date has the wrong format
• [x] Change next/previous icons in blog component
• [ ] Implement remark formatter
• [ ] Use current formatDate.ts (if possible)
• [x] Update icons in dropdown
• [ ] Change bg below divider
• [ ] Divider full width of page
• [x] Add link to blog post on image and description. Important: Currently using slug attributes from mdx files. If the slug does not correspond to URL the link will fail.

[linear[bot]]

INS-4432 Refactor Instill Hub landing page

[github-actions[bot]]

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	77.63 KB (1 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

[github-actions[bot]]

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	77.63 KB (3 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

[github-actions[bot]]

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	77.63 KB (3 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

[github-actions[bot]]

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page	Size (compressed)
global	77.63 KB (-2 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

[github-actions[bot]]

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page	Size (compressed)
global	77.63 KB (-2 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

[EiffelFly]

@thewbuk When I begin to validate the style, I immediately discover that there have many stuffs deviate from the design handover.

1. The discord/feature banner's position is wrong
2. The what's new button is wrong
3. The sort dropdown is wrong

Please make sure your result is completely align with the design-handover, if you find any issue you can always bring that up and discuss a workaround.

Design handover

Current implementation