feat: about showcase

cli/create-cella/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cellajs/create-cella",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "license": "MIT",
   "description": "Cella is a TypeScript template to create web apps with sync and offline capabilities.",

cli/create-cella/src/create.ts

@@ -183,7 +183,7 @@ export async function create({
   console.info(colors.cyan(`  ${packageManager} seed`));
   console.info();
 
-  console.info(`You can directly sign in using:`);
+  console.info(`Once running, you can sign in using:`);
   console.info(`email: ${colors.greenBright('admin-test@cellajs.com')}`);
   console.info(`password: ${colors.greenBright('12345678')}`);
   console.info();

frontend/src/modules/marketing/about/showcase.tsx

@@ -9,18 +9,8 @@ const DeviceMockup = lazy(() => import('~/modules/marketing/device-mockup'));
 const showcaseItems = [{ id: 'raak', url: 'https://raak.dev' }];
 
 // Slides for light and dark themes
-const lightSlides = [
-  { src: '/static/screenshots/signin-with-cella.jpg' },
-  { src: '/static/screenshots/onboarding.jpg' },
-  { src: '/static/screenshots/org-page.jpg' },
-  { src: '/static/screenshots/user-sheet-cella.jpg' },
-];
-const darkSlides = [
-  { src: '/static/screenshots/dark/signin-with-cella.jpg' },
-  { src: '/static/screenshots/dark/onboarding.jpg' },
-  { src: '/static/screenshots/dark/org-page.jpg' },
-  { src: '/static/screenshots/dark/user-sheet-cella.jpg' },
-];
+const lightSlides = [{ src: '/static/images/showcases/raak-1.png' }, { src: '/static/images/showcases/raak-2.png' }];
+const darkSlides = [{ src: '/static/images/showcases/raak-1-dark.png' }, { src: '/static/images/showcases/raak-2-dark.png' }];
 
 const Showcase = () => {
   const { t } = useTranslation();

frontend/src/modules/marketing/device-mockup/frame.tsx

@@ -21,22 +21,24 @@ const DeviceFrame = ({ type, inView, renderCarousel }: DeviceFrameProps) => {
     case 'pc':
       return (
         <div className="w-full">
-          <div className="relative mx-auto border-gray-400/75 mb-[.07rem] dark:border-gray-600 border-[.25rem] rounded-t-xl max-w-[85%] aspect-video">
+          <div className="relative mx-auto border-gray-400/75 mb-[.07rem] dark:border-gray-700 border-[.25rem] rounded-t-xl max-w-[85%] aspect-video">
             <div className="rounded-lg h-full w-full bg-background cursor-pointer">{inView && renderCarousel(false, 'rounded-t-[.5rem]')}</div>
           </div>
-          <div className="relative mx-auto bg-gray-300 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-4 md:h-5">
+          <div className="relative mx-auto bg-gray-300 dark:bg-gray-800 rounded-b-xl rounded-t-sm h-4 md:h-5">
             <div className="absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-14 h-1 md:w-24 md:h-2 bg-gray-500/25 dark:bg-gray-900/25 border-background border border-t-0" />
           </div>
         </div>
       );
     case 'mobile':
       return (
-        <div className="relative mx-auto border-gray-400 dark:border-gray-800 border-[.6rem] rounded-[1.5rem] aspect-[1/2]">
-          <div className="h-8 w-[.19rem] bg-gray-300 dark:bg-gray-800 absolute -start-3 top-20 rounded-s-lg" />
-          <div className="h-12 w-[.19rem] bg-gray-300 dark:bg-gray-800 absolute -start-3 top-32 rounded-s-lg" />
-          <div className="h-12 w-[.19rem] bg-gray-300 dark:bg-gray-800 absolute -start-3 top-44 rounded-s-lg" />
-          <div className="h-12 w-[.19rem] bg-gray-300 dark:bg-gray-800 absolute -end-3 top-36 rounded-e-lg" />
-          <div className="rounded-[1rem] w-72 h-[39rem] dark:bg-gray-800 cursor-pointer">{inView && renderCarousel(false, 'rounded-[1rem]')}</div>
+        <div className="relative mx-auto border-gray-300 dark:border-gray-700 border-[.6rem] rounded-[1.5rem] h-[40rem] aspect-[9/16]">
+          <div className="h-8 w-[.19rem] bg-gray-200 dark:bg-gray-800 absolute -start-3 top-20 rounded-s-lg" />
+          <div className="h-12 w-[.19rem] bg-gray-200 dark:bg-gray-800 absolute -start-3 top-32 rounded-s-lg" />
+          <div className="h-12 w-[.19rem] bg-gray-200 dark:bg-gray-800 absolute -start-3 top-44 rounded-s-lg" />
+          <div className="h-12 w-[.19rem] bg-gray-200 dark:bg-gray-800 absolute -end-3 top-36 rounded-e-lg" />
+          <div className="rounded-[1rem] h-full w-full bg-gray-200 dark:bg-gray-800 cursor-pointer">
+            {inView && renderCarousel(false, 'rounded-[1rem]')}
+          </div>
         </div>
       );
     default:

locales/en/about.json

@@ -81,7 +81,7 @@
   "showcase": "Showcase",
   "showcase.text": "Don't just take our word for it — 🧐 explore what we're building with Cella.",
   "showcase.title_1": "raak.dev",
-  "showcase.text_1": "An issue tracker to manage multiple app projects from a single page view. Open-source, built for speed & fun.",
+  "showcase.text_1": "An issue tracker to manage multiple app projects from a single page view. Built for speed & fun.",
   "why": "Read why we built Cella",
   "why.text_1": "A strictly defined stack makes it easier to collaborate across teams on challenging and time-consuming requirements.",
   "why.text_2": "Generic OpenAPI for authentication, organizations and users. A configurable authorization manager is included.",

package.json

@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@evilmartians/lefthook": "^1.10.1",
+    "@evilmartians/lefthook": "^1.10.3",
     "cross-env": "^7.0.3",
     "rimraf": "^6.0.1",
     "tsx": "^4.19.2",