TML-9999 feat: update normalize css + init home hero

package.json

@@ -36,8 +36,8 @@
     "@tanstack/react-table": "8.19.3",
     "@techmely/cache": "1.0.10",
     "@techmely/domain-driven": "1.1.4",
-    "@techmely/es-toolkit": "^1.0.5",
-    "@techmely/head": "0.2.0",
+    "@techmely/es-toolkit": "^1.0.8",
+    "@techmely/head": "0.2.1",
     "@techmely/hono": "1.1.0",
     "@techmely/logger": "1.1.3",
     "@techmely/metrics": "1.0.10",
@@ -57,19 +57,19 @@
     "clsx": "2.1.1",
     "firebase": "10.12.4",
     "firebase-admin": "12.3.0",
-    "framer-motion": "11.3.17",
+    "framer-motion": "11.3.19",
     "fuse.js": "7.0.0",
     "gsap": "3.12.5",
-    "hono": "^4.4.7",
+    "hono": "^4.5.3",
     "jose": "5.6.3",
     "kysely": "0.27.4",
     "million": "3.1.11",
     "nanoid": "5.0.7",
     "nprogress": "0.2.0",
-    "openai": "4.53.1",
+    "openai": "4.53.2",
     "perfume.js": "9.4.0",
     "pino": "9.3.2",
-    "posthog-js": "1.150.0",
+    "posthog-js": "1.150.1",
     "qrcode": "1.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -94,14 +94,14 @@
     "@biomejs/biome": "^1.8.3",
     "@cucumber/cucumber": "10.8.0",
     "@deploysentinel/playwright": "0.3.4",
-    "@hono/vite-dev-server": "^0.12.2",
+    "@hono/vite-dev-server": "^0.13.1",
     "@playwright/test": "^1.45.3",
     "@squoosh/cli": "0.7.3",
     "@techmely/types": "1.9.0",
     "@types/bun": "1.1.6",
     "@types/fs-extra": "11.0.4",
     "@types/mixpanel-browser": "2.49.1",
-    "@types/node": "^20.14.12",
+    "@types/node": "^22.0.0",
     "@types/nprogress": "0.2.3",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
@@ -116,22 +116,23 @@
     "fontaine": "0.5.0",
     "fs-extra": "11.2.0",
     "happy-dom": "14.12.3",
-    "husky": "^9.1.2",
+    "husky": "^9.1.3",
     "knip": "5.27.0",
     "linkinator": "6.1.1",
     "multiple-cucumber-html-reporter": "3.7.0",
     "npm-check-updates": "16.14.20",
     "postcss": "8.4.40",
     "react-dev-inspector": "^2.0.1",
     "reassure": "1.0.0",
+    "sass": "^1.77.8",
     "scss": "0.2.4",
     "speedscope": "1.20.0",
     "tailwindcss": "3.4.7",
     "tslib": "2.6.3",
     "tsx": "4.16.2",
     "typescript": "^5.5.4",
     "unplugin-auto-import": "0.18.2",
-    "vike": "0.4.177",
+    "vike": "0.4.181",
     "vite": "5.3.5",
     "vite-plugin-cjs-interop": "2.1.1",
     "vite-plugin-compression2": "1.1.3",

src/assets/styles/global.scss

@@ -37,7 +37,6 @@ body {
   background-color: white;
   color: theme('colors.gray.900');
   font-family:Be Vietnam Pro,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
-  overflow: hidden;
   overflow-wrap: break-word;
 }
 

src/pages/+config.ts

@@ -1,11 +1,13 @@
-import VikeReact from "@techmely/vike-react/config";
 import VikeReactQuery from "@techmely/vike-react-query/config";
+import VikeReact from "@techmely/vike-react/config";
 
 import type { Config } from "vike/types";
 import Wrapper from "./AppWrapper";
+import DefaultLayout from "#root/shared/layouts/default";
 
 const config: Config = {
   Wrapper,
+  Layout: DefaultLayout,
   stream: true,
   metadata: {
     title: "Starly",
@@ -15,12 +17,11 @@ const config: Config = {
     thumbnail: "https://starly.techmely.com/thumbnail.webp",
     color: {
       supportedColorSchemes: "dark light",
-      colorScheme: "dark",
+      colorScheme: "light",
       themeColor: "#00000",
     },
     hint: {
-      viewport:
-        "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no",
+      viewport: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no",
       acceptCh: "Accept, DPR, Viewport-Width, ECT, Width, Save-Data",
     },
     favicon: {

src/pages/AppWrapper.tsx

@@ -2,8 +2,6 @@ import type { FC, PropsWithChildren } from "react";
 import { Inspector } from "react-dev-inspector";
 import { handleAnalytics } from "#root/shared/libs/analytics/vercel/vercel.utils";
 
-import "#root/assets/styles/nprogress.css";
-
 const AppWrapper: FC<PropsWithChildren> = ({ children }) => {
   if (!import.meta.env.SSR) {
   }

src/pages/index/+Page.tsx

@@ -1,19 +1,10 @@
-import * as t from "$paraglide/messages.js";
-import type { FC } from "react";
-import { Movies } from "./Movie";
+import './index.scss'
+import HomeHero from "#root/pages/index/components/HomeHero";
 
-type Props = {
-  locale: string;
-};
-
-const IndexPage: FC<Props> = (props) => {
-  return (
-    <div>
-      Index Page
-      <h1>{t.seoTitle()}</h1>
-      <Movies />
-    </div>
-  );
+const IndexPage = () => {
+  return <>
+    <HomeHero />
+  </>;
 };
 
 export default IndexPage;

src/pages/index/components/HomeHero.tsx

@@ -0,0 +1,7 @@
+export default function HomeHero() {
+  return <div className="bg-home-hero">
+    <section className="hero relative pt-96 md:pt-156 z-10 px-20 is-visible">
+      Home hero
+    </section>
+  </div>;
+}

src/pages/index/index.scss

@@ -0,0 +1,4 @@
+.bg-home-hero {
+  background: linear-gradient(to bottom, color(display-p3 .8624 .9244 .9776) 0%, color(display-p3 .9536 .9504 .9696) 50%, color(display-p3 .9843 .9843 .9882) 100%);
+  height: 2000px;
+}

src/shared/components/TheHeader/index.tsx

@@ -1,9 +1,25 @@
 import NavHeader from "./NavHeader";
+import { useWindowScroll, useScrolling } from 'react-use'
+import clsx from "clsx";
+
+const SCROLL_THRESHOLD = 15
 
 const TheHeader = () => {
+  const [isScrolling, setIsScrolling] = useState(false)
+  const { y } = useWindowScroll();
+  console.log(y)
+
+  useEffect(() => {
+    if (y > SCROLL_THRESHOLD) {
+      setIsScrolling(true)
+    } else {
+      setIsScrolling(false)
+    }
+  }, [y]);
+
   return (
     <>
-      <header className="header fixed left-0 top-0 z-[2001] w-full transition-colors">
+      <header className={clsx("header fixed left-0 top-0 z-[2001] w-full transition-colors", isScrolling && "body-scrolled")}>
         <div className="mx-auto flex h-72 w-[calc(100%-20px)] max-w-[1172px] items-center justify-between whitespace-nowrap px-22 transition-all sm:px-48 md:h-112 md:w-[calc(100%-120px)]">
           <div data-block-logo>Logo</div>
           <div data-block-actions className="flex gap-8 md:gap-16">

src/shared/layouts/default.tsx

@@ -2,12 +2,16 @@ import TheFooter from "../components/TheFooter";
 import TheHeader from "../components/TheHeader";
 import NavBanner from "../components/TheHeader/NavBanner";
 
+import "#root/assets/styles/nprogress.css";
+import "#root/assets/styles/global.scss";
+import "@techmely/reset-css"
+
 export default function DefaultLayout({ children }) {
   return (
     <>
       <NavBanner />
       <TheHeader />
-      <main className="starly-container">{children}</main>
+      {children}
       <TheFooter />
     </>
   );

tailwind.config.js

@@ -4,6 +4,9 @@ const plugin = require("tailwindcss/plugin");
 export default {
   darkMode: ['class', '[data-theme="dark"]'],
   content: ["./src/pages/**/*.{ts,tsx}", "./src/shared/components/**/*.tsx", "./src/shared/layouts/**/*.tsx"],
+  corePlugins: {
+    preflight: false,
+  },
   theme: {
     extend: {
       colors: {

vite.config.ts

@@ -65,4 +65,7 @@ export default defineConfig({
       $paraglide: resolve(root, "src/locales/paraglide"),
     },
   },
+  ssr: {
+    noExternal: ['react-use']
+  }
 });