Feat/add docker

Dockerfile

@@ -1,22 +1,22 @@
 FROM node:20-alpine AS development-dependencies-env
-COPY . /app
-WORKDIR /app
-RUN npm ci
 
-FROM node:20-alpine AS production-dependencies-env
-COPY ./package.json package-lock.json /app/
-WORKDIR /app
-RUN npm ci --omit=dev
+# Install pnpm with specific version
+RUN corepack enable && corepack prepare [email protected] --activate
 
-FROM node:20-alpine AS build-env
-COPY . /app/
-COPY --from=development-dependencies-env /app/node_modules /app/node_modules
 WORKDIR /app
-RUN npm run build
 
-FROM node:20-alpine
-COPY ./package.json package-lock.json /app/
-COPY --from=production-dependencies-env /app/node_modules /app/node_modules
-COPY --from=build-env /app/build /app/build
-WORKDIR /app
-CMD ["npm", "run", "start"]
+# Copy package files
+COPY package.json pnpm-lock.yaml ./
+
+# Install dependencies
+RUN pnpm install --frozen-lockfile
+
+# Copy the rest of the application code
+COPY . .
+
+RUN pnpm run build
+
+EXPOSE 3000
+
+
+CMD ["pnpm", "run", "start"]

app/app.css

@@ -4,20 +4,59 @@
 @tailwind components;
 @tailwind utilities;
 
-html,
-body {
-  @apply bg-white dark:bg-gray-950;
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  src: url('../public/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
+}
 
-  @media (prefers-color-scheme: dark) {
-    color-scheme: dark;
-  }
+@font-face {
+  font-family: 'Stick No Bills';
+  font-style: normal;
+  src: url('../public/fonts/StickNoBills-VariableFont_wght.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'AbhayaLibre';
+  font-style: normal;
+  src: url('../public/fonts/AbhayaLibre-Medium.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Yaldevi';
+  font-style: normal;
+  src: url('../public/fonts/Yaldevi-VariableFont_wght.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Whisper';
+  font-style: normal;
+  src: url('../public/fonts/Whisper-Regular.ttf') format('truetype');
+}
 
-  html {
-    font-family: 'Inter', serif;
-  }
+@font-face {
+  font-family: 'Noto Serif Sinhala';
+  font-style: normal;
+  src: url('../public/fonts/NotoSerifSinhala-VariableFont_wdth,wght.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Madimi One';
+  font-style: normal;
+  src: url('../public/fonts/MadimiOne-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Caveat';
+  font-style: normal;
+  src: url('../public/fonts/Caveat-VariableFont_wght.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Mansalva';
+  font-style: normal;
+  src: url('../public/fonts/Mansalva-Regular.ttf') format('truetype');
 }
 
 @layer base {
+  html {
+    font-family: Inter, system-ui, sans-serif;
+  }
+
   :root {
     --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;

app/config.ts

@@ -0,0 +1,21 @@
+export const PHONE_NO = '077 123 4567'
+export const EMAIL = '[email protected]'
+export const FONT_SIZES = [{
+  label: 'Light',
+  value: 100,
+}, {
+  label: 'Regular',
+  value: 400,
+}, {
+  label: 'Medium',
+  value: 500,
+}, {
+  label: 'SemiBold',
+  value: 600,
+}, {
+  label: 'Bold',
+  value: 700,
+}, {
+  label: 'ExtraBold',
+  value: 900,
+}]

app/modules/about/data/foundersData.ts

@@ -0,0 +1,23 @@
+export const founders = [
+  {
+    firstName: 'Pathum',
+    lastName: 'Egodawatta',
+    img: '/about/founder_pathum.png',
+    description:
+      'Pathum is a typeface designer, font engineer and a researcher of typography. He specializes in type and typography of South Asian scripts with a focus on Sinhala and Tamil scripts and multilingual communications. Pathum received his MA in Typeface Design from the University of Reading with a distinction in 2016 and a BA in Graphic Design from the Academy of Design (AOD), Colombo with a distinction in 2013. He is currently based in Colombo, Sri Lanka leading Mooniak – a multidisciplinary design, art direction and technology practice with an emphasis on type. Pathum and the team provides consulting on South Indian script related localisation, type design, typography and multilingual communication. He is also the co-founder of Akuru Collective and Curator at W.A. Silva Museum & Printing Press.',
+  },
+  {
+    firstName: 'Kosala',
+    lastName: 'Senevirathna',
+    img: '/about/founder_pathum.png',
+    description:
+      'Kosala is a self-taught Graphic & Type Designer who studied Interior Architecture prior to shifting his professional practice into the field of communication design. Ever since, he gained experience as a Type Designer, Graphic Designer, Illustration Artist, Editorial and Layout Designer and as an Art Director for 3 years and has extended his services as a freelance designer for more than 7 years. Kosala has a keen interest in multilingual / multiscript type and typographic design and has designed two original typefaces for Sinhala and Tamil while contributing to many more projects related to type and typographic design in Sri Lanka.',
+  },
+  {
+    firstName: 'Rajitha',
+    lastName: 'Manamperi',
+    img: '/about/founder_pathum.png',
+    description:
+      'Self taught Graphic and Typeface Designer who is interested in Photography, Videography and other visual arts. Now working with Mooniak with the belief in design as a powerful tool of changing the world. and find Mooniak as a socially effective design collaboration. Involves in Concept Development, Branding and Visual Development aspects with Product Design. Worked as the Branding Manager for the Scribble and in the good market.',
+  },
+]

app/modules/app/Footer.tsx

@@ -0,0 +1,69 @@
+import { SocialMediaIcon } from '@modules/shared/components/SocialMediaIcon'
+import { Separator } from '@modules/shared/components/ui/separator'
+import { Link, useNavigate } from 'react-router'
+
+interface footerProps {
+  readonly isPage?: boolean
+}
+export function Footer({ isPage }: footerProps) {
+  const navigate = useNavigate()
+
+  return (
+    <div>
+      {!isPage && (
+        <div className="text-[60px] pb-10 text-center font-AbhayaLibre">෴</div>
+      )}
+      <Separator className="bg-black" />
+      <div className="grid lg:grid-rows-3 grid-rows-4 lg:grid-cols-12 grid-cols-8 max-lg:pt-5">
+        <Link
+          to="/"
+          className="lg:col-start-1 lg:col-end-5 row-start-1 lg:row-start-2 text-3xl font-bold text-start col-start-1 col-end-2 font-space-grotesk"
+        >
+          Mooniak
+        </Link>
+
+        <div className="pt-0 lg:pt-6 row-span-3 grid grid-rows-3 md:grid-cols-6 h-20 md:col-start-7 md:col-end-9 xl:col-start-7 xl:col-end-7 lg:col-start-7 gap-4 lg:gap-8 lg:col-end-9 sm:col-start-5 sm:col-end-7 grid-cols-6 col-start-6 col-end-9 text-start font-bold text-sm">
+          <div
+            className="col-span-1 md:col-start-1 col-start-1 col-end-3 cursor-pointer hover:underline mt-2"
+            onClick={() => {
+              navigate(`/#ontRowView`)
+            }}
+          >
+            Fonts
+          </div>
+          <Link
+            className="col-span-1 cursor-pointer hover:underline mt-2"
+            to="/community"
+          >
+            Community
+          </Link>
+          <Link
+            className="col-span-1 md:col-start-1 col-start-1 col-end-3  cursor-pointer hover:underline mt-2"
+            to="/about/"
+          >
+            About
+          </Link>
+          <Link
+            className="col-span-1 cursor-pointer hover:underline mt-2"
+            to="/contact/"
+          >
+            Contact
+          </Link>
+          <Link
+            className="col-span-1 md:col-start-1 col-start-1 col-end-3  cursor-pointer hover:underline mt-2"
+            to="/tools/"
+          >
+            Tools
+          </Link>
+        </div>
+
+        <div className="md:col-start-10 md:col-end-13 md:row-start-2 sm:col-start-5 lg:col-start-12 lg:col-end-13 lg:row-start-2 sm:col-end-7 md:row-end-3 text-end col-start-6 col-end-9">
+          <Separator className="lg:hidden block " />
+          <div className="flex items-center gap-1 md:justify-end">
+            <SocialMediaIcon />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/modules/app/Header.tsx

@@ -0,0 +1,69 @@
+import { Sidebar } from '@modules/app/Sidebar'
+import { SocialMediaIcon } from '@modules/shared/components/SocialMediaIcon'
+import { Button } from '@modules/shared/components/ui/button'
+import { ArrowLeft, X } from 'lucide-react'
+
+import { useState } from 'react'
+import { Link } from 'react-router'
+
+export function Header() {
+  const navButtonClassName = 'cursor-pointer hover:underline '
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
+
+  return (
+    <div className="w-full border-b border-black h-[60px] flex items-center">
+      <div className="grid grid-cols-12 items-center w-full">
+        {/* Logo */}
+        <Link
+          to="/"
+          className="col-start-1 col-end-2 text-start text-3xl font-bold font-space-grotesk"
+        >
+          <img src="/app/logo.svg" alt="Logo" />
+        </Link>
+
+        {/* Navigation Links */}
+        <div
+          className="lg:col-start-4 lg:col-end-11 xl:col-end-12 col-end-13 col-span-1 text-center hidden w-full sm:block sm:w-auto"
+        >
+          <div className="lg:gap-[32px] gap-[10px] flex items-center justify-end font-bold">
+            <Link className={navButtonClassName} to="#">
+              Licenses
+            </Link>
+            <Link className={navButtonClassName} to="/community">
+              Community
+            </Link>
+          </div>
+        </div>
+
+        {/* Social Media Icons */}
+        <div className="col-start-12 col-end-13 col-span-1 bg-white text-center hidden lg:block sm:w-auto">
+          <div className="flex items-center gap-2 justify-end">
+            <SocialMediaIcon />
+          </div>
+        </div>
+
+        {/* Mobile Menu Button */}
+        <div
+          className="col-start-12 col-end-13 col-span-1 bg-white h-[42px] text-center justify-end flex items-center sm:hidden"
+        >
+          <Button
+            variant="ghost"
+            className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none"
+            onClick={() => {
+              setIsSidebarOpen(prevState => !prevState)
+            }}
+          >
+            {isSidebarOpen ? <X color="#000000" /> : <ArrowLeft color="#000000" />}
+          </Button>
+        </div>
+
+        {/* Sidebar */}
+        <Sidebar
+          isSidebarOpen={isSidebarOpen}
+          className={`${!isSidebarOpen ? '' : ''} block sm:hidden`}
+        />
+      </div>
+    </div>
+
+  )
+}

app/modules/app/Sidebar.tsx

@@ -0,0 +1,73 @@
+import { cn } from '@modules/lib/utils'
+import { SocialMediaIcon } from '@modules/shared/components/SocialMediaIcon'
+import { Separator } from '@modules/shared/components/ui/separator'
+import { useEffect } from 'react'
+import { Link } from 'react-router'
+
+interface sidebarProps {
+  readonly isSidebarOpen: boolean
+  readonly className: string
+}
+export function Sidebar({ isSidebarOpen, className }: sidebarProps) {
+  const navButtonClassName = 'cursor-pointer hover:underline  '
+
+  const toggleBodyOverflow = (isOpen: boolean) => {
+    document.body.style.overflowY = isOpen ? 'hidden' : 'auto'
+  }
+
+  useEffect(() => {
+    toggleBodyOverflow(isSidebarOpen)
+  }, [isSidebarOpen])
+
+  return (
+    <div
+      className={`${isSidebarOpen ? ' translate-x-0 duration-500 ' : '-translate-x-full duration-500'} z-10 w-screen pr-16 block sm2:hidden  `}
+    >
+      {isSidebarOpen && (
+        <div>
+          <Separator />
+          <div
+            className={cn(
+              `bg-white h-screen pt-10 grid grid-rows-8 space-y-3 text-[30px] hidden`,
+              isSidebarOpen ? 'w-full' : '-translate-x-full duration-500',
+              className,
+            )}
+          >
+            <div>
+              <Link className={navButtonClassName} to="/public">
+                Fonts
+              </Link>
+            </div>
+            <div>
+              <Link className={navButtonClassName} to="/about/">
+                About
+              </Link>
+            </div>
+
+            <div>
+              <Link className={navButtonClassName} to="/public">
+                Tools
+              </Link>
+            </div>
+
+            <div>
+              <Link className={navButtonClassName} to="/community">
+                Community
+              </Link>
+            </div>
+
+            <div>
+              <Link to="/contact/" className={navButtonClassName}>
+                Contact
+              </Link>
+            </div>
+            <div className="pt-10">
+              <Separator />
+            </div>
+            <SocialMediaIcon />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}