Add in docker capability

Dockerfile

@@ -0,0 +1,36 @@
+FROM node:20-alpine AS base
+
+# Install pnpm
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package.json pnpm-lock.yaml* ./
+
+FROM base AS deps
+RUN pnpm install --frozen-lockfile
+
+FROM base AS builder
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Explicitly run PostCSS/Tailwind build before Next.js build
+RUN pnpm dlx tailwindcss -i ./src/styles/globals.css -o ./src/styles/output.css
+RUN pnpm build
+
+FROM base AS runner
+ENV NODE_ENV=production
+
+# Copy necessary files
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/src/styles/output.css ./src/styles/output.css
+
+EXPOSE 3000
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

ROADMAP

@@ -0,0 +1,144 @@
+This is a portfolio website for a person named Mark Apodaca, MBA, PRP. He is a solo person who provide different services related to finances and consulting on nonprofit organizations.
+
+Those are his services:
+
+    Accounting and bookkeeping services using QuickBooks and Xero.
+    Income tax services
+    Financial statement analysis
+    Financial budgeting and estimating
+    Financial planning and analysis
+    Financial modeling
+    Business plans
+    Business models
+    Business analysis
+    Strategic planning
+    Small business consulting
+    Nonprofit organization consulting
+
+
+I want to use this following as the frontend for the website:
+
+Next.js 14
+TypeScript
+Tailwind CSS
+Lucide Icons
+
+There are no expected administration management or any database server needed for this website.
+
+There are two images that will be used for this website.
+
+First image is a photo of Mark as mark.jpg. Here is the description of the image and suggested idea for the website design:
+
+Subject Description: The image features a professional man, seated at a desk, with an approachable and confident demeanor. He is middle-aged with a balding head, gray and dark hair on the sides, and a neatly trimmed beard and mustache. He wears rectangular black-framed glasses, which contribute to a professional and studious appearance. He has a friendly smile and rests his hands lightly clasped on the desk in front of him.
+
+Clothing and Accessories: He is dressed in a pale blue dress shirt with a bright red tie that has a subtle pattern, giving him a polished and formal look. Around his neck is a lanyard that appears to have the words "SCHOOL FOR" written on it, likely representing an affiliation or prior role. On his left hand, he wears a prominent gold ring with intricate detailing, suggesting achievement or membership, such as a class ring or a professional association. His wristwatch on the left hand is dark with a clean, understated design.
+
+Background and Environment: The setting is an office with a professional but cozy atmosphere. Behind him are organized office shelves with binders, some labeled and standing upright. These folders add to the impression of a well-organized and methodical work ethic. The desk in front of him has a polished wood surface with a few visible items: a white and red document or calendar, adding a functional element, and part of a phone on the left edge of the image.
+
+Lighting and Composition: The room is well-lit, with soft natural light coming from a window with horizontal white blinds visible in the background. The lighting casts no harsh shadows, creating an inviting and professional tone. The subject is centered in the frame, with the focus clearly on him and his upper body.
+
+Tone and Impression: The overall tone of the image is warm, approachable, and professional, reflecting a balance of trustworthiness and competence. This impression aligns well with the services of financial consulting and supporting nonprofit organizations, as it suggests reliability, experience, and attention to detail.
+
+Second image is a logo of Mark's business and here is the visual description:
+
+Text and Typography: The logo prominently features the word "FINLION" in bold, capitalized serif letters. The font style is classic and professional, with slight serifs on the edges of each letter, giving it a formal and authoritative look. The letters are evenly spaced, making the text easily readable.
+
+Color Scheme: The entire logo is rendered in a deep, rich blue color. This color conveys trustworthiness, professionalism, and stability, traits often associated with financial services.
+
+Graphic Element: Integrated within the word "FINLION" is a stylized depiction of a lion’s head, replacing the "O" in "LION." The lion's face is symmetrical, with sharp, clean lines. The eyes are small and almond-shaped, giving the lion a focused and determined expression. The nose is angular, and the mouth is minimalistic, further emphasizing the lion's confident and bold demeanor. Surrounding the face is a flowing mane, stylized with sharp, dynamic strokes that radiate outward, creating a sense of movement and energy. The mane adds a modern and powerful touch to the logo.
+
+Trademark Symbol: To the lower right of the "N," a small ® (registered trademark symbol) is visible, indicating that this logo is legally trademarked.
+
+Overall Design: The combination of the bold, serif text and the strong, dynamic lion graphic conveys a message of strength, leadership, and reliability. The lion, a universal symbol of courage and power, is fitting for a brand associated with financial consulting and nonprofit services, as it implies trust and guidance.
+
+For a website designed for Mark Apodaca’s services, consider integrating these elements:
+
+1.    Color Palette: Build around the deep blue of the logo, pairing it with neutral tones like white and light gray for backgrounds and accents or accents of red or gold to mirror his tie and ring.
+2.    Typography: Use a serif font similar to the logo for headings to maintain brand consistency, paired with a clean sans-serif font for body text.
+3.    Iconography: Use lion-inspired imagery or subtle mane-like patterns for decorative elements to echo the logo's theme.
+4.    Imagery Style: Include warm, welcoming photos and emphasize neat organization, reflecting the details in the office environment.
+4.    Emphasis: Highlight the lion's strength and elegance in the design to reflect the brand’s values of leadership and reliability.
+5.    Navigation and Layout: Keep the design structured and easy to navigate, with sections that highlight his expertise, services, and contact information. Use soft contrasts to ensure accessibility.
+
+Here is a third image that will not be on the website but is to provide information about the previous website that is a screenshot. Here is the visual description:
+
+Layout Overview:
+
+The screenshot displays a relatively simple and traditional website layout with a fixed-width design. It features a two-column structure:
+
+    Left Column: Contains navigation and a welcome text.
+    Right Column: Includes a header with the company logo and a tagline, along with an image of professionals in a collaborative setting.
+
+Header Section:
+
+    Logo:
+        The top-right corner of the website prominently displays the FINLION logo in blue, as described earlier.
+        Below the logo is a tagline in smaller, italicized font:
+        "A business & financial consulting firm since 1978."
+        This adds credibility by emphasizing the firm's longstanding history.
+
+    Background Bar:
+        A thin horizontal gray bar runs beneath the header, creating separation between the logo/tagline and the main body of the webpage.
+
+Navigation Menu:
+
+The left column contains a vertical navigation menu, styled as a series of blue buttons with white text. The menu includes the following links:
+
+    Overview
+    Services
+    Benefits
+    Articles
+    Contact
+
+The blue-and-white color combination maintains a professional appearance and aligns with the branding established by the logo.
+Main Content Area:
+
+The right column is divided into text and an image section:
+
+    Welcome Text:
+        A heading in bold blue text reads:
+        "Welcome to FINLION!"
+        Below the heading is a paragraph in black text that provides an introduction to the firm:
+
+            FINLION has been serving the needs of individuals and small businesses since 1978. Originally formed as an income tax practice in Los Angeles, California, the firm specializes in business startups, accounting and income taxes, financial management, and personal financial planning. Feel welcome to explore this website and if you have any questions or would like to utilize FINLION’s services, feel free to contact us.
+
+    Bullet Point Links:
+
+        Beneath the paragraph, there are four clickable text links in gold:
+            What Makes Great Organizations?
+            Focus
+            Proficiency
+            The Power of Planning
+
+        These links appear to direct users to additional resources or articles.
+
+Image Section:
+
+To the right of the welcome text, there is a photo of three professionals working together:
+
+    The setting is an office environment with a bright, neutral background.
+    Two women and one man are gathered around a laptop, appearing engaged in discussion. This imagery reinforces themes of collaboration and professionalism.
+
+Footer:
+
+At the bottom of the page, in small black text, there is a copyright notice:
+
+    "© 1999-2010, FINLION. All rights reserved."
+    Below this, there is a credit to the website producer:
+        "Produced by Design Actually, LLC."
+        The text "Design Actually, LLC" is a clickable link, suggesting a reference to the original web design firm.
+
+Design Notes:
+
+    The overall color scheme uses blue, white, gray, and gold, consistent with the logo's professional aesthetic.
+    The website feels clean but slightly outdated, as it follows a late-1990s to early-2000s design approach with a heavy focus on text and simple structure.
+    The layout is functional but not responsive, likely designed for desktop viewing rather than mobile devices.
+
+Suggestions for Modernizing:
+
+    Responsive Design: Ensure the website is optimized for both desktop and mobile platforms with a flexible layout.
+    Typography Update: Use more modern fonts with better readability and a mix of sans-serif for headings and body text.
+    Improved Visuals: Replace static professional imagery with dynamic, authentic visuals that represent Mark’s services.
+    Streamlined Navigation: Simplify the navigation menu for user-friendly access, such as dropdowns or a sticky top menu.
+    Call to Action (CTA): Add prominent buttons for quick contact or consultation requests on the homepage.
+    Brand Consistency: Retain the blue, white, and gold color scheme but integrate it with contemporary UI elements like gradients or subtle animations.

docker-compose.yml

@@ -0,0 +1,12 @@
+version: '3.8'
+
+services:
+  web:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+    restart: unless-stopped

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.ts

@@ -1,7 +1,10 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: 'standalone',
+  images: {
+    unoptimized: true
+  }
 };
 
 export default nextConfig;

package.json

@@ -2,6 +2,7 @@
   "name": "finlion-website",
   "version": "0.1.0",
   "private": true,
+  "packageManager": "pnpm@9.14.2",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -20,6 +21,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/parser": "^8.16.0",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.15.0",
     "eslint-config-next": "15.0.3",
     "eslint-plugin-import": "^2.31.0",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app/contact/page.tsx

@@ -1,4 +1,4 @@
-import Contact from '@/components/home/Contact';
+import Contact from '../../components/home/Contact';
 
 export default function ContactPage() {
   return (

src/components/layout/Footer.tsx

@@ -1,11 +1,16 @@
 'use client'
 
+import { useState, useEffect } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Phone, Mail, MapPin } from 'lucide-react';
 
 export default function Footer() {
-  const currentYear = new Date().getFullYear();
+  const [year, setYear] = useState('');
+
+  useEffect(() => {
+    setYear(new Date().getFullYear().toString());
+  }, []);
 
   return (
     <footer className="bg-blue-900 text-white">
@@ -74,7 +79,7 @@ export default function Footer() {
 
         {/* Copyright */}
         <div className="mt-8 pt-8 border-t border-blue-800 text-center text-sm">
-          <p>© {currentYear} FINLION. All rights reserved.</p>
+          <p>© {year} FINLION. All rights reserved.</p>
         </div>
       </div>
     </footer>

src/components/ui/Button.tsx

@@ -5,10 +5,12 @@ interface ButtonProps {
 }
 
 export default function Button({ children, onClick, className = "" }: ButtonProps) {
+  const buttonClasses = `px-4 py-2 rounded-md ${className}`.trim();
+  
   return (
     <button
       onClick={onClick}
-      className={`px-4 py-2 rounded-md ${className}`}
+      className={buttonClasses}
     >
       {children}
     </button>

tsconfig.json

@@ -18,8 +18,9 @@
         "name": "next"
       }
     ],
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./src/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],