# Phase 2 Breakdown: Core Website & Frontend Development

With the project's foundation in place, this phase focuses on building the visible, public-facing portion of the Copper Tone Technologies website. The goal is to create a professional, informative, and visually appealing user experience.

---

### Task 2.1: Site Structure and Component Design

A well-organized component library is essential for a maintainable and scalable frontend. We will adopt a logical structure for storing and organizing components.

*   **2.1.1. Define Directory Structure:**
    *   `src/components/layout`: For major layout components like the site header, footer, and navigation.
        *   `TheHeader.vue`
        *   `TheFooter.vue`
        *   `Navbar.vue`
    *   `src/components/ui`: For small, reusable, generic UI elements.
        *   `CtaButton.vue` (Call-to-action button)
        *   `BaseCard.vue`
        *   `FormInput.vue`
        *   `Spinner.vue`
    *   `src/components/views`: For components specific to a particular page or view.
        *   `HomePage/HeroSection.vue`
        *   `ServicesPage/ServiceList.vue`
        *   `BlogPage/ArticlePreview.vue`
*   **2.1.2. Design System & Styling:**
    *   In `tailwind.config.js`, define the brand's color palette (coppers, earth tones), fonts, and spacing scale to ensure visual consistency.
    *   Create base styles in `src/assets/main.css` for typography and overall page appearance.

---

### Task 2.2: Public-Facing Pages & PWA Implementation

These pages will serve as the main entry points for visitors and potential clients. They will be routed using Vue Router.

*   **2.2.1. Routing Setup (`src/router/index.ts`):**
    *   Define routes for the main pages:
        ```typescript
        const routes = [
          { path: '/', name: 'Home', component: () => import('@/views/HomeView.vue') },
          { path: '/about', name: 'About', component: () => import('@/views/AboutView.vue') },
          { path: '/contact', name: 'Contact', component: () => import('@/views/ContactView.vue') },
          // ... other routes
        ];
        ```
*   **2.2.2. Home Page (`src/views/HomeView.vue`):**
    *   **Hero Section:** A prominent section with the company name, a compelling tagline, and a primary call-to-action (e.g., "Get a Quote", "Our Services").
    *   **Services Overview:** A brief showcase of the main service categories.
    *   **Company Intro:** A short section introducing Hopoyuksa Tali Lakna / Copper Tone Technologies.
*   **2.2.3. About Us Page (`src/views/AboutView.vue`):**
    *   **Company History:** Detail the company's background, including its identity as an autochthonous American Indian company.
    *   **Mission & Values:** Clearly state the company's mission.
    *   **Team Section:** (Optional) Profiles of key team members.
*   **2.2.4. Contact Page (`src/views/ContactView.vue`):**
    *   **Contact Form:** A form for inquiries (fields: Name, Email, Phone, Message).
    *   **Contact Information:** Display the company's physical address, phone number, and email.
*   **2.2.5. PWA Implementation:**
    *   Configure `manifest.json` for app metadata, icons, and display modes.
    *   Implement a service worker for offline caching of assets and API requests, and enable push notifications (if required).
    *   Ensure the application is installable on mobile and desktop devices.
    *   **Utilize Helia (IPFS) to enhance content delivery, exploring options for decentralized storage of static assets and potentially dynamic content.**

---

### Task 2.3: Services Section

This section will dynamically generate pages for each service offered by the company, using Markdown for content management. This allows non-developers to update service information easily.

*   **2.3.1. Content Storage:**
    *   Create a directory `public/content/services`.
    *   Inside, create Markdown files for each service (e.g., `network-cabling.md`, `server-administration.md`).
    *   Each file will contain metadata (using "frontmatter") and the service description in Markdown.
        ```markdown
        ---
        title: "Network Cabling"
        icon: "lan-connect"
        short_description: "Professional installation of Cat5e, Cat6, and fiber optic cabling."
        ---

        ## Detailed Service Description
        We provide end-to-end cabling solutions for businesses of all sizes...
        ```
*   **2.3.2. Dynamic Routing:**
    *   Add a dynamic route to Vue Router: `{ path: '/services/:slug', name: 'ServiceDetail', component: () => import('@/views/ServiceDetailView.vue') }`.
*   **2.3.3. Content Rendering:**
    *   In the `ServiceDetailView.vue` component, use the route parameter (`$route.params.slug`) to fetch the corresponding Markdown file.
    *   Use a library like `markdown-it` and `front-matter` to parse the file content and metadata.
    *   Render the parsed HTML content using `v-html`.
*   **2.3.4. Services List Page (`src/views/ServicesView.vue`):**
    *   This page will fetch all files from `public/content/services`, parse their frontmatter, and display a list or grid of `ServiceCard` components, linking to the detail pages.

---

### Task 2.4: Blog/Articles Section

This will function similarly to the Services section, providing a platform for sharing news, insights, and technical articles.

*   **2.4.1. Content Storage:**
    *   Create a `public/content/blog` directory for Markdown article files.
    *   Article frontmatter might include `title`, `author`, `date`, and `tags`.
*   **2.4.2. Routing:**
    *   Add a list page route: `{ path: '/blog', name: 'Blog', component: () => import('@/views/BlogView.vue') }`.
    *   Add a detail page route: `{ path: '/blog/:slug', name: 'ArticleDetail', component: () => import('@/views/ArticleDetailView.vue') }`.
*   **2.4.3. Implementation:**
    *   The implementation will mirror the Services section: fetch content based on route params, parse Markdown and frontmatter, and render it in the appropriate view. The `BlogView` will list all articles, sorted by date.