# iGency - Agency Landing page

***

## Intro

<figure><img src="https://2201621637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq1qrylIQxip6ZWwcCIUn%2Fuploads%2FbUdO13TMIYKZgF334ws1%2Fhttps___meta-q.cdn.bubble.io_f1675251037617x122679275852993760_Frame%2520838.png?alt=media&#x26;token=3693aed3-c18a-4ead-9bea-237ad7997af9" alt=""><figcaption></figcaption></figure>

## Links

🖥️ [Preview link](https://agency1325.bubbleapps.io/)

🌐 [Template page on Bubble Marketplace](https://bubble.io/template/agency-landing-page-1648207490517x128416203318493180)

***

## Screenshots

<div align="center" data-full-width="false"><figure><img src="https://2201621637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq1qrylIQxip6ZWwcCIUn%2Fuploads%2FBIgnFlUrdAQWDMWOqGKK%2F1.png?alt=media&#x26;token=6cb1d7a2-ef89-420c-a09a-1c974dd5f206" alt=""><figcaption><p>Index page</p></figcaption></figure> <figure><img src="https://2201621637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq1qrylIQxip6ZWwcCIUn%2Fuploads%2Fg0Bejj11O4uNrJmCbPzk%2F2.png?alt=media&#x26;token=f308eacb-4586-4f5e-b859-be525515d934" alt=""><figcaption><p>Progress and services</p></figcaption></figure> <figure><img src="https://2201621637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq1qrylIQxip6ZWwcCIUn%2Fuploads%2FjUq6MqQAg4DzoLmGdcvk%2F3.png?alt=media&#x26;token=b6b6ded4-5805-43f7-96a6-f4314ed6de06" alt=""><figcaption><p>Portfolio</p></figcaption></figure> <figure><img src="https://2201621637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq1qrylIQxip6ZWwcCIUn%2Fuploads%2FX4lJGlOF57HGQPVGYbFa%2F4.png?alt=media&#x26;token=118f660e-6702-4b23-bc81-555b19a51140" alt=""><figcaption><p>Pricing</p></figcaption></figure> <figure><img src="https://2201621637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq1qrylIQxip6ZWwcCIUn%2Fuploads%2Fw2gBbUmz3P7OVbQClHTk%2F5.png?alt=media&#x26;token=fc750ef8-9c20-4922-8ab5-d9387086254f" alt=""><figcaption><p>Contact us</p></figcaption></figure></div>

***

## Template details

“Agency” is a free no-code Landing page template for your Startup. It offers a responsive landing page with modern design. The page includes 5 sections and a contact form.

iGency landing sections:

1. About Us&#x20;
2. Services&#x20;
3. Portfolio&#x20;
4. Pricing&#x20;
5. Contact Us

iGency landing features the following:&#x20;

✅ Landing page&#x20;

✅ New Responsive design&#x20;

✅ Contact form

This template is sold "as is" but if there are any critical bugs, feel free to reach out. Our team will try to fix them ASAP.\
\
We tried to keep all the workflows and design architecture simple for beginner-intermediate users to use and adjust. However, we recommend having at least moderate experience with Bubble to be able to fully use and edit the app’s backend.\
\
If you need any assistance to customize this template for your personal or business project, feel free to reach out to our team via <dev@appassion.io>. We are always there to help build new products and mobile/web applications.\
\
We hope this template would become a great starting point for your project.

{% hint style="warning" %}
*<mark style="color:red;">**Removing the banner**</mark>*

*<mark style="color:red;">**1. Open the app in Bubble editor**</mark>*&#x20;

*<mark style="color:red;">**2. Go to settings -> SEO/Metatags**</mark>*&#x20;

*<mark style="color:red;">**3. Remove the content of "Script in the body"**</mark>*
{% endhint %}

***

## Key features

<table data-view="cards"><thead><tr><th></th><th align="center"></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-type="checkbox"></th></tr></thead><tbody><tr><td></td><td align="center"><mark style="color:orange;"><strong>SERVICE LISTINGS</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>EASY CHECKOUT PROCESS</strong></mark></td><td></td><td></td><td>false</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>CUSTOMIZATION OPTIONS</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>SERVICE PROVIDER PROFILES</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>REAL-TIME AVAILABILITY AND BOOKING</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>CUSTOMER SUPPORT AND FEEDBACK</strong></mark></td><td></td><td></td><td>false</td></tr></tbody></table>

## Workflows&#x20;

### Primary colors and their purposes

### **Green**

Emphasizes actions related to creating or modifying records in the database, indicating successful operation completion.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/Cg6aB4Ak3pXx2dey0GRd/exmp%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/XrEzhFVmpEILeFyelVxx/exmp%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Red**

Designated for actions involving deletion or resetting of values, aiding users in quickly identifying them.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/uWQigtKZmO56SO3QTwzv/exmp%203.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/ZwwXkMokxLDmEVAHQwjV/exmp%204.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Blue**

Reserved for actions that do not impact application resources, such as opening or closing pop-up windows.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/jUQMximeZrf87V27VlZE/exmp%205.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/JW7CX2HOuge93FO7m8ki/exmp%206.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Orange**

Used for actions related to app navigation, providing ease of orientation within the interface.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/9e8whejZ9FDJIzVW2s5g/exmp%207.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/JXSp1DW9PAxVgRP1EN5T/exmp%208.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Brown**

&#x20;Utilized for custom workflows and API work, highlighting these actions among others.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/JhLghDLB02Z2J9uQPXSt/exmp%209.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/6vI0AAU7NGlcDSloW7mm/exmp%2010.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Purple**

Left to the developer's discretion for assigning color to actions as they see fit.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/lpaTpZr364m4F7Jt4cgh/purple%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/sR191NEB66AkDEMmjsMD/purple%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Cyan**

&#x20;**I**ntended for actions involving the use of Custom Events, ensuring ease of perception for complex operations.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/rTW4aDQbNpDi9zvWEhGO/cyan%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/fmnDPn4VCAwZMVCQEisj/cyan%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Grey**

Employed for all other actions not covered by other colors, aiding in making the interface clear and balanced.

For example:

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/tQnBzHozRQcLU3XWrITH/grey%201.svg" alt="" width="352"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
These standards are purely recommendations. Possible discrepancies do not affect the functionality of the application.
{% endhint %}

***

## Page

\ <mark style="color:orange;">**Index:**</mark> Explore our landing page for insights on the template, featuring descriptions, work process, services, work portfolio, plans, frequently asked questions, reviews, and contacts.

***

## Data Types

### Portfolio

This data type is designed for storing all candidate related Portfolio.

| Field name    | Type     | Notes                        |
| ------------- | -------- | ---------------------------- |
| `Big Picture` | `Yes/No` | Portfolio picture big status |
| `Field`       | `Text`   | Portfolio field context      |
| `Image`       | `Image`  | Portfolio image              |
| `Text Mare`   | `Text`   | Portfolio text               |

***

<figure><img src="https://content.gitbook.com/content/q1qrylIQxip6ZWwcCIUn/blobs/iKY4oPH5X0yekWPQ62Sg/Logo-Appassion.png" alt=""><figcaption></figcaption></figure>

The template is available in its current form, however, further alterations can be negotiated.&#x20;

Don't hesitate to reach out to us with any questions, and we'll gladly explore options to accommodate your concepts – Visit us at [<mark style="color:orange;">https://appassion.io/</mark>](https://appassion.io/) or email us at <mark style="color:orange;"><dev@appassion.io></mark>

<mark style="color:orange;">**We are always at your service through:**</mark> [Upwork](https://www.upwork.com/agencies/1472948949083369472/), [Clutch](https://clutch.co/profile/appassion#highlights). \ <br>
