Add settings (#12)

* Add settings page.

* Add about and about author pages.

* Add content to the about page.

* Update navigation

* Update about content.

* Solve lint errors.

* Add content to about page.

* Update layout

* Update logo color.

* Optimize fav icon.

* Add max width

* Update layout.

app/(homescreens)/settings/page.tsx

@@ -1,3 +1,19 @@
+import { Routes } from '@/app/lib/shared';
+import PageTemplate from '@/app/ui/page-template';
+import { PrimaryHeader } from '@/app/ui/primary-header';
+import Link from 'next/link';
+
 export default function Page() {
-  return <main>Settings</main>;
+  return (
+    <PageTemplate header={<PrimaryHeader title="Settings" />}>
+      <div className="flex flex-col gap-2 px-2 py-3 w-full">
+        <Link href={Routes.About}>
+          <button className="btn btn-primary w-full">About</button>
+        </Link>
+        <Link href={Routes.AboutAuthor}>
+          <button className="btn btn-primary w-full">About author</button>
+        </Link>
+      </div>
+    </PageTemplate>
+  );
 }

app/about-author/page.tsx

@@ -0,0 +1,63 @@
+import { Routes } from '@/app/lib/shared';
+import PageTemplate from '@/app/ui/page-template';
+import { SecondaryHeader } from '@/app/ui/secondary-header';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function Page() {
+  return (
+    <PageTemplate
+      header={<SecondaryHeader title="About author" href={Routes.Settings} />}
+    >
+      <div className="px-2 py-6">
+        <Image
+          src="https://2.gravatar.com/avatar/539b51ba48d1d7d21abb176cc32b7c6d8d421185282f1b49458960283d44942c?size=256"
+          width="256"
+          height="256"
+          alt="Lukas Bicus"
+          className="rounded-full self-center max-w-[33%] md:max-w-none justify-self-center"
+        />
+        <div className="py-4 text-center">
+          <h1 className="text-2xl md:text-3xl font-bold">Lukáš Bičuš</h1>
+          <span className="text-xl">The fullstack developer</span>
+        </div>
+        <div className="flex flex-col gap-2 px-2 py-3 mb-3 w-full bg-base-300">
+          <p className="px-2 pb-3">
+            Seasoned Software Developer with over a decade of experience in
+            JavaScript and 8 years specializing in React. I like clean code,
+            test driven development and code reviews. My expertise spans both
+            frontend and backend development.
+          </p>
+          <div className="flex flex-col gap-2 w-full md:flex-row">
+            <Link
+              href="https://github.com/lukasbicus/"
+              className="btn btn-primary w-full md:w-auto flex-grow"
+              target="_blank"
+            >
+              <FontAwesomeIcon icon={faGithub} className="w-6 h-6" />
+              Github
+            </Link>
+            <Link
+              href="https://www.linkedin.com/in/lukasbicus/"
+              className="btn btn-primary w-full md:w-auto flex-grow"
+              target="_blank"
+            >
+              <FontAwesomeIcon icon={faLinkedin} className="w-6 h-6" />
+              Linked in
+            </Link>
+          </div>
+        </div>
+        <div className="flex flex-col gap-2 px-2 py-3 w-full bg-base-300">
+          <h3 className="pt-2 text-xl">Support me</h3>
+          <p className="py-3">
+            Your support helps me to keep creating content. Thank you for your
+            generosity!
+          </p>
+          <p>Bank account: SK85 8330 0000 0023 0179 7796</p>
+        </div>
+      </div>
+    </PageTemplate>
+  );
+}

app/about/page.tsx

@@ -0,0 +1,81 @@
+import { Routes } from '@/app/lib/shared';
+import PageTemplate from '@/app/ui/page-template';
+import Image from 'next/image';
+import { SecondaryHeader } from '@/app/ui/secondary-header';
+
+export default function Page() {
+  return (
+    <PageTemplate
+      header={<SecondaryHeader title="About" href={Routes.Settings} />}
+    >
+      <div className="grid w-full grid-rows-[auto_1fr] px-4 py-6">
+        <div className="py-6 flex items-center justify-center flex-col">
+          <Image
+            src="/logo.svg"
+            alt="logo"
+            width={512}
+            height={512}
+            className="w-1/2 object-cover max-w-56"
+          />
+          <h1 className="text-3xl">Tilda</h1>
+          <span className="text-xl">The loyalty card application</span>
+        </div>
+
+        <div className="px-4 py-6 bg-base-300">
+          <h2 className="text-2xl font-bold">About Tilda</h2>
+          <p className="pt-3 pb-6">
+            {
+              "Welcome to the future of loyalty card management! Our cutting-edge application is designed to revolutionize the way you store and use your loyalty cards. With a focus on convenience, security, and versatility, we're proud to introduce an app that's not just another digital wallet - it's your personal pocket-sized companion for all your shopping needs. Here's what makes our app stand out:"
+            }
+          </p>
+          <h3 className="text-lg font-bold first-letter:text-7xl first-letter:float-left first-letter:mr-3">
+            🚀 Progressive Web App (PWA) Technology
+          </h3>
+          <p className="pt-3 pb-6">
+            {
+              "Our app harnesses the power of Progressive Web App technology to deliver a seamless experience across all your devices. Whether you're on a smartphone, tablet, or desktop, our app is optimized to work flawlessly. The best part? It's built to work offline, so you can access your loyalty cards even when you're not connected to the internet. Say goodbye to the frustration of poor connectivity in stores - your loyalty cards are always at your fingertips, no matter where you are."
+            }
+          </p>
+          <h3 className="text-lg font-bold first-letter:text-7xl first-letter:float-left first-letter:mr-3">
+            🔒 Your Data, Your Privacy - Effortlessly Transferable
+          </h3>
+          <p className="py-3">
+            We put you in complete control of your data. All your loyalty card
+            information is securely stored on your device, ensuring your privacy
+            is never compromised. No cloud storage, no servers - just
+            straightforward privacy.
+          </p>
+          <p className="py-3">
+            <b>Export with Freedom:</b>{' '}
+            {
+              "Ready to move on? Export your data quickly and carry it with you. It's yours, after all, and we've made sure you can take it wherever you go, no strings attached."
+            }
+          </p>
+          <p className="py-3">
+            <b>Import with Simplicity:</b>&nbsp; Syncing across devices is a
+            breeze. Transfer your loyalty card data to any device with our app,
+            keeping your digital wallet consistent and ready whenever you are.
+          </p>
+          <p className="pt-3 pb-6">
+            Our app is your secure bridge to managing loyalty cards across your
+            digital world, always respecting your right to privacy and data
+            autonomy.
+          </p>
+          <h3 className="text-lg font-bold first-letter:text-7xl first-letter:float-left first-letter:mr-3">
+            🃏 Versatile Loyalty Card Management
+          </h3>
+          <p className="pt-3 pb-6">
+            {
+              "Diverse shopping habits require a versatile solution. Our app is meticulously crafted to manage a wide array of loyalty card codes. From traditional barcodes such as EAN13, EAN8, UPC, CODE39, and CODE93 to modern QR codes, our app is equipped to handle them all. Whether it's your favorite coffee shop, the supermarket down the street, or the bookstore around the corner, our app simplifies your loyalty cards into one easy-to-use platform. No more fumbling through a stack of cards at checkout - just a quick scan from your device, and you're all set to enjoy your rewards."
+            }
+          </p>
+          <p>
+            {
+              "Join us on this journey to smarter shopping. With our loyalty card app, you're not just a shopper; you're a savvy consumer with the world of rewards right in your pocket."
+            }
+          </p>
+        </div>
+      </div>
+    </PageTemplate>
+  );
+}

app/lib/shared.ts

@@ -28,13 +28,15 @@ export enum Routes {
   CreateCard = '/create-card',
   ScanCard = '/scan-card',
   Card = '/card',
+  About = '/about',
+  AboutAuthor = '/about-author',
 }
 
 export enum Cookies {
   LandingPage = 'LandingPage',
 }
 
-export const ICON_COLOR = '#db924b';
+export const ICON_COLOR = '#4a00ff';
 
 export enum CardIcon {
   Grocery = 'Grocery',

app/page.tsx

@@ -23,16 +23,16 @@ export default function Home() {
           <h1 className="mb-5 text-5xl font-bold">Tilda</h1>
           <h2 className="mb-5 text-3xl font-bold">Manage your loyalty cards</h2>
           <p className="mb-5">
-            Simplify your loyalty card management with LoyaltyControl, the app
-            that puts you in charge of your data and cards.
+            Simplify your loyalty card management with Tilda, the app that puts
+            you in charge of your data and cards.
           </p>
           <div className="flex justify-center gap-4">
             <form action={saveLandingPageCookieAndRedirect}>
               <button className="btn btn-primary" type="submit">
                 Get Started
               </button>
             </form>
-            <Link className="btn" href={Routes.MyCards}>
+            <Link className="btn" href={Routes.About}>
               About
             </Link>
           </div>

next.config.mjs

@@ -3,6 +3,15 @@ import withSerwistInit from '@serwist/next';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // reactStrictMode: false,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '2.gravatar.com',
+        pathname: '/avatar/**',
+      },
+    ],
+  },
 };
 
 const withSerwist = withSerwistInit({

package.json

@@ -14,6 +14,9 @@
     "test": "npm run lint && npm run format:check && npm run tsc && npm run test:jest"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@serwist/next": "^9.0.9",
     "@tabler/icons-react": "^3.19.0",
     "clsx": "^2.1.1",