Modern Architecture Interior Design Firm Template

How to Edit the Architek Design Template

I'll help you understand how to edit this architecture website template. Let me break it down into manageable sections.

Basic Structure Overview

This template has several main sections:

• Header/Navigation
• Hero section
• About Us
• Services
• Portfolio
• Team
• Contact
• Footer

Step-by-Step Editing Guide

1. Text Content Changes

Hero Section (Lines 55-64):

html

<h1 class="text-5xl md:text-7xl font-bold font-playfair mb-4 leading-tight">Your New Title Here</h1>

<p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Your new subtitle here</p>

About Section (Lines 69-82):

html

<h2 class="text-5xl font-playfair text-center mb-16 text-neutral-800">New About Us Title</h2>

<h3 class="text-3xl font-playfair mb-6 text-neutral-700">New Subtitle</h3>

<p class="text-lg leading-relaxed mb-4 text-neutral-600">Your new paragraph text here</p>

2. Image Replacements

Hero Background (Line 56):

html

<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('images/your-new-hero-image.jpg');"></div>

About Section Image (Line 83):

html

<img src="images/your-new-about-image.jpg" alt="Your new alt text" class="rounded-lg shadow-xl w-full h-auto object-cover">

3. Service Cards Customization

Each service card (Lines 91-145) can be edited:

html

<div class="text-amber-600 mb-6 mx-auto w-16 h-16 flex items-center justify-center rounded-full bg-amber-100">

    <!-- Replace SVG icon if needed -->

    <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>

</div>

<h3 class="text-2xl font-playfair mb-4 text-neutral-700">New Service Title</h3>

<p class="text-neutral-600 leading-relaxed">New service description</p>

4. Portfolio Projects

Each project card (Lines 150-201) can be updated:

html

<img src="images/your-new-project-image.jpg" alt="Project description" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300">

<div class="absolute inset-0 bg-neutral-900 bg-opacity-40 group-hover:bg-opacity-60 transition duration-300 flex items-end p-4">

    <h3 class="text-white text-xl font-playfair leading-tight">New Project Name</h3>

</div>

5. Team Members

Update team information (Lines 206-241):

html

<img src="images/your-team-member-photo.jpg" alt="Team member name" class="w-32 h-32 rounded-full mx-auto mb-6 object-cover border-4 border-amber-600 shadow-md">

<h3 class="text-xl font-playfair mb-2 text-neutral-700">New Team Member Name</h3>

<p class="text-amber-600 font-medium">New Position Title</p>

<p class="text-neutral-600 mt-3 text-sm">New team member description</p>

6. Contact Information

Update contact details (Lines 278-285):

html

<p class="text-lg text-neutral-600 mb-3"><strong class="text-neutral-800">Address:</strong> Your new address</p>

<p class="text-lg text-neutral-600 mb-3"><strong class="text-neutral-800">Phone:</strong> <a href="tel:+1234567890" class="text-amber-600 hover:underline">Your phone number</a></p>

<p class="text-lg text-neutral-600 mb-3"><strong class="text-neutral-800">Email:</b> <a href="mailto:info@architekdesign.com" class="text-amber-600 hover:underline">your-email@domain.com</a></p>

7. Color Scheme Changes

To change the primary color (currently amber), replace all instances of:

• amber-600 with your preferred color (e.g., blue-600)
• amber-700 with the darker shade (e.g., blue-700)
• amber-100 with the lighter shade (e.g., blue-100)

8. Font Customization

In the <style> section (Lines 16-21), you can change fonts:

css

body {

    font-family: 'Your New Font', sans-serif;

}

h1, h2, h3, h4, h5, h6 {

    font-family: 'Your New Heading Font', serif;

}

Important Notes

1. Image Requirements: Make sure your replacement images are properly sized and optimized for web use
2. File Structure: Keep images in an "images" folder for the paths to work correctly
3. Responsive Design: The template is mobile-responsive, so test your changes on different screen sizes
4. Browser Compatibility: Test in multiple browsers after making changes

Next Steps

Would you like me to help you with any specific section of the template? I can provide more detailed instructions for particular elements you want to modify.