shortcut-next 0.1.0 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Hadi87s
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,4 +1,4 @@
-# Quickstart Next ⚡
+# Shortcut Next ⚡
 
 > Scaffold modern **Next.js 15+ projects** in seconds — with **MUI**, **React Hook Form**, and **TanStack Query** built-in.  
 > Optionally add **Tailwind CSS v4** with a single command.
@@ -22,4 +22,5 @@
 You don’t need to install globally. Use `npx`:
 
 ```bash
-npx @hadi87s/quickstart-next@latest
+npx shortcut-next@latest
+

package/bin/{quickstart-next.mjs → shortcut-next.mjs}

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 import('../src/run.mjs').catch(e => {
   console.error(e);
   process.exit(1);

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "shortcut-next",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Scaffold Next.js apps with MUI base or Tailwind v4 preset.",
   "main": "index.js",
   "bin": {
-    "shortcut-next": "bin/quickstart-next.mjs"
+    "shortcut-next": "bin/shortcut-next.mjs"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hadi87s/quickstart-next.git"
+    "url": "git+https://github.com/hadi87s/shortcut-next.git"
   },
   "bugs": {
-    "url": "https://github.com/hadi87s/quickstart-next/issues"
+    "url": "https://github.com/hadi87s/shortcut-next/issues"
   },
-  "homepage": "https://github.com/hadi87s/quickstart-next#readme",
+  "homepage": "https://github.com/hadi87s/shortcut-next#readme",
   "publishConfig": {
     "access": "public"
   },
@@ -26,9 +26,19 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [],
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "nextjs",
+    "cli",
+    "scaffold",
+    "starter",
+    "mui",
+    "tailwind"
+  ],
   "author": "",
-  "license": "ISC",
+  "license": "MIT",
   "type": "module",
   "dependencies": {
     "@clack/prompts": "^0.11.0",

package/templates/base/@core/theme/ThemeComponent.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import * as React from 'react'
+import { CssBaseline, PaletteMode, ThemeProvider, createTheme } from '@mui/material'
+import GlobalStyles from './globalStyles'
+import { buildThemeOptions } from './ThemeOptions'
+
+type Ctx = { mode: PaletteMode; toggle: () => void; set: (m: PaletteMode) => void }
+export const ColorModeContext = React.createContext<Ctx>({ mode: 'dark', toggle: () => {}, set: () => {} })
+
+function getInitialMode(): PaletteMode {
+  if (typeof window === 'undefined') return 'dark'
+  const stored = window.localStorage.getItem('color-scheme') as PaletteMode | null
+  if (stored === 'light' || stored === 'dark') return stored
+  return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+}
+
+export default function ThemeComponent({ children }: { children: React.ReactNode }) {
+  const [mode, setMode] = React.useState<PaletteMode>(getInitialMode)
+
+  React.useEffect(() => {
+    document.documentElement.setAttribute('data-color-scheme', mode)
+    window.localStorage.setItem('color-scheme', mode)
+  }, [mode])
+
+  const ctx = React.useMemo<Ctx>(
+    () => ({ mode, toggle: () => setMode(m => (m === 'light' ? 'dark' : 'light')), set: setMode }),
+    [mode]
+  )
+
+  const theme = React.useMemo(() => createTheme(buildThemeOptions(mode)), [mode])
+
+  return (
+    <ColorModeContext.Provider value={ctx}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <GlobalStyles />
+        {children}
+      </ThemeProvider>
+    </ColorModeContext.Provider>
+  )
+}

package/templates/base/@core/theme/ThemeOptions.ts

@@ -0,0 +1,21 @@
+import { createTheme, PaletteMode, ThemeOptions } from '@mui/material'
+import { makePalette } from './palette'
+import { makeTypography } from './typography'
+import { makeShadows } from './shadows'
+import { makeSpacing } from './spacing'
+import { makeBreakpoints } from './breakpoints'
+import { makeOverrides } from './overrides'
+
+export function buildThemeOptions(mode: PaletteMode): ThemeOptions {
+  const options: ThemeOptions = {
+    palette: makePalette(mode),
+    typography: makeTypography(),
+    spacing: makeSpacing(),
+    breakpoints: makeBreakpoints(),
+    shape: { borderRadius: 12 },
+    shadows: makeShadows(),
+    components: makeOverrides(createTheme({ palette: makePalette(mode) }))
+  }
+
+  return options
+}

package/templates/base/@core/theme/breakpoints/index.ts

@@ -0,0 +1,7 @@
+import type { ThemeOptions } from '@mui/material'
+
+export function makeBreakpoints(): ThemeOptions['breakpoints'] {
+  return {
+    values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536 }
+  }
+}

package/templates/base/@core/theme/globalStyles.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { GlobalStyles as MUIGlobalStyles } from '@mui/material'
+
+export default function GlobalStyles() {
+  return (
+    <MUIGlobalStyles
+      styles={{
+        '*, *::before, *::after': { boxSizing: 'border-box' },
+        body: { margin: 0 }
+      }}
+    />
+  )
+}

package/templates/base/@core/theme/overrides/index.ts

@@ -0,0 +1,58 @@
+import type { Components, Theme } from '@mui/material/styles'
+
+export function makeOverrides(theme: Theme): Components<Theme> {
+  const isDark = theme.palette.mode === 'dark'
+
+  return {
+    MuiCssBaseline: {
+      styleOverrides: {
+        ':root': {
+          '--blob-1': 'radial-gradient(closest-side, #7C4DFF 0%, rgba(124,77,255,0) 70%)',
+          '--blob-2': 'radial-gradient(closest-side, #00E5FF 0%, rgba(0,229,255,0) 70%)'
+        },
+        body: {
+          backgroundImage: isDark
+            ? `radial-gradient(1200px 600px at 10% -10%, rgba(124,77,255,0.07), transparent),
+               radial-gradient(900px 500px at 110% 110%, rgba(0,229,255,0.06), transparent)`
+            : undefined
+        }
+      }
+    },
+
+    MuiContainer: { defaultProps: { maxWidth: 'lg' } },
+
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 12,
+          border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'}`,
+          background: isDark
+            ? 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02))'
+            : 'linear-gradient(180deg, #FFFFFF, #FAFBFF)'
+        }
+      }
+    },
+
+    MuiButton: {
+      defaultProps: { disableElevation: true },
+      styleOverrides: {
+        root: { borderRadius: 12, paddingInline: 16 },
+        containedPrimary: {
+          background: `linear-gradient(180deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`
+        }
+      }
+    },
+
+    MuiTextField: { defaultProps: { size: 'small', fullWidth: true } },
+    MuiInputLabel: { styleOverrides: { root: { fontWeight: 600 } } },
+    MuiChip: { styleOverrides: { root: { borderRadius: 10 } } },
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: isDark ? 'rgba(16,19,26,0.72)' : 'rgba(255,255,255,0.72)',
+          backdropFilter: 'saturate(120%) blur(8px)'
+        }
+      }
+    }
+  }
+}

package/templates/base/@core/theme/palette/index.ts

@@ -0,0 +1,37 @@
+import type { PaletteMode, ThemeOptions } from '@mui/material'
+
+const brand = {
+  50: '#EEF0FF',
+  100: '#DDE2FF',
+  200: '#BEC7FF',
+  300: '#9DABFF',
+  400: '#7C8FFF',
+  500: '#5B74FF', // main
+  600: '#415BEE',
+  700: '#2F46CF',
+  800: '#2132A6',
+  900: '#1A2880'
+}
+
+export function makePalette(mode: PaletteMode): ThemeOptions['palette'] {
+  const isDark = mode === 'dark'
+  return {
+    mode,
+    primary: { light: brand[400], main: brand[500], dark: brand[700], contrastText: '#fff' },
+    brand: { light: brand[400], main: brand[500], dark: brand[700], contrastText: '#fff' },
+    secondary: { light: '#64E1FF', main: '#00D0FF', dark: '#00A3CC', contrastText: '#001219' },
+    error: { light: '#FF7A7A', main: '#FF4D4F', dark: '#C62828' },
+    warning: { light: '#FFD166', main: '#FFB703', dark: '#C98A00' },
+    info: { light: '#9AD0FF', main: '#55ADFF', dark: '#1E7ED6' },
+    success: { light: '#33D69F', main: '#11C28B', dark: '#0E9B6F' },
+    divider: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.12)',
+    background: {
+      default: isDark ? '#0B0D12' : '#F7F8FB',
+      paper: isDark ? '#10131A' : '#FFFFFF'
+    },
+    text: {
+      primary: isDark ? '#E6E8EF' : '#10141D',
+      secondary: isDark ? 'rgba(230,232,239,0.7)' : '#4A5568'
+    }
+  }
+}

package/templates/base/@core/theme/shadows/index.ts

@@ -0,0 +1,13 @@
+import type { ThemeOptions } from '@mui/material'
+
+export function makeShadows(): ThemeOptions['shadows'] {
+  // start from MUI defaults and tweak a few
+  const base = [
+    'none',
+    '0 1px 3px rgba(0,0,0,0.12)',
+    '0 2px 6px rgba(0,0,0,0.12)',
+    '0 4px 12px rgba(0,0,0,0.12)',
+    ...Array(21).fill('0 10px 30px rgba(0,0,0,0.12)')
+  ] as unknown as ThemeOptions['shadows']
+  return base
+}

package/templates/base/@core/theme/spacing/index.ts

@@ -0,0 +1,5 @@
+import type { ThemeOptions } from '@mui/material'
+
+export function makeSpacing(): ThemeOptions['spacing'] {
+  return 8 // 8px grid
+}

package/templates/base/@core/theme/types.ts

@@ -0,0 +1,10 @@
+import type { PaletteColor, PaletteColorOptions } from '@mui/material/styles'
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    brand: PaletteColor
+  }
+  interface PaletteOptions {
+    brand?: PaletteColorOptions
+  }
+}

package/templates/base/@core/theme/typography/index.ts

@@ -0,0 +1,15 @@
+import type { ThemeOptions } from '@mui/material'
+
+export function makeTypography(): ThemeOptions['typography'] {
+  return {
+    fontFamily:
+      'Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"',
+    h1: { fontWeight: 800, letterSpacing: 0.2 },
+    h2: { fontWeight: 800, letterSpacing: 0.2 },
+    h3: { fontWeight: 800 },
+    h4: { fontWeight: 700 },
+    h5: { fontWeight: 700 },
+    h6: { fontWeight: 700 },
+    button: { textTransform: 'none', fontWeight: 600, letterSpacing: 0.2 }
+  } as const
+}

package/templates/base/app/layout.tsx

@@ -14,8 +14,8 @@ const geistMono = Geist_Mono({
 })
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app'
+  title: 'Shortcut Nextjs Template',
+  description: 'Stop starting projects from scratch, start in the middle and save time!'
 }
 
 export default function RootLayout({

package/templates/base/app/page.tsx

@@ -18,8 +18,9 @@ import {
 } from '@mui/material'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
-import { Github, Package, LayoutDashboard, FormInput } from 'lucide-react'
+import { Github, Package, LayoutDashboard, FormInput, Sun, Moon } from 'lucide-react'
 import { Icon } from '@iconify/react'
+import { ColorModeContext } from '@/@core/theme/ThemeComponent'
 
 const Code = ({ children }: { children: React.ReactNode }) => (
   <Box
@@ -41,6 +42,213 @@ const Code = ({ children }: { children: React.ReactNode }) => (
   </Box>
 )
 
+function HeroSection({}: { copied: boolean; handleCopy: (text: string) => void }) {
+  const colorMode = React.useContext(ColorModeContext)
+  const { mode, toggle } = colorMode || { mode: 'light', toggle: () => {} }
+
+  return (
+    <Stack spacing={3} alignItems='center' textAlign='center' sx={{ mb: { xs: 6, md: 10 } }}>
+      <Stack direction='row' spacing={1} alignItems='center'>
+        <LayoutDashboard size={28} style={{ verticalAlign: 'middle' }} />
+        <Typography variant='h4' fontWeight={800} letterSpacing={0.2} sx={{ ml: 1 }}>
+          Shortcut Next
+        </Typography>
+      </Stack>
+      <Typography variant='h6' sx={{ maxWidth: 860, opacity: 0.9 }}>
+        A modern Next.js boilerplate powered by <b>MUI</b> with room for <b>React Query</b>, <b>React Hook Form</b>, and
+        optional <b>Tailwind&nbsp;v4</b>.
+      </Typography>
+      <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1.5} useFlexGap flexWrap='wrap'>
+        <Chip
+          icon={<Icon icon='simple-icons:mui' width={18} height={18} style={{ borderRadius: 4 }} />}
+          label='MUI'
+          color='primary'
+          variant='filled'
+        />
+        <Chip icon={<FormInput size={18} />} label='React Hook Form' variant='outlined' />
+        <Chip
+          icon={<Icon icon='devicon:tailwindcss' width={18} height={18} />}
+          label='Tailwind v4 (optional)'
+          variant='outlined'
+        />
+        <Chip
+          icon={<Icon icon='devicon:typescript' width={18} height={18} style={{ borderRadius: 4 }} />}
+          label='TypeScript'
+          variant='outlined'
+        />
+        <Chip icon={<Icon icon='devicon:nextjs' width={18} height={18} />} label='App Router' variant='outlined' />
+      </Stack>
+      <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ pt: 1 }}>
+        <Button
+          size='large'
+          variant='contained'
+          onClick={toggle}
+          startIcon={mode === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
+        >
+          Toggle Theme ({mode === 'dark' ? 'Dark' : 'Light'})
+        </Button>
+        <Button
+          size='large'
+          variant='outlined'
+          endIcon={<OpenInNewIcon />}
+          component={Link}
+          href='#'
+          target='_blank'
+          rel='noopener'
+        >
+          View Docs
+        </Button>
+      </Stack>
+    </Stack>
+  )
+}
+
+function WhatsIncludedCard({ copied, handleCopy }: { copied: boolean; handleCopy: (text: string) => void }) {
+  return (
+    <Card
+      sx={{
+        backdropFilter: 'saturate(120%) blur(6px)',
+        background: 'rgba(255,255,255,0.04)',
+        border: '1px solid',
+        borderColor: 'rgba(255,255,255,0.08)'
+      }}
+    >
+      <CardContent>
+        <Typography variant='h6' fontWeight={700} gutterBottom>
+          What’s included
+        </Typography>
+        <Stack spacing={1.25} sx={{ opacity: 0.9 }}>
+          <Typography>• Next.js 15 (App Router) + TypeScript</Typography>
+          <Typography>• MUI ThemeProvider + dark-ready UI</Typography>
+          <Typography>
+            • RHF starter form at <code>/sample-form</code>
+          </Typography>
+          <Typography>• Easy opt-in Tailwind v4 (via CLI preset)</Typography>
+        </Stack>
+        <Divider sx={{ my: 3 }} />
+        <Typography variant='subtitle2' gutterBottom>
+          Scaffold via npx
+        </Typography>
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1.5} alignItems='center'>
+          <Code>npx shortcut-next@latest</Code>
+          <Tooltip title={copied ? 'Copied!' : 'Copy'}>
+            <Button
+              variant='outlined'
+              size='small'
+              startIcon={<ContentCopyIcon fontSize='small' />}
+              onClick={() => handleCopy('npx shortcut-next@latest')}
+            >
+              {copied ? 'Copied' : 'Copy'}
+            </Button>
+          </Tooltip>
+        </Stack>
+      </CardContent>
+    </Card>
+  )
+}
+
+function TechLogosCard() {
+  return (
+    <Card
+      sx={{
+        height: '100%',
+        backdropFilter: 'saturate(120%) blur(6px)',
+        background: 'rgba(255,255,255,0.04)',
+        border: '1px solid',
+        borderColor: 'rgba(255,255,255,0.08)'
+      }}
+    >
+      <CardContent>
+        <Typography variant='h6' fontWeight={700} gutterBottom>
+          Current Tech
+        </Typography>
+        <Stack direction='row' spacing={2} alignItems='center' sx={{ pb: 1.5 }}>
+          <Tooltip title='MUI' arrow placement='top'>
+            <span>
+              <Icon icon='simple-icons:mui' width={28} height={28} style={{ borderRadius: 4 }} />
+            </span>
+          </Tooltip>
+          <Tooltip title='Tailwind CSS' arrow placement='top'>
+            <span>
+              <Icon icon='devicon:tailwindcss' width={28} height={28} />
+            </span>
+          </Tooltip>
+          <Tooltip title='React' arrow placement='top'>
+            <span>
+              <Icon icon='devicon:react' width={28} height={28} />
+            </span>
+          </Tooltip>
+          <Tooltip title='Next.js' arrow placement='top'>
+            <span>
+              <Icon icon='devicon:nextjs' width={28} height={28} />
+            </span>
+          </Tooltip>
+          <Tooltip title='React Hook Form' arrow placement='top'>
+            <span>
+              <Icon icon='simple-icons:reacthookform' width={28} height={28} />
+            </span>
+          </Tooltip>
+          <Tooltip title='TypeScript' arrow placement='top'>
+            <span>
+              <Icon icon='devicon:typescript' width={28} height={28} style={{ borderRadius: 4 }} />
+            </span>
+          </Tooltip>
+        </Stack>
+        <Typography variant='body2' sx={{ opacity: 0.85 }}>
+          These are the core technologies powering this template. Hover over each logo to see its name.
+        </Typography>
+        <Divider sx={{ my: 2 }} />
+        <Stack direction='row' spacing={1.5}>
+          <Button
+            variant='outlined'
+            size='small'
+            startIcon={<Github size={18} />}
+            endIcon={<OpenInNewIcon />}
+            component={Link}
+            href='https://github.com/Hadi87s/shortcut-next'
+            target='_blank'
+            rel='noopener'
+          >
+            GitHub
+          </Button>
+          <Button
+            variant='outlined'
+            size='small'
+            startIcon={<Package size={18} />}
+            endIcon={<OpenInNewIcon />}
+            component={Link}
+            href='https://www.npmjs.com/package/shortcut-next'
+            target='_blank'
+            rel='noopener'
+          >
+            npm
+          </Button>
+        </Stack>
+      </CardContent>
+    </Card>
+  )
+}
+
+function Footer() {
+  return (
+    <Stack alignItems='center' sx={{ mt: 8, opacity: 0.65 }}>
+      <Typography variant='body2'>
+        Built with ❤️ by{' '}
+        <MuiLink
+          href='https://github.com/hadi87s/quickstart-next'
+          underline='none'
+          color='primary'
+          sx={{ fontWeight: 600 }}
+          target='_blank'
+          rel='noopener'
+        >
+          Hadi
+        </MuiLink>{' '}
+        using MUI. Ready for Tailwind v4, React Query, and more.
+      </Typography>
+    </Stack>
+  )
+}
 export default function Page() {
   const [copied, setCopied] = React.useState(false)
 
@@ -64,7 +272,6 @@ export default function Page() {
         color: 'text.primary'
       }}
     >
-      {/* --- Glowing blobs --- */}
       <Box
         aria-hidden
         sx={{
@@ -72,7 +279,7 @@ export default function Page() {
           position: 'absolute',
           inset: 0,
           '&::before, &::after': {
-            content: '""',
+            content: "''",
             position: 'absolute',
             width: 520,
             height: 520,
@@ -105,210 +312,17 @@ export default function Page() {
           }
         }}
       />
-
       <Container maxWidth='lg' sx={{ position: 'relative', zIndex: 1, py: { xs: 6, md: 10 } }}>
-        {/* Hero */}
-        <Stack spacing={3} alignItems='center' textAlign='center' sx={{ mb: { xs: 6, md: 10 } }}>
-          <Stack direction='row' spacing={1} alignItems='center'>
-            <LayoutDashboard size={28} style={{ verticalAlign: 'middle' }} />
-            <Typography variant='h4' fontWeight={800} letterSpacing={0.2} sx={{ ml: 1 }}>
-              Quickstart Next
-            </Typography>
-          </Stack>
-
-          <Typography variant='h6' sx={{ maxWidth: 860, opacity: 0.9 }}>
-            A modern Next.js boilerplate powered by <b>MUI</b> with room for <b>React Query</b>, <b>React Hook Form</b>,
-            and optional <b>Tailwind&nbsp;v4</b>.
-          </Typography>
-
-          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1.5} useFlexGap flexWrap='wrap'>
-            <Chip
-              icon={<Icon icon='simple-icons:mui' width={18} height={18} style={{ borderRadius: 4 }} />}
-              label='MUI'
-              color='primary'
-              variant='filled'
-            />
-            <Chip icon={<FormInput size={18} />} label='React Hook Form' variant='outlined' />
-            <Chip
-              icon={<Icon icon='devicon:tailwindcss' width={18} height={18} />}
-              label='Tailwind v4 (optional)'
-              variant='outlined'
-            />
-            <Chip
-              icon={<Icon icon='devicon:typescript' width={18} height={18} style={{ borderRadius: 4 }} />}
-              label='TypeScript'
-              variant='outlined'
-            />
-            <Chip icon={<Icon icon='devicon:nextjs' width={18} height={18} />} label='App Router' variant='outlined' />
-          </Stack>
-
-          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ pt: 1 }}>
-            <Button size='large' variant='contained' component={Link} href='/sample-form'>
-              Open Sample Form
-            </Button>
-            <Button
-              size='large'
-              variant='outlined'
-              endIcon={<OpenInNewIcon />}
-              component={Link}
-              href='#'
-              target='_blank'
-              rel='noopener'
-            >
-              View Docs
-            </Button>
-          </Stack>
-        </Stack>
-
-        {/* Content */}
+        <HeroSection copied={copied} handleCopy={handleCopy} />
         <Grid container spacing={3}>
           <Grid size={{ xs: 12, md: 7 }}>
-            <Card
-              sx={{
-                backdropFilter: 'saturate(120%) blur(6px)',
-                background: 'rgba(255,255,255,0.04)',
-                border: '1px solid',
-                borderColor: 'rgba(255,255,255,0.08)'
-              }}
-            >
-              <CardContent>
-                <Typography variant='h6' fontWeight={700} gutterBottom>
-                  What’s included
-                </Typography>
-                <Stack spacing={1.25} sx={{ opacity: 0.9 }}>
-                  <Typography>• Next.js 15 (App Router) + TypeScript</Typography>
-                  <Typography>• MUI ThemeProvider + dark-ready UI</Typography>
-                  <Typography>
-                    • RHF starter form at <code>/sample-form</code>
-                  </Typography>
-                  <Typography>• Easy opt-in Tailwind v4 (via CLI preset)</Typography>
-                </Stack>
-
-                <Divider sx={{ my: 3 }} />
-
-                <Typography variant='subtitle2' gutterBottom>
-                  Scaffold via npx
-                </Typography>
-
-                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1.5} alignItems='center'>
-                  <Code>npx @hadi87s/quickstart-next@latest</Code>
-                  <Tooltip title={copied ? 'Copied!' : 'Copy'}>
-                    <Button
-                      variant='outlined'
-                      size='small'
-                      startIcon={<ContentCopyIcon fontSize='small' />}
-                      onClick={() => handleCopy('npx @hadi87s/quickstart-next@latest')}
-                    >
-                      {copied ? 'Copied' : 'Copy'}
-                    </Button>
-                  </Tooltip>
-                </Stack>
-              </CardContent>
-            </Card>
+            <WhatsIncludedCard copied={copied} handleCopy={handleCopy} />
           </Grid>
-
           <Grid size={{ xs: 12, md: 5 }}>
-            <Card
-              sx={{
-                height: '100%',
-                backdropFilter: 'saturate(120%) blur(6px)',
-                background: 'rgba(255,255,255,0.04)',
-                border: '1px solid',
-                borderColor: 'rgba(255,255,255,0.08)'
-              }}
-            >
-              <CardContent>
-                <Typography variant='h6' fontWeight={700} gutterBottom>
-                  Tech Logos
-                </Typography>
-                <Stack direction='row' spacing={2} alignItems='center' sx={{ pb: 1.5 }}>
-                  <Tooltip title='MUI' arrow placement='top'>
-                    <span>
-                      <Icon icon='simple-icons:mui' width={28} height={28} style={{ borderRadius: 4 }} />
-                    </span>
-                  </Tooltip>
-                  <Tooltip title='Tailwind CSS' arrow placement='top'>
-                    <span>
-                      <Icon icon='devicon:tailwindcss' width={28} height={28} />
-                    </span>
-                  </Tooltip>
-                  <Tooltip title='React' arrow placement='top'>
-                    <span>
-                      <Icon icon='devicon:react' width={28} height={28} />
-                    </span>
-                  </Tooltip>
-                  <Tooltip title='Next.js' arrow placement='top'>
-                    <span>
-                      <Icon icon='devicon:nextjs' width={28} height={28} />
-                    </span>
-                  </Tooltip>
-                  <Tooltip title='React Hook Form' arrow placement='top'>
-                    <span>
-                      <Icon icon='simple-icons:reacthookform' width={28} height={28} />
-                    </span>
-                  </Tooltip>
-                  <Tooltip title='TypeScript' arrow placement='top'>
-                    <span>
-                      <Icon icon='devicon:typescript' width={28} height={28} style={{ borderRadius: 4 }} />
-                    </span>
-                  </Tooltip>
-                </Stack>
-
-                <Typography variant='body2' sx={{ opacity: 0.85 }}>
-                  This template ships with MUI by default. You can enable Tailwind v4 at scaffold time. React Query and
-                  other integrations can be added as the stack grows.
-                </Typography>
-
-                <Divider sx={{ my: 2 }} />
-
-                <Stack direction='row' spacing={1.5}>
-                  <Button
-                    variant='outlined'
-                    size='small'
-                    startIcon={<Github size={18} />}
-                    endIcon={<OpenInNewIcon />}
-                    component={Link}
-                    href='https://github.com/hadi87s/quickstart-next'
-                    target='_blank'
-                    rel='noopener'
-                  >
-                    GitHub
-                  </Button>
-                  <Button
-                    variant='outlined'
-                    size='small'
-                    startIcon={<Package size={18} />}
-                    endIcon={<OpenInNewIcon />}
-                    component={Link}
-                    href='https://www.npmjs.com/package/@hadi87s/quickstart-next'
-                    target='_blank'
-                    rel='noopener'
-                  >
-                    npm
-                  </Button>
-                </Stack>
-              </CardContent>
-            </Card>
+            <TechLogosCard />
           </Grid>
         </Grid>
-
-        {/* Footer */}
-        <Stack alignItems='center' sx={{ mt: 8, opacity: 0.65 }}>
-          <Typography variant='body2'>
-            Built with ❤️ by{' '}
-            <MuiLink
-              href='https://github.com/hadi87s/quickstart-next'
-              underline='none'
-              color='primary'
-              sx={{ fontWeight: 600 }}
-              target='_blank'
-              rel='noopener'
-            >
-              Hadi
-            </MuiLink>{' '}
-            using MUI. Ready for Tailwind v4, React Query, and more.
-          </Typography>
-        </Stack>
+        <Footer />
       </Container>
     </Box>
   )

package/templates/base/providers/BaseProvider.tsx

@@ -1,22 +1,14 @@
 'use client'
 
 import { PropsWithChildren, useState } from 'react'
-import { CssBaseline, ThemeProvider, createTheme } from '@mui/material'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-
-const theme = createTheme({
-  palette: { mode: 'dark' },
-  shape: { borderRadius: 12 },
-  typography: { fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif' }
-})
+import ThemeComponent from '@/@core/theme/ThemeComponent'
 
 export default function BaseProviders({ children }: PropsWithChildren) {
   const [client] = useState(() => new QueryClient())
   return (
-    <ThemeProvider theme={theme}>
-      {/* If you kept Tailwind preflight OFF, keep CssBaseline ON */}
-      <CssBaseline />
+    <ThemeComponent>
       <QueryClientProvider client={client}>{children}</QueryClientProvider>
-    </ThemeProvider>
+    </ThemeComponent>
   )
 }