Update flotiq cms page (#982)

* update flotiq cms page

* add utm tags to flotiq links

* update Flotiq starters section

---------

Co-authored-by: lukasz.wach <[email protected]>

src/site/headless-cms/flotiq.md

@@ -18,45 +18,63 @@ Flotiq's goal is to provide developers with an easy to use API, powerful integra
 
 ## Where to start
 
-Head over to [Flotiq Docs](https://flotiq.com/docs/) or start exploring immediately with a [free account](https://editor.flotiq.com).
+### Start building with Flotiq
 
-We've published several deep-dive docs describing how to get started building JAMstack-based apps with Flotiq, try:
-- [building a blog in 3 minutes](https://flotiq.com/docs/Deep-Dives/Building-a-blog-in-3-minutes/)
-- [migrating Wordpress content to Flotiq](https://flotiq.com/docs/Deep-Dives/wordpress-import/)
-- [connecting a contact form to your CMS and adding notifications with Zapier](https://flotiq.com/docs/Deep-Dives/Headless-CMS-Contact-Forms/)
+Head over to [Flotiq Docs](https://flotiq.com/docs/?utm_source=jamstack&utm_medium=referral&utm_campaign=flotiq_at_jamstack_headless_cms) or start exploring immediately with a [free account](https://editor.flotiq.com?utm_source=jamstack&utm_medium=referral&utm_campaign=flotiq_at_jamstack_headless_cms).
 
-or have a quick look at one of our inspiring videos:
-- [Start a blog in 3 minutes with Flotiq, GatsbyJs and Heroku!
-](https://youtu.be/hz3RK5qqhrQ)
+<a href="https://flotiq.com/docs/?utm_source=jamstack&utm_medium=referral&utm_campaign=flotiq_at_jamstack_headless_cms" style="padding: 10px 20px; background-color: #007bff; color: white; text-decoration: none; border-radius: 5px;">Explore Flotiq Docs</a>
+<a href="https://editor.flotiq.com?utm_source=jamstack&utm_medium=referral&utm_campaign=flotiq_at_jamstack_headless_cms" style="padding: 10px 20px; background-color: #28a745; color: white; text-decoration: none; border-radius: 5px;">Start Free</a>
+
+We've published several deep-dive docs describing how to get started building JAMstack-based apps with Flotiq:
+- [Build a blog in 3 minutes](https://flotiq.com/docs/Deep-Dives/Building-a-blog-in-3-minutes/?utm_source=jamstack&utm_medium=referral&utm_campaign=flotiq_at_jamstack_headless_cms)
+- [Migrate Wordpress to Flotiq](https://flotiq.com/docs/Deep-Dives/wordpress-import/?utm_source=jamstack&utm_medium=referral&utm_campaign=flotiq_at_jamstack_headless_cms)
+- [Connect a contact form to Flotiq and add notifications with Zapier](https://flotiq.com/docs/Deep-Dives/Headless-CMS-Contact-Forms/?utm_source=jamstack&utm_medium=referral&utm_campaign=flotiq_at_jamstack_headless_cms)
+
+<br>
+
+### Flotiq tutorials
+
+Have a quick look at one of our inspiring videos:
+- [Start a blog in 3 minutes with Flotiq, GatsbyJs and Heroku!](https://youtu.be/hz3RK5qqhrQ)
 - [Autogenerated Postman collections](https://youtu.be/CTOCfHV-19s)
 - [Building an E-commerce website in 3 minutes](https://youtu.be/bMCmirgaI2M)
 - [Creating content types and generated API docs](https://youtu.be/XHR4pANj4A8)
 - [Working with voice - Google Assistant & Flotiq](https://youtu.be/FEiSIunbjHw)
 
-If you're ready to jump straight to coding, here's a bunch of boilerplate repositories to get you started, too:
+<br>
 
-- [Gatsby.js blog sourcing content from Flotiq](https://github.com/flotiq/gatsby-starter-blog)
-- [Gatsby.js project portfolio sourcing content from Flotiq](https://github.com/flotiq/gatsby-starter-projects)
-- [Gatsby.js and Snipcart boilerplate, sourcing products from Flotiq](https://github.com/flotiq/gatsby-starter-products)
-- [Snipcart and Next.js, sourcing products from Flotiq](https://github.com/flotiq/snipcart-nextjs)
+### Flotiq starters
 
-## Key features
+Ready to code? Check out our boilerplate repositories
+- [Gatsby.js blog](https://github.com/flotiq/flotiq-gatsby-blog-1)
+- [Gatsby.js project portfolio](https://github.com/flotiq/flotiq-gatsby-portfolio-1)
+- [Gatsby.js and Snipcart boilerplate](https://github.com/flotiq/flotiq-gatsby-shop-1)
+- [Gatsby.js recipes](https://github.com/flotiq/flotiq-gatsby-recipe-2)
+- [Next.js blog](https://github.com/flotiq/flotiq-nextjs-blog-1)
+- [Next.js portfolio](https://github.com/flotiq/flotiq-nextjs-portfolio-2)
+- [Next.js Snipcart](https://github.com/flotiq/flotiq-nextjs-shop-2)
+- [Next.js recipes](https://github.com/flotiq/flotiq-nextjs-recipe-2)
+
+Check out the [full list of Flotiq starters](https://flotiq.com/starters/?utm_source=jamstack&utm_medium=referral&utm_campaign=flotiq_at_jamstack_headless_cms).
+
+<a href="https://flotiq.com/starters/?utm_source=jamstack&utm_medium=referral&utm_campaign=flotiq_at_jamstack_headless_cms" style="padding: 10px 20px; background-color: #ff5722; color: white; text-decoration: none; border-radius: 5px;">Flotiq starters</a>
 
+## Key features
 
 ### Dynamic Content API support
 
 At Flotiq we strongly believe in open standards as a way to enable development of well-engineered systems. The Content Types you create in Flotiq are automatically translated into a set of RESTful endpoints and Flotiq provides an OpenAPI schema, that updates automatically after every change you make to your data models. That schema is then used for generating your SDKs and API docs. 
 
 If you're not feeling like building your own Content type, you can always use one of our boilerplates. If you do - you'll find a boilerplate repo on Github, that will let you deploy your own {blog, portfolio, calendar, e-commerce, recipe page} in under 5 minutes. 
 
-Don't take our word on it - check yourself.
+Try it yourself and see the difference!
 
-![Boilerplate content type definitions have their Github repositories with demo projects](/img/cms/flotiq-create-content-type-definition.png)
+<img src="/img/cms/flotiq-create-content-type-definition.png" alt="Boilerplate repo" style="width: 90%; border: 1px solid #ccc; display: block; margin: 20px auto;">
 
 ### Generate packages in language/framework you like and start coding!
 Once you have defined your data model - you can start working with your content. You don't need to learn Flotiq's API, because there isn't any. Flotiq lets you define your API yourself, so you can feel comfortable with the models and properties you define. To simplify your Developer Experience we provide SDKs that fully integrate with your IDE, so you will get all the auto-complete magic you'd ever need!
 
-![The generated SDK packages provide powerful integration of Flotiq-based content types in your IDE](/img/cms/flotiq-sdk-benefits.gif)
+<img src="/img/cms/flotiq-sdk-benefits.gif" alt="Flotiq SDK packages in IDE" style="width: 90%; border: 1px solid #ccc; display: block; margin: 20px auto;">
 
 The languages and frameworks we support at the moment are:
 - C#
@@ -67,35 +85,40 @@ The languages and frameworks we support at the moment are:
 - Python
 - Angular
 
-![Generated SDK packages are automatically synced with your data model](/img/cms/flotiq-download-sdks.png)
-
+<img src="/img/cms/flotiq-download-sdks.png" alt="Overview of Flotiq SDK packages" style="width: 60%; border: 1px solid #ccc; display: block; margin: 20px auto;">
 
 and an extremely well accepted automatically-generated [Postman](https://getpostman.com) package.
 
-![Flotiq called ingenious by Postman!](/img/cms/flotiq-postman-linkedin.png)
-
+<img src="/img/cms/flotiq-postman-linkedin.png" alt="Flotiq called ingenious by Postman" style="width: 60%; border: 1px solid #ccc; display: block; margin: 20px auto;">
 
 Unleash your imagination and build something creative!
 
 ### Get your own API Doc based on what you have created in Flotiq
 
 Another benefit you'll see is the beautiful API documentation, which you can share with your peers when integrating your content in other systems. 
 
-![Automatically generated API docs are perfect for sharing your API with other developers](/img/cms/flotiq-api-docs.png)
+<img src="/img/cms/flotiq-api-docs.png" alt="Flotiq's auto generated API docs" style="border: 1px solid #ccc; display: block; margin: 20px auto;">
 
 ### Scoped API keys
 
 The recently added scoped API keys are a perfect way to keep your API secure. You can create keys for individual endpoints or group them by use case, whatever works for you.
-![Flotiq provides scoped API keys to improve security of your content](/img/cms/flotiq-api-keys.png)
 
+<img src="/img/cms/flotiq-api-keys.png" alt="Flotiq user defined scoped API keys" style="width: 75% ;border: 1px solid #ccc; display: block; margin: 20px auto;">
 
 ### Powerful search API
 
 Unlike other headless CMS systems - we believe that developers need efficient access to content. So we're not only exposing the content through REST endpoints, but also providing efficient means of searching through that content. To provide one of the most powerful ways to query content - we partially expose the ElasticSearch (ES) engine through Flotiq's search API, wrapping it and stripping to leave only the essentials.
 
-You can aggregate your search results by given conditions and also rank them by giving weight to a specific field. Be sure to check our [Search API Deep Dive](https://flotiq.com/docs/Deep-Dives/search-api-deepdive/) to read more about it.
+You can aggregate your search results by given conditions and also rank them by giving weight to a specific field. Be sure to check our [Search API Deep Dive](https://flotiq.com/docs/Deep-Dives/search-api-deepdive/?utm_source=jamstack&utm_medium=referral&utm_campaign=flotiq_at_jamstack_headless_cms) to read more about it.
+
+<img src="/img/cms/flotiq-search-aggregations.png" alt="Flotiq full-text api search" style="width: 45% ;border: 1px solid #ccc; display: block; margin: 20px auto;">
+
+<div style="text-align: center;">
+
+  ## Interested? 
+
+  Try <a href="https://editor.flotiq.com?utm_source=jamstack&utm_medium=referral&utm_campaign=flotiq_at_jamstack_headless_cms" style="color: #007bff; text-decoration: none;">Flotiq</a> now, it's free to start.
 
-![Flotiq's search API offers powerful features, like filtering, aggregation and boosting](/img/cms/flotiq-search-aggregations.png)
+  <a href="https://editor.flotiq.com?utm_source=jamstack&utm_medium=referral&utm_campaign=flotiq_at_jamstack_headless_cms" style="padding: 10px 20px; background-color: #28a745; color: white; text-decoration: none; border-radius: 5px;">Start Free</a>
 
-## Interested? 
-Try [Flotiq](https://editor.flotiq.com) now, it's free to start.
+</div>