feat(package): add @lottielab/lottie-player dependency

Added @lottielab/lottie-player version 1.1.2 to the project dependencies in package.json and updated pnpm-lock.yaml accordingly. This integration introduces Lottie animations to improve the user interface.

package.json

@@ -9,7 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fontsource/ubuntu": "^5.1.0",
     "@hookform/resolvers": "^3.9.0",
+    "@lottielab/lottie-player": "^1.1.2",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
@@ -38,6 +40,7 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
@@ -47,6 +50,7 @@
     "lucide-react": "^0.446.0",
     "next": "14.2.13",
     "next-themes": "^0.3.0",
+    "openmeteo": "^1.1.4",
     "react": "^18",
     "react-day-picker": "8.10.1",
     "react-dom": "^18",

pnpm-lock.yaml

@@ -8,9 +8,15 @@ importers:
 
   .:
     dependencies:
+      '@fontsource/ubuntu':
+        specifier: ^5.1.0
+        version: 5.1.0
       '@hookform/resolvers':
         specifier: ^3.9.0
         version: 3.9.0(react-hook-form@7.53.0(react@18.3.1))
+      '@lottielab/lottie-player':
+        specifier: ^1.1.2
+        version: 1.1.2(react@18.3.1)
       '@radix-ui/react-accordion':
         specifier: ^1.2.0
         version: 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -95,6 +101,9 @@ importers:
       '@radix-ui/react-tooltip':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      axios:
+        specifier: ^1.7.7
+        version: 1.7.7
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -122,6 +131,9 @@ importers:
       next-themes:
         specifier: ^0.3.0
         version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      openmeteo:
+        specifier: ^1.1.4
+        version: 1.1.4
       react:
         specifier: ^18
         version: 18.3.1
@@ -200,6 +212,9 @@ packages:
   '@floating-ui/utils@0.2.8':
     resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
 
+  '@fontsource/ubuntu@5.1.0':
+    resolution: {integrity: sha512-0XG/HrFsfP1q3phf4QN8IO7tetd0zOZKHZSHcTnBuVoQedoo1wS/hXxY2FMZuqoG+mVfrXh+Q614MDVmQPJq2w==}
+
   '@hookform/resolvers@3.9.0':
     resolution: {integrity: sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==}
     peerDependencies:
@@ -227,6 +242,14 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@lottielab/lottie-player@1.1.2':
+    resolution: {integrity: sha512-i+Q8b4AZtekicMT+RWiHLPyM31EldeumUsVjZV7A5CsXYGUhVJfB90yTmpY2/QqyqvkGkjvfZKQNCDhTkxs38A==}
+    peerDependencies:
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+
   '@next/env@14.2.13':
     resolution: {integrity: sha512-s3lh6K8cbW1h5Nga7NNeXrbe0+2jIIYK9YaA9T7IufDWnZpozdFUp6Hf0d5rNWUKu4fEuSX2rCKlGjCrtylfDw==}
 
@@ -296,6 +319,10 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@openmeteo/sdk@1.16.0':
+    resolution: {integrity: sha512-FN3Or5K2OMgBOyGBvdBMYSAd+rQ9+UxpwhU2j1IrEchTf4tkTy+XtEKwbt86UDTkFab4CpK85yJzwyjSLveGFA==}
+    engines: {node: '>=12.0'}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1149,6 +1176,12 @@ packages:
     resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
     engines: {node: '>=10'}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  axios@1.7.7:
+    resolution: {integrity: sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1205,6 +1238,10 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
@@ -1271,6 +1308,10 @@ packages:
   decimal.js-light@2.5.1:
     resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
@@ -1323,10 +1364,26 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  flatbuffers@24.3.25:
+    resolution: {integrity: sha512-3HDgPbgiwWMI9zVB7VYBHaMrbOO7Gm0v+yD2FV/sCKj+9NDeVL7BOBYUuhWAQGKWOzBo8S9WdMvV0eixO233XQ==}
+
+  follow-redirects@1.15.9:
+    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   foreground-child@3.3.0:
     resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
     engines: {node: '>=14'}
 
+  form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1426,6 +1483,10 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  lottie-web@https://codeload.github.com/lottielab/lottie-web/tar.gz/c671e8eaefb95099fdb126d2fc68a566327e4354:
+    resolution: {tarball: https://codeload.github.com/lottielab/lottie-web/tar.gz/c671e8eaefb95099fdb126d2fc68a566327e4354}
+    version: 5.12.2
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -1442,6 +1503,14 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -1494,6 +1563,10 @@ packages:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
 
+  openmeteo@1.1.4:
+    resolution: {integrity: sha512-TalTDl0M7JJoeRTf+rWiFZ9SLvoxm7KkFLOQqcSjCiYs+bVMhax1qtryJqeZ1RF4W4Xfsgcl9x+VC1z39ULCxA==}
+    engines: {node: '>=12.0'}
+
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
@@ -1571,6 +1644,9 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -1873,6 +1949,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.8': {}
 
+  '@fontsource/ubuntu@5.1.0': {}
+
   '@hookform/resolvers@3.9.0(react-hook-form@7.53.0(react@18.3.1))':
     dependencies:
       react-hook-form: 7.53.0(react@18.3.1)
@@ -1903,6 +1981,12 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@lottielab/lottie-player@1.1.2(react@18.3.1)':
+    dependencies:
+      lottie-web: https://codeload.github.com/lottielab/lottie-web/tar.gz/c671e8eaefb95099fdb126d2fc68a566327e4354
+    optionalDependencies:
+      react: 18.3.1
+
   '@next/env@14.2.13': {}
 
   '@next/swc-darwin-arm64@14.2.13':
@@ -1944,6 +2028,10 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
+  '@openmeteo/sdk@1.16.0':
+    dependencies:
+      flatbuffers: 24.3.25
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -2828,6 +2916,16 @@ snapshots:
     dependencies:
       tslib: 2.7.0
 
+  asynckit@0.4.0: {}
+
+  axios@1.7.7:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   balanced-match@1.0.2: {}
 
   binary-extensions@2.3.0: {}
@@ -2886,6 +2984,10 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   commander@4.1.1: {}
 
   cross-spawn@7.0.3:
@@ -2940,6 +3042,8 @@ snapshots:
 
   decimal.js-light@2.5.1: {}
 
+  delayed-stream@1.0.0: {}
+
   detect-node-es@1.1.0: {}
 
   didyoumean@1.2.2: {}
@@ -2989,11 +3093,21 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  flatbuffers@24.3.25: {}
+
+  follow-redirects@1.15.9: {}
+
   foreground-child@3.3.0:
     dependencies:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
+  form-data@4.0.0:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+
   fsevents@2.3.3:
     optional: true
 
@@ -3077,6 +3191,8 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  lottie-web@https://codeload.github.com/lottielab/lottie-web/tar.gz/c671e8eaefb95099fdb126d2fc68a566327e4354: {}
+
   lru-cache@10.4.3: {}
 
   lucide-react@0.446.0(react@18.3.1):
@@ -3090,6 +3206,12 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.1
@@ -3140,6 +3262,11 @@ snapshots:
 
   object-hash@3.0.0: {}
 
+  openmeteo@1.1.4:
+    dependencies:
+      '@openmeteo/sdk': 1.16.0
+      flatbuffers: 24.3.25
+
   package-json-from-dist@1.0.1: {}
 
   path-key@3.1.1: {}
@@ -3208,6 +3335,8 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  proxy-from-env@1.1.0: {}
+
   queue-microtask@1.2.3: {}
 
   react-day-picker@8.10.1(date-fns@4.1.0)(react@18.3.1):

public/cloud.json

@@ -0,0 +1 @@
+{"v":"5.1.1","fr":60,"ip":0,"op":180,"w":256,"h":256,"nm":"Windy","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"cloud","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[117.135,125.78,0],"e":[123.135,125.78,0],"to":[1,0,0],"ti":[3.56038412974158e-7,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":45,"s":[123.135,125.78,0],"e":[117.135,125.78,0],"to":[-3.56038412974158e-7,0,0],"ti":[0.33333370089531,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":90,"s":[117.135,125.78,0],"e":[121.135,125.78,0],"to":[-0.33333370089531,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":135,"s":[121.135,125.78,0],"e":[117.135,125.78,0],"to":[0,0,0],"ti":[0.66666668653488,0,0]},{"t":180}],"ix":2},"a":{"a":0,"k":[102.135,62.78,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,24.37],[-24.44,0],[-6.12,-3.18],[-27.6,0],[0,-34.67],[0.03,-0.7],[0,-12.29],[17.86,0],[0,0],[0,0],[0,0]],"o":[[0,0],[-24.44,0],[0,-24.36],[7.38,0],[8.51,-24.62],[34.78,0],[0,0.71],[10.16,5.44],[0,17.8],[0,0],[-0.1,0],[0,0],[0,0]],"v":[[123.61,125.56],[44.26,125.56],[0,81.44],[44.26,37.33],[64.71,42.31],[124.27,0],[187.25,62.78],[187.21,64.9],[204.27,93.32],[171.93,125.56],[124.27,125.56],[123.61,125.56],[124.27,125.56]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.909803986549,0.909803986549,0.909803986549,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"cloud","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":0,"s":[195.37,81.5,0],"e":[199.37,81.5,0],"to":[0.66666668653488,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":35,"s":[199.37,81.5,0],"e":[195.37,81.5,0],"to":[0,0,0],"ti":[4.57763661643185e-7,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":80,"s":[195.37,81.5,0],"e":[199.37,81.5,0],"to":[-4.57763661643185e-7,0,0],"ti":[0.66666668653488,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":125,"s":[199.37,81.5,0],"e":[195.37,81.5,0],"to":[-0.64289206266403,0,0],"ti":[0.03566187247634,0,0]},{"t":180}],"ix":2},"a":{"a":0,"k":[46.37,28.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,11.06],[-11.09,0],[-2.78,-1.45],[-12.52,0],[0,-15.74],[0.01,-0.32],[0,-5.58],[8.11,0],[0,0],[0,0],[0,0]],"o":[[0,0],[-11.09,0],[0,-11.06],[3.35,0],[3.86,-11.18],[15.8,0],[0,0.32],[4.61,2.47],[0,8.09],[0,0],[-0.04,0],[0,0],[0,0]],"v":[[56.11,57],[20.09,57],[0,36.97],[20.09,16.95],[29.38,19.21],[56.41,0],[85.01,28.5],[84.99,29.46],[92.74,42.36],[78.05,57],[56.41,57],[56.11,57],[56.41,57]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.909803986549,0.909803986549,0.909803986549,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"bond","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[128,128,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[256,256],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"bond","np":1,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0}],"markers":[]}

public/route_glisante.svg

@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In  -->
+
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   width="576.53827"
+   height="507.94376"
+   viewBox="-0.781 -0.08 576.53826 507.94375"
+   enable-background="new -0.781 -0.08 576 506"
+   xml:space="preserve"
+   id="svg2"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="route_glisante.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata
+     id="metadata18"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1389"
+     id="namedview16"
+     showgrid="false"
+     fit-margin-top="0.3"
+     fit-margin-left="0.3"
+     fit-margin-right="0.3"
+     fit-margin-bottom="0.3"
+     inkscape:zoom="1.3736857"
+     inkscape:cx="291.18742"
+     inkscape:cy="218.39057"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-page="true"
+     inkscape:snap-text-baseline="true"
+     inkscape:snap-center="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" /><defs
+     id="defs4"><pattern
+       patternUnits="userSpaceOnUse"
+       width="7"
+       height="7"
+       patternTransform="translate(-27.409426,37.156635)"
+       id="pattern12310-9"><path
+         inkscape:connector-curvature="0"
+         id="rect12307-0"
+         d="M 0,0 V 3.5 A 3.5,3.5 0 0 1 3.5,0 Z M 3.5,0 A 3.5,3.5 0 0 1 7,3.5 V 0 Z M 7,3.5 A 3.5,3.5 0 0 1 3.5,7 H 7 Z M 3.5,7 A 3.5,3.5 0 0 1 0,3.5 V 7 Z"
+         style="opacity:1;fill:#1a1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.50953102;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:1.50953107, 1.50953107;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" /></pattern></defs><path
+     style="fill:#f8190d;stroke:none"
+     d="M 288.26562 13.638672 C 281.64663 13.638672 275.53166 17.170344 272.22266 22.902344 L 16.126953 466.47266 C 12.816953 472.20366 12.816953 479.26705 16.126953 484.99805 C 19.435953 490.73005 25.552875 494.26172 32.171875 494.26172 L 544.36133 494.26172 C 550.97933 494.26172 557.09625 490.73105 560.40625 484.99805 C 563.71625 479.26705 563.71625 472.20366 560.40625 466.47266 L 304.31055 22.902344 C 301.00055 17.170344 294.88462 13.638672 288.26562 13.638672 z M 288.26562 69.425781 L 512.09375 457.10547 L 64.439453 457.10547 L 288.26562 69.425781 z "
+     transform="translate(-0.781,-0.08)"
+     id="path8" /><g
+     id="g4255"
+     transform="translate(580.56445,111.04893)"
+     style="fill:#ffffff"><path
+       sodipodi:nodetypes="ccsssccsccc"
+       inkscape:connector-curvature="0"
+       id="path4251"
+       d="m -381.50857,328.78348 46.58999,0 c 7.70191,-8.02921 14.53678,-15.84448 17.5048,-24.65402 4.02448,-11.94525 10.22837,-27.86902 -17.07764,-33.0728 -7.75922,-1.4787 -18.05652,-3.44089 -23.60395,-4.80015 -30.23113,-7.40739 -24.65773,-22.74177 24.99671,-44.12042 l -10.55555,-2.91187 c -22.84086,5.68299 -42.97537,15.79971 -47.26554,29.13535 -3.07654,9.56316 -3.89895,30.38668 48.72148,29.28412 10.59081,-0.2566 13.76411,5.46023 10.89022,10.715 -13.78682,25.26167 -39.77266,34.84985 -50.20052,40.42479 z"
+       style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+       sodipodi:nodetypes="ccccccccccccc"
+       inkscape:connector-curvature="0"
+       id="path4253"
+       d="m -248.6543,255.98663 -44.77007,14.37738 c -8.10485,2.68237 -5.9882,5.112 3.82184,6.09673 l 103.55353,16.10631 c 10.02965,1.39835 16.57126,13.25211 7.82566,23.113 l -12.55746,13.46771 -20.20113,0 16.67299,-15.00272 c 8.90076,-9.44867 -1.64649,-11.31998 -11.48621,-12.93336 l -114.01808,-21.20209 c -5.57706,-7.37893 -1.34448,-17.17543 9.46359,-19.66429 l 55.6896,-9.09047 z"
+       style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+       sodipodi:nodetypes="cccsscssssccsssscssccccccccccccccc"
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m -289.54679,129.08019 c -7.13922,-2.8416 -13.65378,-1.58761 -19.24913,6.34905 l -14.81984,21.10294 c -3.99203,-1.49365 -8.41698,0.49508 -9.94303,4.48301 l -8.42759,22.02321 c -1.48381,3.87752 0.33974,8.1703 4.09022,9.83297 l -8.6877,22.70294 c -0.63662,1.66365 0.18946,3.51384 1.85309,4.15045 l 9.99202,3.82363 c 1.66363,0.63663 3.51602,-0.18861 4.15265,-1.85225 l 8.68014,-22.68322 68.33908,26.1512 -8.68013,22.68322 c -0.63663,1.66364 0.19165,3.51468 1.85529,4.15129 l 9.992,3.82363 c 1.66364,0.63662 3.51385,-0.18944 4.15047,-1.85309 l 8.68769,-22.70294 c 3.90184,1.26437 8.12609,-0.7137 9.60961,-4.59048 l 8.42758,-22.02323 c 1.52606,-3.98792 -0.44304,-8.42346 -4.41241,-9.97636 l 3.05395,-25.60539 c 1.13239,-9.64447 -2.8786,-14.92627 -10.09104,-17.57658 l -29.28755,-11.20742 z m -0.82343,8.91795 50.24639,19.28304 c 11.50836,4.12065 11.83426,4.52207 10.09106,17.57658 l -1.20275,10.07994 c -0.32048,2.76834 -1.41713,4.65344 -3.49058,5.60727 l -78.09869,-29.88588 c -0.90701,-2.09436 -0.46506,-4.22999 1.14442,-6.50507 l 5.83367,-8.30782 c 6.48995,-9.52306 7.6941,-10.77539 15.47647,-7.84803 z"
+       id="rect4200"
+       inkscape:connector-curvature="0" /></g></svg>

src/app/globals.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: 'Ubuntu', sans-serif;
 }
 
 @layer utilities {

src/app/layout.tsx

@@ -1,17 +1,8 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
+import '@fontsource/ubuntu/400.css';
+import '@fontsource/ubuntu/500.css';
 import "./globals.css";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -26,7 +17,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`antialiased bg-background dark`}
       >
         {children}
       </body>

src/app/page.tsx

@@ -1,101 +1,33 @@
 import Image from "next/image";
+import WeatherSprite from "@/components/weather/animated-sprite";
+import {Separator} from "@/components/ui/separator";
+import {ChevronsLeftRightEllipsis, SeparatorVertical} from "lucide-react";
 
-export default function Home() {
+export default function HomePage() {
-  return (
+  return (<main className="flex flex-row w-full h-screen p-2">
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+    <div className={"flex flex-col justify-center items-center gap-1 h-fit w-fit text-xl px-3 py-2 font-bold rounded-xl relative bg-background"}>
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+      <WeatherSprite
-        <Image
+        weather={3}
-          className="dark:invert"
+        title={"Maintenant"}
-          src="https://nextjs.org/icons/next.svg"
+        className={""}
-          alt="Next.js logo"
+        indicator={{type: "slippery"}}
-          width={180}
+      />
-          height={38}
+      <Separator className={"h-1 rounded-2xl"}/>
-          priority
+      <div className={"my-3 p-2 flex flex-col items-center"}>
-        />
+        <h2 className={"mb-2"}>Températures</h2>
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+        <div className={"flex flex-row justify-center items-center gap-1"}>
-          <li className="mb-2">
+          <div>
-            Get started by editing{" "}
+            <p className={"text-red-300"}>Max</p>
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
+            <p className={"text-blue-300"}>Min</p>
-              src/app/page.tsx
+          </div>
-            </code>
+          <ChevronsLeftRightEllipsis  className={"w-12 h-12 rotate-90"}/>
-            .
+          <div>
-          </li>
+            <p className={"text-red-300"}>19,6°C</p>
-          <li>Save and see your changes instantly.</li>
+            <p className={"text-blue-300"}>11,2°C</p>
-        </ol>
+          </div>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
         </div>
-      </main>
+      </div>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
+      <Separator className={"h-1 rounded-2xl"}/>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
     </div>
-  );
+  </main>);
 }

src/components/weather/animated-sprite.tsx

@@ -0,0 +1,74 @@
+'use client'
+import LottieReact from "@lottielab/lottie-player/react";
+import {cn} from "@/lib/utils";
+import {Clock4, LucideIcon} from "lucide-react";
+import {DateFormatter} from "@/lib/date";
+import Image from "next/image";
+
+// Follow WMO weather interpretation codes.
+interface SpriteTitleProps {
+	title?: string;
+	icon?: LucideIcon
+}
+
+function SpriteTitle(props: SpriteTitleProps) {
+	const Icon = props.icon || Clock4;
+	const title = props.title || new DateFormatter().generateFormattedDate(new Date(), { formatTemplate: "PPP", locale: "fr" })
+	return (<div className={"flex justify-center items-center gap-1"}>
+		<Icon/>
+		<h2 >{title}</h2>
+	</div>)
+}
+
+type SpriteIndicatorProps = {
+	type : "slippery" | "snow-covered" | "strong-wind"
+	className?: string
+}
+
+function SpriteIndicator(props: SpriteIndicatorProps) {
+	switch (props.type) {
+		case "slippery":
+			return (<div className={cn("animate-pulse scale-125", props.className)}>
+				<Image src={"route_glisante.svg"} alt={"Panneau route glisante"} width={256} height={256}/>
+				</div>)
+	}
+}
+
+interface WeatherSpriteProps {
+	weather: number;
+	title?: string;
+	indicator?: SpriteIndicatorProps
+	className?: string;
+	danger?: boolean;
+}
+
+export default function WeatherSprite(props: WeatherSpriteProps) {
+	const wmo = new Map([
+		[0, "clear.json"],
+		[1, "partial_cloud.json"],
+		[2, "partial_cloud.json"],
+		[3, "cloud.json"],
+		[45, "foggy.json"],
+		[48, "fog.json"],
+	])
+	const displayWmo = new Map([
+		[0, "Ciel clair"],
+		[1, "Principalement clair"],
+		[2, "Partiellement nuageux"],
+		[3, "Partiellement couvert"],
+		[45, "Brouillard"],
+		[48, "Brouillard givrant"],
+	])
+
+
+	return (<div className={cn("flex flex-col justify-center items-center gap-1 h-fit w-fit text-lg px-3 py-2 font-bold rounded-xl relative", props.danger ? "bg-destructive" : "", props.className)}>
+		{props.title && <SpriteTitle title={props.title}/>}
+		{
+			props.indicator && <div className={"absolute top-12 left-10 z-30"}>
+        <SpriteIndicator type={props.indicator.type} className={cn("w-20 h-20", props.indicator.className)}/>
+      </div>
+		}
+		<LottieReact src={wmo.get(props.weather) || "clear.json"} className={"w-full h-full z-5"}/>
+		<h3 className={"tracking-widest uppercase"}>{displayWmo.get(props.weather)}</h3>
+	</div>)
+}

src/lib/date.ts

@@ -0,0 +1,39 @@
+import {format, formatDistance, formatRelative, subDays} from "date-fns";
+import {fr, enUS} from "date-fns/locale";
+
+interface DateOptions {
+	/**
+	 * A string template used for formatting output.
+	 * This template can include placeholders that are replaced with specific data at runtime.
+	 * The format of the placeholders must be compatible with the formatting mechanism used.
+	 *
+	 * @example `PPPP | PPPPpppp`
+	 *
+	 * @type {string}
+	 */
+	formatTemplate: string;
+	locale: "fr" | "enUS";
+}
+
+export class DateFormatter {
+	private static readonly localeMapping = {
+		fr: fr,
+		enUS: enUS,
+	};
+
+	private static getLocale(locale: "fr" | "enUS") {
+		return DateFormatter.localeMapping[locale];
+	}
+
+	generateFormattedDate(date: Date, options: DateOptions): string {
+		return format(date, options.formatTemplate, {locale: DateFormatter.getLocale(options.locale)});
+	}
+
+	generateRelativeDate(date: Date, baseDate: Date, options: DateOptions): string {
+		return formatRelative(date, baseDate, {locale: DateFormatter.getLocale(options.locale)});
+	}
+
+	generateDistanceToNow(date: Date, options: DateOptions): string {
+		return formatDistance(date, new Date(), {locale: DateFormatter.getLocale(options.locale)});
+	}
+}