web-hosts/domains/coppertone.tech/docs/project-plan/phases/Phase-2-Core-Frontend-Development.md

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:

    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.

    ---
    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.