diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5c91b60 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +_site/ +.sass-cache/ +.jekyll-metadata diff --git a/404.html b/404.html new file mode 100644 index 0000000..1590ef2 --- /dev/null +++ b/404.html @@ -0,0 +1,6 @@ +--- +title: Not Found +description: This does not exist +permalink: /404.html +sitemap: false +--- diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..1e470e5 --- /dev/null +++ b/Gemfile @@ -0,0 +1,11 @@ +source 'https://rubygems.org' + +gem 'jekyll', '3.7.2' + +group :jekyll_plugins do + gem 'jekyll-archives', '2.1.1' + gem 'jekyll-feed', '0.9.3' + gem 'jekyll-paginate', '1.1.0' + gem 'jekyll-seo-tag', '2.4.0' + gem 'jekyll-sitemap', '1.2.0' +end diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..45e601d --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,77 @@ +GEM + remote: https://rubygems.org/ + specs: + addressable (2.5.2) + public_suffix (>= 2.0.2, < 4.0) + colorator (1.1.0) + concurrent-ruby (1.0.5) + em-websocket (0.5.1) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0.6.0) + eventmachine (1.2.5) + ffi (1.9.18) + forwardable-extended (2.6.0) + http_parser.rb (0.6.0) + i18n (0.9.3) + concurrent-ruby (~> 1.0) + jekyll (3.7.2) + addressable (~> 2.4) + colorator (~> 1.0) + em-websocket (~> 0.5) + i18n (~> 0.7) + jekyll-sass-converter (~> 1.0) + jekyll-watch (~> 2.0) + kramdown (~> 1.14) + liquid (~> 4.0) + mercenary (~> 0.3.3) + pathutil (~> 0.9) + rouge (>= 1.7, < 4) + safe_yaml (~> 1.0) + jekyll-archives (2.1.1) + jekyll (>= 2.4) + jekyll-feed (0.9.3) + jekyll (~> 3.3) + jekyll-paginate (1.1.0) + jekyll-sass-converter (1.5.2) + sass (~> 3.4) + jekyll-seo-tag (2.4.0) + jekyll (~> 3.3) + jekyll-sitemap (1.2.0) + jekyll (~> 3.3) + jekyll-watch (2.0.0) + listen (~> 3.0) + kramdown (1.16.2) + liquid (4.0.0) + listen (3.1.5) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + ruby_dep (~> 1.2) + mercenary (0.3.6) + pathutil (0.16.1) + forwardable-extended (~> 2.6) + public_suffix (3.0.1) + rb-fsevent (0.10.2) + rb-inotify (0.9.10) + ffi (>= 0.5.0, < 2) + rouge (3.1.1) + ruby_dep (1.5.0) + safe_yaml (1.0.4) + sass (3.5.5) + sass-listen (~> 4.0.0) + sass-listen (4.0.0) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + +PLATFORMS + ruby + +DEPENDENCIES + jekyll (= 3.7.2) + jekyll-archives (= 2.1.1) + jekyll-feed (= 0.9.3) + jekyll-paginate (= 1.1.0) + jekyll-seo-tag (= 2.4.0) + jekyll-sitemap (= 1.2.0) + +BUNDLED WITH + 1.16.0 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..452333a --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2016 CloudCannon + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..fc45b65 --- /dev/null +++ b/README.md @@ -0,0 +1,78 @@ +# Hydra + +Marketing site template for Jekyll. Browse through a [live demo](https://proud-alligator.cloudvent.net/). +Increase the web presence of your brand with this configurable theme. + +![Hydra template screenshot](images/_screenshot.png) + +Hydra was made by [CloudCannon](http://cloudcannon.com/), the Cloud CMS for Jekyll. + +Find more templates, themes and step-by-step Jekyll tutorials at [CloudCannon Academy](https://learn.cloudcannon.com/). + +## Features + +* Contact form +* Pre-built pages +* Pre-styled components +* Blog with pagination +* Post category pages +* Disqus comments for posts +* Staff and author system +* Configurable footer +* Optimised for editing in [CloudCannon](http://cloudcannon.com/) +* RSS/Atom feed +* SEO tags +* Google Analytics + +## Setup + +1. Add your site and author details in `_config.yml`. +2. Add your Google Analytics and Disqus keys to `_config.yml`. +3. Get a workflow going to see your site's output (with [CloudCannon](https://app.cloudcannon.com/) or Jekyll locally). + +## Develop + +Hydra was built with [Jekyll](http://jekyllrb.com/) version 3.3.1, but should support newer versions as well. + +Install the dependencies with [Bundler](http://bundler.io/): + +~~~bash +$ bundle install +~~~ + +Run `jekyll` commands through Bundler to ensure you're using the right versions: + +~~~bash +$ bundle exec jekyll serve +~~~ + +## Editing + +Hydra is already optimised for adding, updating and removing pages, staff, advice, company details and footer elements in CloudCannon. + +### Posts + +* Add, update or remove a post in the *Posts* collection. +* The **Staff Author** field links to members in the **Staff** collection. +* Documentation pages are organised in the navigation by category, with URLs based on the path inside the `_docs` folder. +* Change the defaults when new posts are created in `_posts/_defaults.md`. + +### Contact Form + +* Preconfigured to work with CloudCannon, but easily changed to another provider (e.g. [FormSpree](https://formspree.io/)). +* Sends email to the address listed in company details. + +### Staff + +* Reused around the site to save multiple editing locations. +* Add `excluded_in_search: true` to any documentation page's front matter to exclude that page in the search results. + +### Navigation + +* Exposed as a data file to give clients better access. +* Set in the *Data* / *Navigation* section. + +### Footer + +* Exposed as a data file to give clients better access. +* Set in the *Data* / *Footer* section. diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..d621f33 --- /dev/null +++ b/_config.yml @@ -0,0 +1,111 @@ +# ---- +# Site + +title: Hydra Template +url: "https://proud-alligator.cloudvent.net" +baseurl: +google_analytics_key: +google_maps_javascript_api_key: +disqus_shortname: + +# Values for the jekyll-seo-tag gem (https://github.com/jekyll/jekyll-seo-tag) +logo: /siteicon.png +description: Product marketing template for Jekyll. +author: + name: + email: + twitter: # twitter username without the @ symbol +social: + name: Hydra Template + links: + - https://github.com/CloudCannon/hydra-jekyll-template + +# ----- +# Build + +timezone: Etc/UTC + +collections: + staff_members: + _hide_content: true + +paginate: 10 +paginate_path: "/blog/:num/" +permalink: pretty + +defaults: + - + scope: + path: "" + type: "posts" + values: + layout: "post" + _options: + content: + width: 1500 + height: 2500 + - + scope: + path: "" + type: "staff_members" + values: + _options: + image_path: + width: 600 + height: 600 + - + scope: + path: "" + values: + layout: "page" + - + scope: + path: "index.html" + values: + layout: "default" + - + scope: + path: "contact.html" + values: + full_width: true + +jekyll-archives: + enabled: + - categories + +plugins: + - jekyll-archives + - jekyll-sitemap + - jekyll-seo-tag + - jekyll-feed + - jekyll-paginate + +exclude: + - Gemfile + - Gemfile.lock + - README.md + - LICENCE + +# ----------- +# CloudCannon + +social_icons: + - Facebook + - Google Plus + - Instagram + - LinkedIn + - Pinterest + - Tumblr + - Twitter + - YouTube + - RSS + +_comments: + map: Update the map location and display settings. + latitude: Coordinates for the center marker on the map. + longitude: Coordinates for the center marker on the map. + zoom: The zoom level for the map. + pricing_table: Update the information in the pricing tables. + highlight: Emphasis the text + color: The background colour used in the plan name and call to action. + new_window: Open link in new window diff --git a/_data/footer.yml b/_data/footer.yml new file mode 100644 index 0000000..3809242 --- /dev/null +++ b/_data/footer.yml @@ -0,0 +1,39 @@ +- links: + - name: Pricing + link: /pricing/ + - name: Blog + link: /blog/ + - name: About + link: /about/ + - name: Contact + link: /contact/ +- links: + - name: Login + link: / + new_window: true + - name: Sign Up + link: / + new_window: true + - name: Docs + link: / + new_window: true + - name: Status + link: / + new_window: true +- links: + - name: Facebook + link: https://facebook.com + new_window: true + social_icon: Facebook + - name: Twitter + link: https://twitter.com + social_icon: Twitter + new_window: true + - name: YouTube + link: https://youtube.com + social_icon: YouTube + new_window: true + - name: RSS + link: /feed.xml + social_icon: RSS + new_window: false diff --git a/_data/navigation.yml b/_data/navigation.yml new file mode 100644 index 0000000..5f05455 --- /dev/null +++ b/_data/navigation.yml @@ -0,0 +1,24 @@ +- name: Pricing + link: /pricing/ + new_window: false + highlight: false +- name: Blog + link: /blog/ + new_window: false + highlight: false +- name: About + link: /about/ + new_window: false + highlight: false +- name: Contact + link: /contact/ + new_window: false + highlight: false +- name: Login + link: / + new_window: true + highlight: false +- name: Sign Up + link: / + new_window: true + highlight: true diff --git a/_includes/list-posts.html b/_includes/list-posts.html new file mode 100644 index 0000000..0dd91fa --- /dev/null +++ b/_includes/list-posts.html @@ -0,0 +1,10 @@ +{% for post in include.posts %} +
  • +

    {{ post.title }}

    + {% include post-title.html post=post %} +
    + {{ post.excerpt }} +
    Read More
    +
    +
    • +{% endfor %} diff --git a/_includes/navigation.html b/_includes/navigation.html new file mode 100644 index 0000000..19153d8 --- /dev/null +++ b/_includes/navigation.html @@ -0,0 +1,15 @@ + diff --git a/_includes/post-title.html b/_includes/post-title.html new file mode 100644 index 0000000..e1129f4 --- /dev/null +++ b/_includes/post-title.html @@ -0,0 +1,8 @@ +

    + {% for category in include.post.categories %} + + {{ category | capitalize }} + + {% endfor %} + {{ include.post.date | date: "%B %d, %Y" }} +

    diff --git a/_includes/relative-src.html b/_includes/relative-src.html new file mode 100644 index 0000000..fb32308 --- /dev/null +++ b/_includes/relative-src.html @@ -0,0 +1 @@ +{% assign prefix = include.src | slice: 0, 2 %}{% assign protocol = include.src | slice: 0, 4 %}{% unless protocol == 'http' or prefix == "//" %}{{ site.baseurl }}{% endunless %}{{ include.src }} diff --git a/_includes/social-icon.html b/_includes/social-icon.html new file mode 100644 index 0000000..8cafd86 --- /dev/null +++ b/_includes/social-icon.html @@ -0,0 +1,20 @@ +{% case include.icon %} + {% when "Facebook" %} + + {% when "Google Plus" %} + + {% when "Instagram" %} + + {% when "LinkedIn" %} + + {% when "Pinterest" %} + + {% when "Tumblr" %} + + {% when "Twitter" %} + + {% when "YouTube" %} + + {% when "RSS" %} + +{% endcase %} diff --git a/_layouts/archive.html b/_layouts/archive.html new file mode 100644 index 0000000..4e8073c --- /dev/null +++ b/_layouts/archive.html @@ -0,0 +1,23 @@ +--- +layout: page +--- + +
    + {% assign blog = site.pages | where: "path", "blog/index.html" | first %} + + {% if blog.title %} +

    {{ blog.title }}

    + {% endif %} + + {% if blog.description %} +

    {{ blog.description }}

    + {% endif %} + +
    + {{ page.title | capitalize }} +
    + + +
    diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..fff86da --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,57 @@ + + + + + + + + {% seo %} + {% feed_meta %} + + + + + {% if jekyll.environment == 'production' and site.google_analytics_key != '' %} + + + {% endif %} + + +
    +
    +
    Hydra Logo
    + {% include navigation.html %} +
    +
    + {{ content }} + + + + diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 0000000..1a1c737 --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,18 @@ +--- +layout: default +--- +
    +
    +
    + {% if page.heading %} +

    {{ page.heading }}

    + {% elsif page.title and page.layout != 'archive' %} +

    {{ page.title }}

    + {% endif %} + {% if page.description %} +

    {{ page.description }}

    + {% endif %} + {{ content }} +
    +
    +
    diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..6b35c40 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,46 @@ +--- +layout: page +--- +
    + {% include post-title.html post=page %} + +

    ✎ Edit Post

    +
    + {{ content }} + +
    + {% assign author_id = page.author_staff_member | prepend: "/staff_members/" | append: "/" %} + {% assign author = site.staff_members | where: "url", author_id | first %} +
    {{ author.name }}
    +

    {{ author.blurb }}

    +
    + +
    + {% if page.previous.url %} + + {% endif %} + {% if page.next.url %} + + {% endif %} +
    + + {% if site.disqus_shortname and page.comments %} +
    + + + {% endif %} +
    +
    diff --git a/_posts/2016-07-20-the-process-for-direct-sales.md b/_posts/2016-07-20-the-process-for-direct-sales.md new file mode 100644 index 0000000..be521d8 --- /dev/null +++ b/_posts/2016-07-20-the-process-for-direct-sales.md @@ -0,0 +1,35 @@ +--- +date: 2016-07-20 +title: The process for direct sales +categories: + - sales +author_staff_member: anna +--- + +Direct selling is the marketing and selling of products directly to consumers away from a fixed retail location. Peddling is the oldest form of direct selling. Modern direct selling includes sales made through the party plan, one-on-one demonstrations, and other personal contact arrangements as well as internet sales. + +![Checkmate](https://source.unsplash.com/random/1500x1145) + +## Textbook definition + +A textbook definition is: "The direct personal presentation, demonstration, and sale of products and services to consumers, usually in their homes or at their jobs." + +## How effective is direct selling? + +Industry representative, the World Federation of Direct Selling Associations (WFDSA), reports that its 59 regional member associations accounted for more than US$183 billion in retail sales in 2014, through the activities of more than 62 million independent sales representatives. The United States Direct Selling Association (DSA) reported that in 2000, 55% of adult Americans had at some time purchased goods or services from a direct selling representative and 20% reported that they were currently(6%) or had been in the past(14%) a direct selling representative. + +![Office](https://source.unsplash.com/random/1500x1146) + +According to the WFDSA, consumers benefit from direct selling because of the convenience and service it provides, including personal demonstration and explanation of products, home delivery, and generous satisfaction guarantees. In contrast to franchising, the cost for an individual to start an independent direct selling business is typically very low with little or no required inventory or other cash commitments to begin. + +Most direct selling associations around the world require their members to abide by a code of conduct towards a fair partnership both with customers and salesmen... + +Most national direct selling associations are represented in the World Federation of Direct Selling Associations (WFDSA). + +## How's it different to marketing? + +Direct selling is distinct from direct marketing because it is about individual sales agents reaching and dealing directly with clients. Direct marketing is about business organizations seeking a relationship with their customers without going through an agent/consultant or retail outlet. + +Direct selling consists of two main business models: single-level marketing, in which a direct seller makes money by buying products from a parent organization and selling them directly to customers, and multi-level marketing (also known as network marketing or person-to-person marketing), in which the direct seller makes money from both direct sales to customers and by sponsoring new direct sellers and earning a commission from their efforts. + +![Raspberries](https://source.unsplash.com/random/1500x1147) diff --git a/_posts/2016-07-28-effective-upselling-techniques.md b/_posts/2016-07-28-effective-upselling-techniques.md new file mode 100644 index 0000000..f6fdc46 --- /dev/null +++ b/_posts/2016-07-28-effective-upselling-techniques.md @@ -0,0 +1,28 @@ +--- +date: 2016-07-28 +title: Effective upselling techniques +categories: + - sales + - tips +author_staff_member: betty +--- + +Upselling is a sales technique whereby a seller induces the customer to purchase more expensive items, upgrades or other add-ons in an attempt to make a more profitable sale. While it usually involves marketing more profitable services or products, it can be simply exposing the customer to other options that were perhaps not considered. + +In practice, large businesses usually combine upselling and cross-selling to maximize profit. In doing so, an organization must ensure that its relationship with the client is not disrupted. + +![Fair](https://source.unsplash.com/random/1500x1146) + +In restaurants and other similar settings, upselling is commonplace and an accepted form of business. In other businesses (e.g. car sales), the customer’s perception of the attempted upsell can be viewed negatively and impact the desired result. + +## Why should you upsell? + +Upselling is a common practice for service providers that offer different service classes such as airlines (cf. Bohutinsky, 1990). According to “the journal of business and industrial marketing; written collaboratively by Michael J, Sheehan and Paul R, Prabhaker “It is five times more expensive to get a new customer as it is to hold onto a current one.” Selling to a new customer would mean having to start the sales process from the very beginning thus having to establish a new relationship with a different customer. This can be time consuming and often not very effective. + +![Gleise](https://source.unsplash.com/random/1500x1147) + +## The benefits + +Upselling to a customer that you have already built a rapport with, means that they are more likely to buy from you, listen to your suggestions and opinions and trust you. Selling to the same customer can lead to loyal customers and repeat sales. Upselling brings up the profit that the business makes and the value of the sale. However it is important to understand that although your main objective is to bring up revenue and increase the amount of the sale, a customers experience and their time with you influences future decisions that they make. An upsell can be beneficial to both the seller and the consumer if relevant products are being shown to the customer. For instance, if you had a strict budget of $20,000 for a car, you would not want to be sold a car for twice the amount. + +[source](https://en.wikipedia.org/wiki/Upselling): Wikipedia diff --git a/_posts/2016-08-02-sales-effectiveness.md b/_posts/2016-08-02-sales-effectiveness.md new file mode 100644 index 0000000..4c6d4f2 --- /dev/null +++ b/_posts/2016-08-02-sales-effectiveness.md @@ -0,0 +1,25 @@ +--- +date: 2016-08-02 +title: Sales effectiveness +categories: + - sales + - tips +author_staff_member: gerald +--- +Sales effectiveness refers to the ability of a company’s sales professionals to “win” at each stage of the customer’s buying process, and ultimately earn the business on the right terms and in the right timeframe. + +![American River](https://source.unsplash.com/random/1500x1146) + +## How do you improve sales effectiveness? + +Improving sales effectiveness is not just a sales function issue; it’s a company issue, as it requires deep collaboration between sales and marketing to understand what's working and not working, and continuous improvement of the knowledge, messages, skills, and strategies that sales people apply as they work sales opportunities. + +Sales effectiveness has historically been used to describe a category of technologies and consulting services aimed at helping companies improve their sales results. + +Many companies are creating sales effectiveness functions and have even given people titles such as VP of Sales Effectiveness. + +![Coins](https://source.unsplash.com/random/1500x1147) + +"By analyzing sales force performance, managers can make changes to optimize sales going forward. Toward that end, there are many ways to gauge the performance of individual salespeople and of the sales force as a whole, in addition to total annual sales." In a survey of nearly 200 senior marketing managers, 54 percent responded that they found the "sales force effectiveness" metric very useful. + +[source](https://en.wikipedia.org/wiki/Sales_effectiveness): Wikipedia diff --git a/_posts/2016-08-06-definition-of-sales.md b/_posts/2016-08-06-definition-of-sales.md new file mode 100644 index 0000000..0103143 --- /dev/null +++ b/_posts/2016-08-06-definition-of-sales.md @@ -0,0 +1,39 @@ +--- +date: 2016-08-06 +title: Definition of sales +categories: + - sales +author_staff_member: james +--- +A person or organization expressing an interest in acquiring the offered item of value is referred to as a potential buyer, prospective customer or prospect. Buying and selling are understood to be two sides of the same "coin" or transaction. Both seller and buyer engage in a process of negotiation to consummate the exchange of values. The exchange, or selling, process has implied rules and identifiable stages. + +![Cat](https://source.unsplash.com/random/1500x1146) + +It is implied that the selling process will proceed fairly and ethically so that the parties end up nearly equally rewarded. The stages of selling, and buying, involve getting acquainted, assessing each party’s need for the other’s item of value, and determining if the values to be exchanged are equivalent or nearly so, or, in buyer's terms, "worth the price.” Sometimes, sellers have to use their own experiences when selling products with appropriate discounts. + +## Management point of view + +From a management viewpoint it is thought of as a part of marketing, although the skills required are different. Sales often forms a separate grouping in a corporate structure, employing separate specialist operatives known as salespersons (singular: salesperson). Selling is considered by many to be a sort of persuading "art". Contrary to popular belief, the methodological approach of selling refers to a systematic process of repetitive and measurable milestones, by which a salesman relates his or her offering of a product or service in return enabling the buyer to achieve their goal in an economic way. While the sales process refers to a systematic process of repetitive and measurable milestones, the definition of the selling is somewhat ambiguous due to the close nature of advertising, promotion, public relations, and direct marketing. + +![apricot](https://source.unsplash.com/random/1500x1147) + +Selling is the profession-wide term, much like marketing defines a profession. Recently, attempts have been made to clearly understand who is in the sales profession, and who is not. There are many articles looking at marketing, advertising, promotions, and even public relations as ways to create a unique transaction. + +## Common terms + +Two common terms used to describe a salesperson are "Farmer" and "Hunter". The reality is that most professional sales people have a little of both. A hunter is often associated with aggressive personalities who use aggressive sales technique. In terms of sales methodology a hunter refers to a person whose focus is on bringing in and closing deals. This process is called “sales capturing”. An example is a commodity sale such as a long distance sales person, shoe sales person and to a degree a car sales person. Their job is to find and convert buyers. A sales farmer is someone who creates sales demand by activities that directly influence and alter the buying process. + +![Marketing](https://source.unsplash.com/random/1500x1148) + +## Systems approach + +Many believe that the focus of selling is on the human agents involved in the exchange between buyer and seller. Effective selling also requires a systems approach, at minimum involving roles that sell, enable selling, and develop sales capabilities. Selling also involves salespeople who possess a specific set of sales skills and the knowledge required to facilitate the exchange of value between buyers and sellers that is unique from marketing, advertising, etc. + +![Lady bugs](https://source.unsplash.com/random/1500x1149) + +Within these three tenets, the following definition of professional selling is offered by the American Society for Training and Development (ASTD): + +“The holistic business system required to effectively develop, manage, enable, and execute a mutually beneficial, interpersonal exchange of goods and/or services for equitable value.” +Team selling is one way to influence sales. Team selling is “a group of people representing the sales department and other functional areas in the firm, such as finance, production, and research and development”. (Spiro) Team selling came about in the 1990s through total quality management (TQM). TQM occurs when companies work to improve their customer satisfaction by constantly improving all of their operations. + +[source](https://en.wikipedia.org/wiki/Sales): Wikipedia diff --git a/_posts/2016-08-12-the-history-of-marketing.md b/_posts/2016-08-12-the-history-of-marketing.md new file mode 100644 index 0000000..3d44615 --- /dev/null +++ b/_posts/2016-08-12-the-history-of-marketing.md @@ -0,0 +1,32 @@ +--- +date: 2016-08-12 +title: The history of marketing +categories: + - marketing +author_staff_member: robin +--- +The beginnings of digital marketing technology can be traced back to the 1980's, when computers became sophisticated enough to store huge volumes of customer information. For a brief moment, no one knew what would happen in digital marketing, but by the 90's it all became clear. + +![Man](https://source.unsplash.com/random/1500x1146) + +The history of marketing is to a large extent a product of Internet's history as markets have adapted to keep abreast of changes and keep up with the way the major Search Engines rank web pages. Major changes include, in chronological order: + +1991- Gopher: A network protocol, one of the very first query and search tools. Gopher was widely used for a couple of years, but usage has now fallen off, with barely 100 Gopher servers now indexed. 2. 1994- Launch of Yahoo, which was formerly known as "Jerry´s Guide to the World Wide Web" after one of its founders, Jerry Yang. Yahoo received in its first year over 1 million hits. + +## Academic studies + +The study of the history of marketing as an academic field emerged only recently. Controversies and disputes abound in the field. The publication in 1976 of the book The History of Marketing Thought, by Robert Bartels marks a turning-point in marketing thought. Since then, academics specializing in marketing decided to imitate economics, distinguishing theory and practice. Two different fields of study emerged: + +the history of marketing thought, giving theoretical accounts +marketing history, focusing on the history of marketing practice +This division parallels the distinction between the history of economic thought and economic history. + +![Thai](https://source.unsplash.com/random/1500x1147) + +Practitioners of the history of marketing thought note that both practitioners and academics know relatively little about the field.[citation needed] But history has significance for academics because it helps to define the baselines upon which they can recognize change and evolve marketing theory.On the other hand, proponents of marketing history argue that one cannot fully compare the marketing field with economics and hence suggest the impracticality of divorcing theory and practice. First, marketing scholars seldom engage in the practice of marketing as much as economists engage in the development and execution of public policies. Second, business people innovate in the marketing field, and the history of marketing will remain incomplete if one dissociates academia from practitioners. + +![lavender flowers](https://source.unsplash.com/random/1500x1148) + +The following sections discuss both approaches to the history of marketing, closing with a debate about the standard chronology of marketing, a widely known hypothesis about the history of marketing, but one that historians in the marketing field have challenged. + +[source](https://en.wikipedia.org/wiki/History_of_marketing): Wikipedia diff --git a/_posts/_defaults.md b/_posts/_defaults.md new file mode 100644 index 0000000..2da5b82 --- /dev/null +++ b/_posts/_defaults.md @@ -0,0 +1,6 @@ +--- +title: +categories: +author_staff_member: +date: +--- diff --git a/_sass/blog.scss b/_sass/blog.scss new file mode 100644 index 0000000..cbae2ba --- /dev/null +++ b/_sass/blog.scss @@ -0,0 +1,125 @@ +.blog-posts { + list-style: none; + padding: 0; + + li { + margin: 100px 0; + } +} + +.blog-post { + .author { + padding: 30px 0 0 0; + border: 1px solid #eee; + margin: 30px 0; + font-size: .8em; + + .square-image { + width: 125px; + height: 125px; + margin-top: 0; + } + .blurb { + text-align: center; + } + } + + h3 { + margin: 0; + a { + color: #000; + text-decoration: none; + font-weight: normal; + font-size: 1.3em; + } + } + + h2 { + text-align: left; + } + + .blog-navigation { + font-size: 14px; + display: block; + width: auto; + overflow: hidden; + a { + display: block; + width: 50%; + float: left; + margin: 1em 0; + } + + .next { + text-align: right; + } + } + + .post-details { + border-bottom: 1px solid #eee; + font-size: .9em; + + .blog-filter { + display: inline-block; + text-align: left; + + a { + position: relative; + top: -5px; + } + } + + a { + text-decoration: none; + } + + .post-date { + float: right; + } + + &:after { + content: ""; + display: table; + clear: both; + } + } + + .post-content { + .button { + margin: 30px 0 0 0; + } + } +} + +.pagination { + text-align: center; +} + +.blog-filter { + text-align: center; + a { + background: #eee; + padding: 3px 5px; + font-size: .8em; + border-radius: 5px; + color: #888; + transition: .2s ease-in-out; + + &:hover { + color: #555; + text-decoration: none; + } + } +} + +.blog-filter.cross a { + padding-right: 8px; + + &:after { + content: "x"; + font-size: .5em; + position: relative; + bottom: 4px; + right: -3px; + } +} diff --git a/_sass/cloudcannon.scss b/_sass/cloudcannon.scss new file mode 100644 index 0000000..0c27b69 --- /dev/null +++ b/_sass/cloudcannon.scss @@ -0,0 +1,37 @@ +.editor-link, .nav-open nav .editor-link { + display: none; + margin-top: 0; + + .btn { + border: 0; + border-radius: 2px; + width: 100%; + max-width: 500px; + box-sizing: border-box; + font-size: 2rem; + text-decoration: none; + padding: 10px 15px; + margin: 0; + font-size: 18px; + } + + nav &, .btn { + cursor: pointer; + background-color: #f7e064; + color: #333; + box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2); + + &:hover { + background-color: #f4d525; + color: #333; + } + } +} + +.cms-editor-active .editor-link { + display: block; +} + +.cms-editor-active nav .editor-link { + display: inline; +} diff --git a/_sass/contact.scss b/_sass/contact.scss new file mode 100644 index 0000000..c380079 --- /dev/null +++ b/_sass/contact.scss @@ -0,0 +1,32 @@ +.map { + width: 100%; + margin: 100px 0; + height: 400px; +} + +.contact-box { + @extend %flexbox; + @include flex-flow(wrap); + max-width: 750px; + margin: 0 auto; + + form { + width: 100% + } + + p { + margin: 0; + } + + .contact-form, .contact-details { + @media #{$desktop} { + -webkit-flex: 1; + flex: 1; + } + margin: 0 30px; + } + + .contact-details { + font-size: .9em; + } +} diff --git a/_sass/elements.scss b/_sass/elements.scss new file mode 100644 index 0000000..7432e6b --- /dev/null +++ b/_sass/elements.scss @@ -0,0 +1,54 @@ +html { + background: #2b2b40; +} + +html, body { + margin: 0; + padding: 0; +} + +body { + font-family: "San Francisco", "Helvetica Neue", "Helvetica", "Arial"; +} + +a { + color: #00a4ca; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +img { + width: 100%; +} + +h1 strong, h2 strong { + font-weight: 700; +} + +h1 { + font-weight: 300; + font-size: 2.3em; + margin: 0; +} + +h2 { + font-weight: 300; + font-size: 2.2em; + margin: 0 0 30px 0; +} + +h3 { + margin: 20px 0 10px 0; +} + + +p, address { + font-size: 1.38em; + color: #666; + margin-bottom: 20px; + font-weight: 300; + line-height: 1.4em; +} diff --git a/_sass/footer.scss b/_sass/footer.scss new file mode 100644 index 0000000..44fa4fb --- /dev/null +++ b/_sass/footer.scss @@ -0,0 +1,121 @@ +.footer-links { + width: 100%; + margin: 10px; + padding: 0; + + @media #{$tablet} { + -webkit-flex: 1 0 180px; + flex: 1 0 180px; + } + + li { + list-style: none; + margin: 15px auto; + + @media #{$tablet} { + max-width: 150px; + } + a { + + &:hover { + text-decoration: none; + } + svg { + fill: #999; + margin-right: 10px; + transition: fill 0.2s ease; + vertical-align: middle; + position: relative; + top: -2px; + width: 22px; + height: 22px; + } + + &:hover svg { + fill: #fff; + } + + &.twitter-icon:hover svg { + fill: #55acee; + } + + &.google-plus-icon:hover svg { + fill: #db4437; + } + + &.youtube-icon:hover svg { + fill: #cd201f; + } + + &.instagram-icon:hover svg { + fill: #f167f5; + } + + &.linkedin-icon:hover svg { + fill: #0077b5; + } + + &.pinterest-icon:hover svg { + fill: #bd081c; + } + + &.rss-icon:hover svg { + fill: #f26522; + } + } + } +} + +footer { + padding: 50px 0 50px 0; + font-size: 1.1em; + position: relative; + background: #2b2b40; + color: #fff; + + .copyright { + font-size: .8em; + margin: 0 auto; + + @media #{$tablet} { + text-align: center; + } + + } + + &, + a { + color: #999; + } + + h2 { + font-size: 1.4em; + margin: 30px 0; + color: #ccc; + } + + .footer-columns { + @extend %flexbox; + @include flex-flow(wrap); + margin: -10px -10px 10px -10px; + } + + a { + text-decoration: none; + + &:hover { + color: #fff; + } + } + + .legal-line { + width: 100%; + padding: 30px 0; + margin: 0; + background-color: #222527; + + a { + font-weight: 600; + } + } +} diff --git a/_sass/forms.scss b/_sass/forms.scss new file mode 100644 index 0000000..0011e06 --- /dev/null +++ b/_sass/forms.scss @@ -0,0 +1,67 @@ +.button a, input[type=submit] { + color: #fff; + text-decoration: none; + padding: 10px 30px; + background: $brand-color; + border-radius: 3px; + border: 1px solid rgba(255,255,255,.5); + transition: .2s ease-in-out; +} + +.button a:hover, input[type=submit]:hover { + border: 1px solid #fff; + background: $secondary-brand-color; + cursor: pointer; +} + +.button.alt a { + background: rgba(255,255,255,0.15); + border-radius: 3px; + border: 1px solid rgba(255, 255, 255, 0.3); + padding: 16px 50px; +} + +.button.alt a:hover { + background: #fff; + color: $brand-color; +} + +textarea, input, button, select { font-family: inherit; font-size: inherit; } + +input[type=submit] { + margin: 20px 0 0 0; +} + +label, input, textarea { + display: block; + width: 100%; + box-sizing: border-box; +} + +textarea { + resize: vertical; + height: 150px; +} + +label { + margin: 20px 0 5px 0; +} + +input, textarea { + padding: 10px; + font-size: 1em; +} + +input, textarea { + -webkit-transition: all 0.30s ease-in-out; + -moz-transition: all 0.30s ease-in-out; + -ms-transition: all 0.30s ease-in-out; + -o-transition: all 0.30s ease-in-out; + outline: none; + border: 1px solid #DDDDDD; +} + +input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus { + box-shadow: 0 0 5px rgba(81, 203, 238, 1); + border: 1px solid rgba(81, 203, 238, 1); +} diff --git a/_sass/landing-page.scss b/_sass/landing-page.scss new file mode 100644 index 0000000..4223f4e --- /dev/null +++ b/_sass/landing-page.scss @@ -0,0 +1,62 @@ +.bottom-cta { + background: linear-gradient(to bottom, $brand-color 0%, $middle-gradient-color 100%); + color: #fff; + text-align: center; + margin: 0; + padding: 100px 0; + + h2 { + margin-bottom: 50px; + } +} + +.testimonial { + background: #f5f5f5; + margin: 0; + padding: 100px 0; + + .testimonial-block { + max-width: 750px; + width: 98%; + margin: 0 auto; + + @media #{$tablet} { + @include flexbox; + + blockquote { + -webkit-flex: 1; + flex: 1; + } + } + } +} + +.hero { + color: #ffffff; + text-align: center; + background: linear-gradient(to bottom, $middle-gradient-color 0%, $secondary-brand-color 100%) no-repeat #a05fb7; + padding-top: 50px; + + p { + color: #fff; + } +} + + +@media #{$desktop} { + .flex { + @include flexbox; + align-items: center; + flex-direction: row; + + .text, .image { + -webkit-flex: 1; + flex: 1; + padding: 0 20px; + } + } + + .content section:nth-child(even) .flex { + flex-direction: row-reverse; + } +} diff --git a/_sass/layout.scss b/_sass/layout.scss new file mode 100644 index 0000000..8467ba8 --- /dev/null +++ b/_sass/layout.scss @@ -0,0 +1,174 @@ +.container, .text-container { + margin: 0 auto; + position: relative; + padding: 0 20px; +} + +.text-container { + max-width: 750px; +} + +.container { + max-width: 1140px; + + &.max-container { + max-width: 100%; + padding: 0; + } +} + +header { + color: #fff; + padding: 20px 0; + background: $brand-color; /* Old browsers */ + background: linear-gradient(to bottom, $brand-color 0%, $middle-gradient-color 100%) no-repeat $brand-color; + + a { + color: #fff; + text-decoration: none; + z-index: 1; + position: relative; + + &:hover { + text-decoration: none; + } + } + + .company-name { + font-size: 1.7em; + line-height: 0; + + a { + display: inline-block; + } + + img { + display: block; + width: auto; + } + } +} + +.content { + background: #fff; + padding: 1px 0 0 0; + position: relative; +} + +.screenshot{ + max-width: 100%; + height: auto; + display: block; + box-shadow: 0 1px 0 #ccc, 0 1px 0 1px #eee; + border-radius: 2px; + margin-left: auto; + margin-right: auto; + background: #DDD url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2212%22%20viewBox%3D%220%200%2044%2012%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%224%22%20fill%3D%22%23eee%22%20%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%226%22%20r%3D%224%22%20fill%3D%22%23eee%22%20%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%226%22%20r%3D%224%22%20fill%3D%22%23eee%22%20%2F%3E%3C%2Fsvg%3E') 4px 4px no-repeat; + padding: 20px 0 0 0; + position: relative; +} + +section { + padding: 100px 0; +} + +section + section { + padding-top: 0; +} + +.subtext { + margin-top: 10px; + text-align: center; +} + + +.cta { + margin: 60px 0; +} + +.page h2 { + text-align: center; +} + +blockquote { + padding: 18px 25px; + margin: 0; + quotes: "\201C""\201D""\2018""\2019"; + font-style: italic; + + .author { + display: block; + font-weight: bold; + margin: 10px 0 0 0; + font-size: .85em; + font-style: normal; + } + + p { + display: inline; + } +} + +blockquote:before { + color: #ccc; + content: open-quote; + font-size: 4em; + line-height: 0.1em; + margin-right: 0.25em; + vertical-align: -0.4em; +} + +.square-image { + width: 150px; + height: 150px; + overflow: hidden; + margin: 25px auto 0 auto; + position: relative; + border-radius: 200px; + + img { + position: absolute; + left: -1000%; + right: -1000%; + top: -1000%; + bottom: -1000%; + margin: auto; + width: 300px; + } +} + +.page { + margin-bottom: 0; + padding-bottom: 80px; +} + +.center-text { + text-align: center; +} + +.editor-link { + display: none; + margin-top: 0; + .btn { + border: 0; + border-radius: 2px; + width: 100%; + max-width: 500px; + box-sizing: border-box; + font-size: 2rem; + text-decoration: none; + padding: 10px 15px; + margin: 0; + font-size: 18px; + cursor: pointer; + background-color: #f7e064; + color: #333; + box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2); + + &:hover { + background-color: #f4d525; + color: #333; + } + } + +} diff --git a/_sass/mixins/columns.scss b/_sass/mixins/columns.scss new file mode 100644 index 0000000..010eae9 --- /dev/null +++ b/_sass/mixins/columns.scss @@ -0,0 +1,5 @@ +@mixin columns($value) { + columns: $value; + -webkit-columns: $value; + -moz-columns: $value; +} diff --git a/_sass/mixins/flexbox.scss b/_sass/mixins/flexbox.scss new file mode 100644 index 0000000..92a03fd --- /dev/null +++ b/_sass/mixins/flexbox.scss @@ -0,0 +1,394 @@ +// Flexbox Mixins +// http://philipwalton.github.io/solved-by-flexbox/ +// https://github.com/philipwalton/solved-by-flexbox +// +// Copyright (c) 2013 Brian Franco +// +// Permission is hereby granted, free of charge, to any person obtaining a +// copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// The above copyright notice and this permission notice shall be included +// in all copies or substantial portions of the Software. +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS +// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY +// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, +// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE +// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +// +// This is a set of mixins for those who want to mess around with flexbox +// using the native support of current browsers. For full support table +// check: http://caniuse.com/flexbox +// +// Basically this will use: +// +// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping) +// * Final standards syntax (FF, Safari, Chrome, IE11, Opera) +// +// This was inspired by: +// +// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ +// +// With help from: +// +// * http://w3.org/tr/css3-flexbox/ +// * http://the-echoplex.net/flexyboxes/ +// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx +// * http://css-tricks.com/using-flexbox/ +// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ +// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes + +//---------------------------------------------------------------------- + +// Flexbox Containers +// +// The 'flex' value causes an element to generate a block-level flex +// container box. +// +// The 'inline-flex' value causes an element to generate a inline-level +// flex container box. +// +// display: flex | inline-flex +// +// http://w3.org/tr/css3-flexbox/#flex-containers +// +// (Placeholder selectors for each type, for those who rather @extend) + +@mixin flexbox { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; +} + +%flexbox { @include flexbox; } + +//---------------------------------- + +@mixin inline-flex { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +%inline-flex { @include inline-flex; } + +//---------------------------------------------------------------------- + +// Flexbox Direction +// +// The 'flex-direction' property specifies how flex items are placed in +// the flex container, by setting the direction of the flex container's +// main axis. This determines the direction that flex items are laid out in. +// +// Values: row | row-reverse | column | column-reverse +// Default: row +// +// http://w3.org/tr/css3-flexbox/#flex-direction-property + +@mixin flex-direction($value: row) { + @if $value == row-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + } @else if $value == column { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + } @else if $value == column-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + } @else { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + } + -webkit-flex-direction: $value; + -moz-flex-direction: $value; + -ms-flex-direction: $value; + flex-direction: $value; +} + // Shorter version: + @mixin flex-dir($args...) { @include flex-direction($args...); } + +//---------------------------------------------------------------------- + +// Flexbox Wrap +// +// The 'flex-wrap' property controls whether the flex container is single-line +// or multi-line, and the direction of the cross-axis, which determines +// the direction new lines are stacked in. +// +// Values: nowrap | wrap | wrap-reverse +// Default: nowrap +// +// http://w3.org/tr/css3-flexbox/#flex-wrap-property + +@mixin flex-wrap($value: nowrap) { + // No Webkit Box fallback. + -webkit-flex-wrap: $value; + -moz-flex-wrap: $value; + @if $value == nowrap { + -ms-flex-wrap: none; + } @else { + -ms-flex-wrap: $value; + } + flex-wrap: $value; +} + +//---------------------------------------------------------------------- + +// Flexbox Flow (shorthand) +// +// The 'flex-flow' property is a shorthand for setting the 'flex-direction' +// and 'flex-wrap' properties, which together define the flex container's +// main and cross axes. +// +// Values: | +// Default: row nowrap +// +// http://w3.org/tr/css3-flexbox/#flex-flow-property + +@mixin flex-flow($values: (row nowrap)) { + // No Webkit Box fallback. + -webkit-flex-flow: $values; + -moz-flex-flow: $values; + -ms-flex-flow: $values; + flex-flow: $values; +} + +//---------------------------------------------------------------------- + +// Flexbox Order +// +// The 'order' property controls the order in which flex items appear within +// their flex container, by assigning them to ordinal groups. +// +// Default: 0 +// +// http://w3.org/tr/css3-flexbox/#order-property + +@mixin order($int: 0) { + -webkit-box-ordinal-group: $int + 1; + -webkit-order: $int; + -moz-order: $int; + -ms-flex-order: $int; + order: $int; +} + +//---------------------------------------------------------------------- + +// Flexbox Grow +// +// The 'flex-grow' property sets the flex grow factor. Negative numbers +// are invalid. +// +// Default: 0 +// +// http://w3.org/tr/css3-flexbox/#flex-grow-property + +@mixin flex-grow($int: 0) { + -webkit-box-flex: $int; + -webkit-flex-grow: $int; + -moz-flex-grow: $int; + -ms-flex-positive: $int; + flex-grow: $int; +} + +//---------------------------------------------------------------------- + +// Flexbox Shrink +// +// The 'flex-shrink' property sets the flex shrink factor. Negative numbers +// are invalid. +// +// Default: 1 +// +// http://w3.org/tr/css3-flexbox/#flex-shrink-property + +@mixin flex-shrink($int: 1) { + -webkit-flex-shrink: $int; + -moz-flex-shrink: $int; + -ms-flex-negative: $int; + flex-shrink: $int; +} + +//---------------------------------------------------------------------- + +// Flexbox Basis +// +// The 'flex-basis' property sets the flex basis. Negative lengths are invalid. +// +// Values: Like "width" +// Default: auto +// +// http://www.w3.org/TR/css3-flexbox/#flex-basis-property + +@mixin flex-basis($value: auto) { + -webkit-flex-basis: $value; + -moz-flex-basis: $value; + -ms-flex-preferred-size: $value; + flex-basis: $value; +} + +//---------------------------------------------------------------------- + +// Flexbox "Flex" (shorthand) +// +// The 'flex' property specifies the components of a flexible length: the +// flex grow factor and flex shrink factor, and the flex basis. When an +// element is a flex item, 'flex' is consulted instead of the main size +// property to determine the main size of the element. If an element is +// not a flex item, 'flex' has no effect. +// +// Values: none | || +// Default: See individual properties (1 1 0). +// +// http://w3.org/tr/css3-flexbox/#flex-property + +@mixin flex($fg: 1, $fs: null, $fb: null) { + + // Set a variable to be used by box-flex properties + $fg-boxflex: $fg; + + // Box-Flex only supports a flex-grow value so let's grab the + // first item in the list and just return that. + @if type-of($fg) == 'list' { + $fg-boxflex: nth($fg, 1); + } + + -webkit-box-flex: $fg-boxflex; + -webkit-flex: $fg $fs $fb; + -moz-box-flex: $fg-boxflex; + -moz-flex: $fg $fs $fb; + -ms-flex: $fg $fs $fb; + flex: $fg $fs $fb; +} + +//---------------------------------------------------------------------- + +// Flexbox Justify Content +// +// The 'justify-content' property aligns flex items along the main axis +// of the current line of the flex container. This is done after any flexible +// lengths and any auto margins have been resolved. Typically it helps distribute +// extra free space leftover when either all the flex items on a line are +// inflexible, or are flexible but have reached their maximum size. It also +// exerts some control over the alignment of items when they overflow the line. +// +// Note: 'space-*' values not supported in older syntaxes. +// +// Values: flex-start | flex-end | center | space-between | space-around +// Default: flex-start +// +// http://w3.org/tr/css3-flexbox/#justify-content-property + +@mixin justify-content($value: flex-start) { + @if $value == flex-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + } @else if $value == flex-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + } @else if $value == space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + } @else if $value == space-around { + -ms-flex-pack: distribute; + } @else { + -webkit-box-pack: $value; + -ms-flex-pack: $value; + } + -webkit-justify-content: $value; + -moz-justify-content: $value; + justify-content: $value; +} + // Shorter version: + @mixin flex-just($args...) { @include justify-content($args...); } + +//---------------------------------------------------------------------- + +// Flexbox Align Items +// +// Flex items can be aligned in the cross axis of the current line of the +// flex container, similar to 'justify-content' but in the perpendicular +// direction. 'align-items' sets the default alignment for all of the flex +// container's items, including anonymous flex items. 'align-self' allows +// this default alignment to be overridden for individual flex items. (For +// anonymous flex items, 'align-self' always matches the value of 'align-items' +// on their associated flex container.) +// +// Values: flex-start | flex-end | center | baseline | stretch +// Default: stretch +// +// http://w3.org/tr/css3-flexbox/#align-items-property + +@mixin align-items($value: stretch) { + @if $value == flex-start { + -webkit-box-align: start; + -ms-flex-align: start; + } @else if $value == flex-end { + -webkit-box-align: end; + -ms-flex-align: end; + } @else { + -webkit-box-align: $value; + -ms-flex-align: $value; + } + -webkit-align-items: $value; + -moz-align-items: $value; + align-items: $value; +} + +//---------------------------------- + +// Flexbox Align Self +// +// Values: auto | flex-start | flex-end | center | baseline | stretch +// Default: auto + +@mixin align-self($value: auto) { + // No Webkit Box Fallback. + -webkit-align-self: $value; + -moz-align-self: $value; + @if $value == flex-start { + -ms-flex-item-align: start; + } @else if $value == flex-end { + -ms-flex-item-align: end; + } @else { + -ms-flex-item-align: $value; + } + align-self: $value; +} + +//---------------------------------------------------------------------- + +// Flexbox Align Content +// +// The 'align-content' property aligns a flex container's lines within the +// flex container when there is extra space in the cross-axis, similar to +// how 'justify-content' aligns individual items within the main-axis. Note, +// this property has no effect when the flexbox has only a single line. +// +// Values: flex-start | flex-end | center | space-between | space-around | stretch +// Default: stretch +// +// http://w3.org/tr/css3-flexbox/#align-content-property + +@mixin align-content($value: stretch) { + // No Webkit Box Fallback. + -webkit-align-content: $value; + -moz-align-content: $value; + @if $value == flex-start { + -ms-flex-line-pack: start; + } @else if $value == flex-end { + -ms-flex-line-pack: end; + } @else { + -ms-flex-line-pack: $value; + } + align-content: $value; +} diff --git a/_sass/navigation.scss b/_sass/navigation.scss new file mode 100644 index 0000000..b2a4b62 --- /dev/null +++ b/_sass/navigation.scss @@ -0,0 +1,86 @@ +.nav-open nav { + border-bottom: 1px dotted rgba(255, 255, 255, .2); + padding: 10px 0; + a { + display: block; + } + + @media #{$mid-point} { + border: 0; + padding: 0 20px; + + a { + display: inline; + } + } +} + +nav { + text-transform: uppercase; + font-size: .8em; + width: 100%; + + @media #{$mid-point} { + text-align: right; + position: absolute; + top: 13px; + right: 0; + padding: 0 20px; + } + + + a { + margin: 0 3px; + padding: 20px 10px; + border-bottom: 1px solid rgba(255,255,255,0); + color: rgba(255,255,255,.8); + transition: .2s ease-in-out; + display: none; + + @media #{$mid-point} { + display: inline; + padding: 10px; + } + + + &.nav-toggle { + display: inline; + position: absolute; + right: 10px; + top: -22px; + font-size: 1.9em; + border: 0; + + @media #{$mid-point} { + display: none; + } + + &:hover { + border: 0; + } + } + } + + a:hover { + + border-bottom: 1px solid rgba(255,255,255,.3); + color: #fff; + } + + @media #{$mid-point} { + a.highlight { + border: 1px #ccc solid; + border-radius: 5px; + + &:hover { + background: #fff; + color: $brand-color; + } + } + } + + a.active { + color: #fff; + } + +} diff --git a/_sass/pricing.scss b/_sass/pricing.scss new file mode 100644 index 0000000..19b92ed --- /dev/null +++ b/_sass/pricing.scss @@ -0,0 +1,71 @@ +.plans { + @extend %flexbox; + @include flex-flow(wrap); + padding: 50px 0 30px 0; + + .plan { + list-style: none; + padding: 0; + margin: 0 10px 50px 10px; + text-align: center; + border: 1px solid #eee; + border-radius: 5px; + box-shadow: 0px 0px 10px #eee; + width: 100%; + + .highlighted { + font-size: 1.2em + } + + .pricing-cta { + padding: 0; + + a { + display: block; + box-sizing: border-box; + padding: 20px 0; + border-radius: 0 0 2px 2px; + border: 0; + } + } + + @media #{$desktop} { + -webkit-flex: 1; + flex: 1; + } + + li { + border-top-right-radius: 5px; + border-top-left-radius: 5px; + padding: 20px 0; + h3 { + padding: 0; + margin: 0; + color: #fff; + font-weight: normal; + } + } + } +} + +.faq { + @media #{$desktop} { + @include columns(2); + } + color: #666; + div { + break-inside: avoid; + padding: 25px 0; + } + + dt { + font-weight: bold; + margin: 0 0 5px 0; + } + + dd { + padding: 0; + margin: 0; + + } +} diff --git a/_sass/staff.scss b/_sass/staff.scss new file mode 100644 index 0000000..78cc262 --- /dev/null +++ b/_sass/staff.scss @@ -0,0 +1,38 @@ +.staff { + padding: 0; + list-style: none; + @extend %flexbox; + @include flex-flow(wrap); + text-align: center; + li { + padding: 30px 20px; + box-sizing: border-box; + width: 100%; + + @media #{$tablet} { + @include flex(1, 1, 45%); + } + + @media #{$desktop} { + @include flex(1, 1, 29%); + } + + } + + .square-image { + width: 200px; + height: 200px; + img { + border-radius: 200px; + } + } + + .name { + font-size: 1.3em; + margin-top: 20px; + } + + .position { + color: #666; + } +} diff --git a/_sass/variables.scss b/_sass/variables.scss new file mode 100644 index 0000000..620beb8 --- /dev/null +++ b/_sass/variables.scss @@ -0,0 +1,8 @@ +$brand-color: #4182e4; +$secondary-brand-color: #4182e4; +$middle-gradient-color: mix($brand-color, $secondary-brand-color, 95%); + +// Breakpoints +$tablet: "(min-width: 450px)"; +$mid-point: "(min-width: 620px)"; +$desktop: "(min-width: 768px)"; diff --git a/_staff_members/_defaults.md b/_staff_members/_defaults.md new file mode 100644 index 0000000..38ce5dc --- /dev/null +++ b/_staff_members/_defaults.md @@ -0,0 +1,7 @@ +--- +name: +position: +image_path: +twitter: +blurb: +--- diff --git a/_staff_members/anna.md b/_staff_members/anna.md new file mode 100644 index 0000000..a1c3083 --- /dev/null +++ b/_staff_members/anna.md @@ -0,0 +1,7 @@ +--- +name: Anna Thompson +position: Marketing +image_path: https://source.unsplash.com/collection/139386/601x601?a=.png +twitter: CloudCannonApp +blurb: Anna likes long walks on the beach and buffet breakfast. +--- diff --git a/_staff_members/betty.md b/_staff_members/betty.md new file mode 100644 index 0000000..b3b622d --- /dev/null +++ b/_staff_members/betty.md @@ -0,0 +1,7 @@ +--- +name: Betty Jefferson +position: Developer +image_path: https://source.unsplash.com/collection/139386/602x602?a=.png +twitter: CloudCannonApp +blurb: Betty is a bookworm who will typically have four books on the go. +--- diff --git a/_staff_members/gerald.md b/_staff_members/gerald.md new file mode 100644 index 0000000..012df97 --- /dev/null +++ b/_staff_members/gerald.md @@ -0,0 +1,7 @@ +--- +name: Gerald Freeman +position: Sales +image_path: https://source.unsplash.com/collection/139386/603x603?a=.png +twitter: CloudCannonApp +blurb: Gerald loves going to bike rides and spending time with his family. +--- diff --git a/_staff_members/james.md b/_staff_members/james.md new file mode 100644 index 0000000..b1a9745 --- /dev/null +++ b/_staff_members/james.md @@ -0,0 +1,7 @@ +--- +name: James Lopez +position: Developer +image_path: https://source.unsplash.com/collection/139386/604x604?a=.png +twitter: CloudCannonApp +blurb: James spends his weekends watching his favourite NBA team - L.A. Clippers. +--- diff --git a/_staff_members/robin.md b/_staff_members/robin.md new file mode 100644 index 0000000..9667a41 --- /dev/null +++ b/_staff_members/robin.md @@ -0,0 +1,7 @@ +--- +name: Robin Herrera +position: CEO +image_path: https://source.unsplash.com/collection/139386/605x605?a=.png +twitter: CloudCannonApp +blurb: Robin is often found tending to her majestic vegetable garden. +--- diff --git a/_staff_members/tom.md b/_staff_members/tom.md new file mode 100644 index 0000000..60d01e4 --- /dev/null +++ b/_staff_members/tom.md @@ -0,0 +1,7 @@ +--- +name: Tom Wilson +position: CTO +image_path: https://source.unsplash.com/collection/139386/600x600?a=.png +twitter: CloudCannonApp +blurb: Tom likes to travel and has visited over 50 countries. +--- diff --git a/about.html b/about.html new file mode 100644 index 0000000..ee62690 --- /dev/null +++ b/about.html @@ -0,0 +1,14 @@ +--- +title: Our team +description: We've built an amazing team of developers, marketers, designers and sales people. +--- +

    ✎ Manage Staff members

    +
      + {% for person in site.staff_members %} +
    • +
      {{ person.name }}
      +
      {{ person.name }}
      +
      {{ person.position }}
      +
      • + {% endfor %} +
    diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..65b56de Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/blog/index.html b/blog/index.html new file mode 100644 index 0000000..80ce1e3 --- /dev/null +++ b/blog/index.html @@ -0,0 +1,26 @@ +--- +title: Blog +description: Keep up with the latest news. +--- + +
    +

    ✎ Add Post

    +
      + {% include list-posts.html posts=paginator.posts %} +
    + + {% if paginator.total_pages > 1 %} + + + {% endif %} +
    diff --git a/contact-success.html b/contact-success.html new file mode 100644 index 0000000..a2d6059 --- /dev/null +++ b/contact-success.html @@ -0,0 +1,6 @@ +--- +title: Contact Success +--- + +

    Success

    +

    Your message is sent. We'll be in touch soon.

    diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..d235945 --- /dev/null +++ b/contact.html @@ -0,0 +1,178 @@ +--- +title: Contact +heading: Get in touch today +description: We'd love to help you improve your sales. + +map: + latitude: -45.8787605 + longitude: 170.5027976 + address: "1 George Street, Dunedin, New Zealand" + zoom: 13 +--- +
    + + +
    +
    + + + + + + + + + + + + + +
    + +
    +

    Address

    +
    {{ page.map.address | replace: ", ", ",
    " }}
    + +

    Email

    +

    support@example.com

    +
    +
    + + + diff --git a/css/screen.scss b/css/screen.scss new file mode 100644 index 0000000..08a2ede --- /dev/null +++ b/css/screen.scss @@ -0,0 +1,16 @@ +--- +--- +@import "mixins/flexbox"; +@import "mixins/columns"; +@import "variables"; +@import "elements"; +@import "landing-page"; +@import "layout"; +@import "pricing"; +@import "staff"; +@import "contact"; +@import "blog"; +@import "forms"; +@import "navigation"; +@import "footer"; +@import "cloudcannon"; diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..24d6132 Binary files /dev/null and b/favicon.png differ diff --git a/images/_screenshot.png b/images/_screenshot.png new file mode 100644 index 0000000..3cbd8be Binary files /dev/null and b/images/_screenshot.png differ diff --git a/images/dashboard.png b/images/dashboard.png new file mode 100644 index 0000000..c10df9f Binary files /dev/null and b/images/dashboard.png differ diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..59adc8e --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..d2efa96 --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ +--- +title: The last sales CRM you'll ever need +description: Track and optimize your sales team in real time +--- +
    +
    +

    The last sales CRM you'll ever need

    +

    Track and optimize your sales team in real time.

    +
    Get Started Free
    +
    + Screenshot +
    +
    +
    + +
    +
    +
    +
    +

    How can we double our sales revenue?

    +

    Hydra learns your business. By analyzing your sales data, Hydra optimizes your sales process and show you where you should be spending your resources.

    +
    +
    + Screenshot +
    +
    +
    + +
    +
    +
    +

    How can I keep track of my sales team?

    +

    Hydra learns your business. By analyzing your sales data, Hydra optimizes your sales process and show you where you should be spending your resources.

    +
    +
    + Screenshot +
    +
    +
    + +
    +
    +
    +

    How can I forecast the next 90 days?

    +

    Hydra learns your business. By analyzing your sales data, Hydra optimizes your sales process and show you where you should be spending your resources.

    +
    +
    + Screenshot +
    +
    +
    + +
    +
    +
    +
    Jim James
    +
    +

    Hydra has shaped the business we have today. We have a repeatable sales process and a strategy to scale our team. I recommend Hydra to any business looking to improve their sales.

    +

    Jim James - CEO of Global Corp.

    +
    +
    +
    +
    + +
    +

    Improve your sales process today

    +
    Get Started Free
    +
    +
    diff --git a/pricing.html b/pricing.html new file mode 100644 index 0000000..848d402 --- /dev/null +++ b/pricing.html @@ -0,0 +1,97 @@ +--- +title: Pricing +heading: Find the perfect plan for your business +description: All plans include our award winning sales optimization solution to track your sales in real time. +pricing_table: + - name: Basic + color: "#8e8e8e" + features: + - text: $25 per month + highlight: true + - text: Up to 5 users + highlight: false + - text: Basic lead scoring + highlight: false + - text: CRM + highlight: false + - text: Basic reporting + highlight: false + - text: Sales map + highlight: false + call_to_action: + link: http://mysite.com?plan=basic + text: Get started + - name: Pro + color: "#4a4a4a" + features: + - text: $99 per month + highlight: true + - text: Everything in Basic + highlight: false + - text: Up to 25 users + highlight: false + - text: Advanced lead scoring + highlight: false + - text: Pipeline management + highlight: false + - text: Advanced reporting + highlight: false + call_to_action: + link: http://mysite.com?plan=pro + text: Get started + - name: Professional + color: "#000000" + features: + - text: $299 per month + highlight: true + - text: Everything in Basic and Pro + highlight: false + - text: Up to 100 users + highlight: false + - text: Campaign builder + highlight: false + - text: Machine learning + highlight: false + - text: Calendar + highlight: false + call_to_action: + link: http://mysite.com?plan=professional + text: Get started +faq: + - question: What types of payment do you accept? + answer: Credit cards including MasterCard, Visa or American Express. + - question: Can I change my plan at a later time? + answer: Yes, you can upgrade and downgrade your plan at anytime. + - question: Do you offer pricing for nonprofit organizations? + answer: Yes, send us a message and we'll set you up on our nonprofit pricing. + - question: Questions? + answer: Contact us for any further questions at john@business.com. +--- +
    + {% for plan in page.pricing_table %} +
      +
    • +

      {{ plan.name }}

      +
      • + {% for feature in plan.features %} +
    • {{ feature.text }}
      • + {% endfor %} + + {% if plan.call_to_action %} +
    • {{ plan.call_to_action.text }} →
      • + {% endif %} +
    + {% endfor %} +
    + +{% if page.faq %} +

    Pricing FAQ

    +
    + {% for item in page.faq %} +
    +
    {{ item.question }}
    +
    {{ item.answer }}
    +
    + {% endfor %} +
    +{% endif %} diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..4137002 --- /dev/null +++ b/robots.txt @@ -0,0 +1,6 @@ +--- +layout: null +sitemap: false +--- +User-agent: * +Sitemap: {{ site.url }}/sitemap.xml diff --git a/siteicon.png b/siteicon.png new file mode 100644 index 0000000..b9fe6a5 Binary files /dev/null and b/siteicon.png differ diff --git a/touch-icon.png b/touch-icon.png new file mode 100644 index 0000000..5af55cd Binary files /dev/null and b/touch-icon.png differ