Feat/new changes

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: 300,
+}, {
+  label: 'Regular',
+  value: 400,
+}, {
+  label: 'Medium',
+  value: 500,
+}, {
+  label: 'SemiBold',
+  value: 600,
+}, {
+  label: 'Bold',
+  value: 700,
+}, {
+  label: 'ExtraBold',
+  value: 800,
+}]

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>
+  )
+}

app/modules/fonts/FontInformation.tsx

@@ -0,0 +1,62 @@
+import type { FontInfo } from '@modules/shared/types'
+import { Button } from '@modules/shared/components/ui/button'
+import { ArrowLeft } from 'lucide-react'
+import { useNavigate } from 'react-router'
+
+interface singleFontInfoProps {
+  readonly selectedFont?: FontInfo
+}
+export function FontInformation({ selectedFont }: singleFontInfoProps) {
+  const buttonClass
+        = 'w-[135px] h-[37px] border bg-white hover:bg-black hover:text-white p-2 rounded-full'
+  const navigate = useNavigate()
+
+  return (
+    <div className="h-32 mt-4">
+      <div className="h-full flex flex-col gap-12">
+        <div className="flex justify-between">
+          <div
+            onClick={() => {
+              navigate('/')
+            }}
+            className="flex items-center font-semibold gap-2 text-sm cursor-pointer transform transition-transform ease-out hover:scale-110 duration-700"
+          >
+            <ArrowLeft size={20} />
+            All Projects
+          </div>
+          <div>
+            <div className="md:hidden flex items-center gap-2">
+              <p className="font-semibold text-sm">font family:</p>
+              <span className="font-semibold text-xl">{selectedFont?.fontName}</span>
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-between items-center h-full border-b w-full">
+          <div className="md:flex-1 hidden md:block">
+            <p className="font-semibold text-sm">font family</p>
+            <span className="font-semibold text-3xl">{selectedFont?.fontName}</span>
+          </div>
+          <div className="flex gap-20  xl:flex-[0.8]">
+            <div className="flex flex-col w-fit">
+              <p className="font-semibold text-sm">Scripts</p>
+              <span className="font-semibold text-sm ">{selectedFont?.lang}</span>
+            </div>
+            <div className="flex flex-col">
+              <p className="font-semibold text-sm">Lisance</p>
+              <span className="font-semibold">OFL</span>
+            </div>
+            <div className="flex flex-col ">
+              <p className="font-semibold text-sm">designer</p>
+              <span className="font-semibold">{selectedFont?.owner}</span>
+            </div>
+          </div>
+          <div className=" flex-none hidden md:block ">
+            <Button className={`${buttonClass} ml-8`} variant="ghost">
+              Get the Font
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}