# Frontend Theme to Blade Integration
After running:
```bash
php artisan site:stage-frontend-theme "C:\path\to\extracted-html-theme" --force
```
the theme is only staged. It is not automatically converted into Laravel Blade.
## What the Command Does
- Copies theme assets into `public/frontend`.
- Copies root HTML pages into `storage/app/frontend-references/{theme_name}/pages`.
- Writes a manifest so you can see what was staged.
## What You Do Next
### 1. Pick the Main Reference Page
Open:
```text
storage/app/frontend-references/{theme_name}/pages/index.html
```
Use this as the source for:
- Header layout
- Footer layout
- Home sections
- CSS and JS asset order
- Required plugin scripts
For your current Techor theme, the reference is:
```text
storage/app/frontend-references/techorhtml_10/pages/index.html
```
### 2. Update the Blade Layout
Edit:
```text
resources/views/frontend/layouts/app.blade.php
```
Copy the theme `` asset links into the Blade layout, but convert paths like:
```html
assets/css/style.css
```
to:
```blade
{{ asset('frontend/assets/css/style.css') }}
```
Do the same for JS files near the bottom of the layout.
### 3. Extract the Header
From the reference `index.html`, copy the header/navigation section into:
```text
resources/views/frontend/layouts/header.blade.php
```
Then replace static menu links with CMS routes:
```blade
{{ route('home') }}
{{ route('frontend.about') }}
{{ route('frontend.services.index') }}
{{ route('frontend.projects.index') }}
{{ route('frontend.news.index') }}
{{ route('frontend.contact') }}
```
Replace the static logo path with the CMS logo:
```blade
```
### 4. Extract the Footer
From the reference `index.html`, copy the footer into:
```text
resources/views/frontend/layouts/footer.blade.php
```
Then replace:
- Static contact details with settings.
- Static social icons with settings.
- Static service links with active services.
- Static news/footer posts with latest news.
### 5. Build the Home Page
Use the body sections from `index.html` and move them into:
```text
resources/views/frontend/home.blade.php
```
Keep the exact theme classes and structure first. Then replace content section by section:
- Hero: settings such as `hero_title`, `hero_subtitle`, `hero_image`.
- Services: `$featuredServices`.
- Projects: `$featuredProjects`.
- Team: `$featuredTeams`.
- News/blog: `$featuredNews`.
- Testimonials/partners: settings or CMS records.
- Contact form: `route('frontend.contact.submit')`.
- Newsletter: `route('frontend.newsletter.subscribe')`.
### 6. Convert Inner Pages
For each staged page, map it to the correct Blade file:
| Theme HTML | Blade Target |
| --- | --- |
| `about.html` | `resources/views/frontend/about/index.blade.php` |
| `service.html` | `resources/views/frontend/services/index.blade.php` |
| `service-details.html` | `resources/views/frontend/services/show.blade.php` |
| `project.html` | `resources/views/frontend/projects/index.blade.php` |
| `project-details.html` | `resources/views/frontend/projects/show.blade.php` |
| `blog.html`, `blog-list.html` | `resources/views/frontend/news/index.blade.php` |
| `blog-details.html` | `resources/views/frontend/news/show.blade.php` |
| `team.html` | `resources/views/frontend/teams/index.blade.php` |
| `team-details.html` | `resources/views/frontend/teams/show.blade.php` |
| `contact.html` | `resources/views/frontend/contact.blade.php` |
| `faq.html` | `resources/views/frontend/static/faq.blade.php` |
| `404.html` | `resources/views/errors/404.blade.php` |
### 7. Preserve Theme Image Sizes
When replacing theme images with CMS images, do not let uploaded sizes distort the layout.
Wrap images with a fixed frame class:
```blade
```
Then define the required dimensions in the layout CSS:
```css
.cms-frame--service-card {
aspect-ratio: 700 / 479;
}
.cms-frame img {
width: 100%;
height: 100%;
object-fit: cover;
}
```
This is the rule for all theme image slots: the section controls the size, not the uploaded image.
### 8. Verify Every Page
After each conversion pass:
```bash
php artisan view:clear
php artisan route:list
```
Then render-check the public pages:
```bash
php artisan tinker
```
Use the browser to check:
- Home
- About
- Services
- Service detail
- Projects
- Project detail
- News
- News detail
- Team
- Team detail
- Contact
- FAQ
## Important Rule
Do not edit the raw HTML files in `storage/app/frontend-references` as the live site.
Those files are references only. The live frontend is always built from:
```text
resources/views/frontend
```
with assets loaded from:
```text
public/frontend
```