rails_app_generator 0.1.6 → 0.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 74ea402449d28be464f76e50d4f78f0e29905f7b23ab85bdb7c12a1be32337a1
-  data.tar.gz: e6543558c80c0c27428ad863b6927ac3d5c39430b828c55feb4d4006a1295bec
+  metadata.gz: 96c2c0a83f21efd278ae574b7161c8b3d4522880f3b01b37d43b783ede17d7ec
+  data.tar.gz: 54c7745878991f2bbc49e894a205582c90dd7bda79d6b3d7de811a48622beaf5
 SHA512:
-  metadata.gz: 7311f3c9f20f306e775f1c818ef9c0ce47ab0392b4eb54fca421ffcaa023b3b1b62aedd6ee9f320a277f53da14066eb7139ed21d7695bd47a220313e97f78996
-  data.tar.gz: dcb71902c885e49d3d6197d47f445edb3db5528cd22f0b700b9c9823a41fdd9b321cd891f9a476672fd6ddc07cd8dff94df5b30e86711fd4bddd1aaf12db36c5
+  metadata.gz: 8bc7eebffc7d3c2f8bc1c4a6d758d8ca826355d0e2421a01dfec5b57d3b00a8bbab37f3cb8b6eab59ef2f9d30f47bd81596dfb6b0b7d0b996f15c783aa52a22d
+  data.tar.gz: 4e9dc215f0574e203240817ad2b5f5aa231e0628fb7c352b2274c59612a7d88c89dda174ed19083929b9c39eae0235bdbdc878e2947e5b055c27ff26a02831cc

data/.builders/generators/project-plan.rb

@@ -14,6 +14,7 @@ KManager.action :project_plan do
         grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
 
         todo(title: 'generator for new profiles')
+        todo(title: 'look at the sample tailwind pages in P7 and turn them into an addon')
 
         todo(title: 'add auto open flag to profile and command line')
         todo(title: 'add profile - stimulas')
@@ -22,9 +23,9 @@ KManager.action :project_plan do
         todo(title: 'add profile - vue')
         todo(title: 'add profile - svelte')
         todo(title: 'add profile - react')
-        todo(title: 'add profile - vite')
-        todo(title: 'add profile - docker') # https://www.youtube.com/watch?v=ZhrnqHVVo1g
-        todo(title: 'add encryption - https://youtu.be/ZmwNzod1trk?t=701')
+        todo(title: 'add profile - vite')         # see: /Users/davidcruwys/dev/printspeak/printspeak-r7-test1
+        todo(title: 'add profile - docker')       # https://www.youtube.com/watch?v=ZhrnqHVVo1g
+        todo(title: 'add encryption')             # https://youtu.be/ZmwNzod1trk?t=701
         todo(title: 'cli help support for diff')
         todo(title: 'cli support for rails new (rag new should work like rails new) - buggy, need to work through')
         todo(title: 'need an option for deleting target project path') # FileUtils.rm_rf(instance.target_path)

data/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [0.1.8](https://github.com/klueless-io/rails_app_generator/compare/v0.1.7...v0.1.8) (2022-07-31)
+
+
+### Bug Fixes
+
+* add support for required gems on addons ([78bfcef](https://github.com/klueless-io/rails_app_generator/commit/78bfcef2323cdc01edb769924585d86d4ff21579))
+
+## [0.1.7](https://github.com/klueless-io/rails_app_generator/compare/v0.1.6...v0.1.7) (2022-07-30)
+
+
+### Bug Fixes
+
+* add video documentation ([79fa9ae](https://github.com/klueless-io/rails_app_generator/commit/79fa9aeafe5d195b14cfcd1124f45dc6c30f16fc))
+
+## [0.1.6](https://github.com/klueless-io/rails_app_generator/compare/v0.1.5...v0.1.6) (2022-07-30)
+
+
+### Bug Fixes
+
+* add profile - tailwind-emulating-bootstrap ([d79b99e](https://github.com/klueless-io/rails_app_generator/commit/d79b99ecb8448635952d6c978aea9c5e92f11a71))
+
 ## [0.1.5](https://github.com/klueless-io/rails_app_generator/compare/v0.1.4...v0.1.5) (2022-07-29)
 
 

data/Rakefile

@@ -8,6 +8,8 @@ require 'bundler/gem_tasks'
 require 'rspec/core/rake_task'
 require 'rails_app_generator/version'
 
+require 'pry'
+
 RSpec::Core::RakeTask.new(:spec)
 
 require 'rake/extensiontask'

data/after_templates/README.md

@@ -4,11 +4,15 @@ A set of templates that can be used via the `--template` argument
 
 ## Videos
 
+- profile: rag-tailwind
+  - Demonstrates a Tailwind homepage
+  - setup tailwind using --css=tailwind option
+- profile: rag-tailwind-daisyui
+  - Tailwind, DaisyUI and Theme Changer using Stimulus
+  - Make sure it persists the theme change across pages
 - Bootstrap & Tailwind in same application plus Bootstrap Emulation
   - Demonstrates running bootstrap and tailwind in the same Rails 7 application
   - Demonstrates using Bootstrap CSS classes in a Tailwind project
 - Hotwire Flash Messages
-- Tailwind, DaisyUI and Theme Changer using Stimulus
-  - Make sure it persists the theme change across pages
 - Tailwind, Reusing Styles
   - https://tailwindcss.com/docs/reusing-styles

data/after_templates/addons/rails_html_sanitizer/index.html.erb

@@ -0,0 +1,31 @@
+<h1>Testing HTML Sanitizer</h1>
+
+<p>Read more here <a href="https://github.com/rails/rails-html-sanitizer">rails-html-sanitizer</a></p>
+
+<textarea rows="4" cols="200">
+full_sanitizer = Rails::Html::FullSanitizer.new
+full_sanitizer.sanitize("<b>Bold</b> no more!  <a href='more.html'>See more here</a>...")
+</textarea>
+
+<hr>
+<%=
+  Rails::Html::FullSanitizer
+    .new
+    .sanitize("<b>Bold</b> no more!  <a href='more.html'>See more here</a>...")
+%>
+
+<br/><br/><br/>
+
+<hr>
+
+<textarea rows="4" cols="200">
+link_sanitizer = Rails::Html::LinkSanitizer.new
+link_sanitizer.sanitize('<a href="example.com">Only the link text will be kept.</a>')
+# => Only the link text will be kept.
+</textarea>
+
+<%=
+  Rails::Html::LinkSanitizer
+    .new
+    .sanitize('<a href="example.com">Only the link text will be kept.</a>')
+%>

data/after_templates/addons/rails_html_sanitizer.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# Rails HTML Sanitizer is responsible for sanitizing HTML fragments in Rails applications, i.e. in the sanitize, sanitize_css, strip_tags and strip_links methods.
+require 'pry'
+
+self.local_template_path = local_template_base(__FILE__)
+
+gac 'base rails 7 image created'
+
+add_controller('home', 'index')
+route("root 'home#index'")
+
+force_copy
+
+copy_file 'index.html.erb', 'app/views/home/index.html.erb'

data/after_templates/rag_devise/application.html.erb

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Devise</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+  </head>
+
+  <body>
+    <%= render 'layouts/navbar' %>
+    <main>
+      <%= render 'layouts/alerts' %>
+      <%= yield %>
+    </main>
+    <%= render 'layouts/footer' %>
+  </body>
+</html>

data/after_templates/rag_devise/application_controller.rb

@@ -0,0 +1,10 @@
+class ApplicationController < ActionController::Base
+  # THIS is being handled by the generate devise:controller users
+  # before_action :configure_permitted_parameters, if: :devise_controller?
+
+  # protected
+
+  # def configure_permitted_parameters
+  #   devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
+  # end
+end

data/after_templates/rag_devise/config/initializers/devise_turbo.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+# Having issues with devise/turbo.
+# See: https://gorails.com/episodes/devise-hotwire-turbo
+class TurboFailureApp < Devise::FailureApp
+  def respond
+    if request_format == :turbo_stream
+      redirect
+    else
+      super
+    end
+  end
+
+  def skip_format?
+    %w(html turbo_stream */*).include? request_format.to_s
+  end
+end
+
+Devise.setup do |config|
+  # ==> Controller configuration
+  # Configure the parent class to the devise controllers.
+  config.parent_controller = 'TurboController'
+
+  config.navigational_formats = ['*/*', :html, :turbo_stream]
+
+  # ==> Warden configuration
+  config.warden do |manager|
+    manager.failure_app = TurboFailureApp
+  end
+end

data/after_templates/rag_devise/layouts/_alerts.html.erb

@@ -0,0 +1,3 @@
+<% if notice %><p class="notice"><%= notice %></p><% end %>
+<% if alert %><p class="alert"><%= alert %></p><% end %>
+

data/after_templates/rag_devise/layouts/_footer.html.erb

@@ -0,0 +1,3 @@
+<footer>
+<hr />
+</footer>

data/after_templates/rag_devise/layouts/_navbar.html.erb

@@ -0,0 +1,14 @@
+<header>
+  <h1>Devise</h1>
+  <%=link_to 'Posts', posts_path %> |
+
+  <% if current_user %>
+    <span>(<%= current_user.name %>)</span>
+    <%= link_to "Log out", destroy_user_session_path, method: :delete, data: { turbo_method: :delete } %>
+    <%= link_to "My Profile", edit_user_registration_path %>
+  <% else %>
+    <%=link_to 'Sign Up', new_user_registration_path %> |
+    <%=link_to 'Login', new_user_session_path %>
+  <% end %>
+  <hr />
+</header>

data/after_templates/rag_devise/layouts/application.html.erb

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= camelized %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%%= csrf_meta_tags %>
+    <%%= csp_meta_tag %>
+
+    <%- if options[:skip_hotwire] || options[:skip_javascript] -%>
+    <%%= stylesheet_link_tag "application" %>
+    <%- else -%>
+    <%%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%- end -%>
+  </head>
+
+  <body>
+    <%%= render 'layouts/navbar' %>
+    <main>
+      <%%= render 'layouts/alerts' %>
+      <%%= yield %>
+    </main>
+    <%%= render 'layouts/footer' %>
+  </body>
+</html>

data/after_templates/rag_devise/post/_post.html.erb

@@ -0,0 +1,14 @@
+<div id="<%= dom_id post %>">
+  <h4>posted by <%= post.user.email %></h4>
+
+  <p>
+    <strong>Title:</strong>
+    <%= post.title %>
+  </p>
+
+  <p>
+    <strong>Body:</strong>
+    <%= post.body %>
+  </p>
+
+</div>

data/after_templates/rag_devise/post/post.rb

@@ -0,0 +1,3 @@
+class Post < ApplicationRecord
+  belongs_to :user
+end

data/after_templates/rag_devise/post/posts_controller.rb

@@ -0,0 +1,72 @@
+class PostsController < ApplicationController
+  before_action :authenticate_user!, except: %i[show index]
+  before_action :set_post, only: %i[ show edit update destroy ]
+
+  # GET /posts or /posts.json
+  def index
+    @posts = Post.all
+  end
+
+  # GET /posts/1 or /posts/1.json
+  def show
+  end
+
+  # GET /posts/new
+  def new
+    @post = Post.new
+  end
+
+  # GET /posts/1/edit
+  def edit
+  end
+
+  # POST /posts or /posts.json
+  def create
+    @post = Post.new(post_params)
+    @post.user = current_user
+
+    respond_to do |format|
+      if @post.save
+        format.html { redirect_to post_url(@post), notice: "Post was successfully created." }
+        format.json { render :show, status: :created, location: @post }
+      else
+        format.html { render :new, status: :unprocessable_entity }
+        format.json { render json: @post.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # PATCH/PUT /posts/1 or /posts/1.json
+  def update
+    respond_to do |format|
+      if @post.update(post_params)
+        format.html { redirect_to post_url(@post), notice: "Post was successfully updated." }
+        format.json { render :show, status: :ok, location: @post }
+      else
+        format.html { render :edit, status: :unprocessable_entity }
+        format.json { render json: @post.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # DELETE /posts/1 or /posts/1.json
+  def destroy
+    @post.destroy
+
+    respond_to do |format|
+      format.html { redirect_to posts_url, notice: "Post was successfully destroyed." }
+      format.json { head :no_content }
+    end
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_post
+      @post = Post.find(params[:id])
+    end
+
+    # Only allow a list of trusted parameters through.
+    def post_params
+      params.require(:post).permit(:title, :body)
+    end
+end

data/after_templates/rag_devise/seed_data.rb

@@ -0,0 +1,8 @@
+
+david = User.create(email: 'david@site.com', name: 'david', password: 'password')
+bob = User.create(email: 'bob@site.com', name: 'bob', password: 'password')
+lisa = User.create(email: 'lisa@site.com', name: 'lisa', password: 'password')
+
+10.times do |i|
+  Post.create(title: "Post #{i}", body: "This is the body of post #{i}", user: User.all.sample)
+end  

data/after_templates/rag_devise/turbo_controller.rb

@@ -0,0 +1,24 @@
+class TurboController < ApplicationController
+
+  # This is required for Devise to work.
+  # See: https://youtu.be/m3uhldUGVes?t=1432
+  #
+  # Having issues with devise/turbo.
+  # See: https://gorails.com/episodes/devise-hotwire-turbo
+  class Responder < ActionController::Responder
+    def to_turbo_stream
+      controller.render(options.merge(formats: :html))
+    rescue ActionView::MissingTemplate => error
+      if get?
+        raise error
+      elsif has_errors? && default_action
+        render rendering_options.merge(formats: :html, status: :unprocessable_entity)
+      else
+        redirect_to navigation_location
+      end
+    end
+  end
+
+  self.responder = Responder
+  respond_to :html, :turbo_stream
+end

data/after_templates/rag_devise/user.rb

@@ -0,0 +1,8 @@
+class User < ApplicationRecord
+  # Include default devise modules. Others available are:
+  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
+  devise :database_authenticatable, :registerable,
+         :recoverable, :rememberable, :validatable
+
+  has_many :posts
+end

data/after_templates/rag_devise.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+# Rails 7 - Intro to Devise
+# https://www.youtube.com/watch?v=m3uhldUGVes
+
+require 'pry'
+
+self.local_template_path = local_template_base(__FILE__)
+
+gac 'base rails 7 image created'
+
+# generate('devise:views')
+
+add_scaffold('post', 'title', 'body:text')
+route("root 'posts#index'")
+
+force_copy
+
+copy_file   'application_controller.rb'           , 'app/controllers/application_controller.rb'
+copy_file   'turbo_controller.rb'                 , 'app/controllers/turbo_controller.rb'
+
+copy_file   'layouts/_alerts.html.erb'            , 'app/views/layouts/_alerts.html.erb'
+copy_file   'layouts/_navbar.html.erb'            , 'app/views/layouts/_navbar.html.erb'
+copy_file   'layouts/_footer.html.erb'            , 'app/views/layouts/_footer.html.erb'
+template    'layouts/application.html.erb'        , 'app/views/layouts/application.html.erb'
+
+copy_file   'config/initializers/devise_turbo.rb' , 'config/initializers/devise_turbo.rb'
+
+copy_file   'post/posts_controller.rb'            , 'app/controllers/posts_controller.rb'
+copy_file   'post/_post.html.erb'                 , 'app/views/posts/_post.html.erb'
+copy_file   'post/post.rb'                        , 'app/models/post.rb'
+
+copy_file   'user.rb'                             , 'app/models/user.rb'
+
+copy_file   'application.html.erb'                , 'app/views/layouts/application.html.erb'
+copy_file   'application_controller.rb'           , 'app/controllers/application_controller.rb'
+
+add_migration('add_user_to_posts', 'user:belongs_to')
+
+after_bundle do
+  db_migrate
+
+  append_to_file('db/seeds.rb', read_template('seed_data.rb'))
+  db_seed
+end

data/after_templates/rag_printspeak/application_controller.rb

@@ -0,0 +1,22 @@
+class ApplicationController < ActionController::Base
+  def navbar_partial(partial = nil)
+    @partial_navbar = partial if partial 
+    return @partial_navbar if defined? @partial_navbar
+    @partial_navbar = 'layouts/navbar'
+  end
+  helper_method :navbar_partial
+
+  def head_partial(partial = nil)
+    @partial_head = partial if partial 
+    return @partial_head if defined? @partial_head
+    @partial_head = 'layouts/head'
+  end
+  helper_method :head_partial
+
+  def footer_partial(partial = nil)
+    @partial_footer = partial if partial 
+    return @partial_footer if defined? @partial_footer
+    @partial_footer = 'layouts/footer'
+  end
+  helper_method :footer_partial
+end

data/after_templates/rag_printspeak/faq.html.erb

@@ -0,0 +1,189 @@
+<section>
+  <div class="container">
+    <div class="flex flex-wrap -mx-4">
+      <div class="w-full px-4">
+        <div class="text-center mx-auto mb-[60px] lg:mb-20 max-w-[520px]">
+          <span class="font-semibold text-lg text-primary mb-2 block"> FAQ </span>
+          <h2 class="font-bold text-3xl sm:text-4xl md:text-[40px] text-dark mb-4">Any Questions? Look Here</h2>
+          <p class="text-base text-body-color">
+            There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in
+            some form.
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-wrap -mx-4">
+      <div class="w-full lg:w-1/2 px-4">
+        <div class="single-faq w-full bg-white border border-[#F3F4FE] rounded-lg p-4 sm:p-8 lg:px-6 xl:px-8 mb-8">
+          <button class="faq-btn flex w-full text-left" @click="openFaq1 = !openFaq1">
+            <div
+              class="w-full max-w-[40px] h-10 flex items-center justify-center rounded-lg bg-primary text-primary bg-opacity-5 mr-5"
+            >
+              <svg width="17" height="10" viewBox="0 0 17 10" class="fill-current icon">
+                <path
+                  d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                  fill="#3056D3"
+                  stroke="#3056D3"
+                />
+              </svg>
+            </div>
+            <div class="w-full">
+              <h4 class="text-lg font-semibold text-black">How long we deliver your first blog post?</h4>
+            </div>
+          </button>
+          <div x-show="openFaq1" class="faq-content pl-[62px]">
+            <p class="text-base text-body-color leading-relaxed py-3">
+              It takes 2-3 weeks to get your first blog post ready. That includes the in-depth research & creation of
+              your monthly content marketing strategy that we do before writing your first blog post, Ipsum available .
+            </p>
+          </div>
+        </div>
+        <div class="single-faq w-full bg-white border border-[#F3F4FE] rounded-lg p-4 sm:p-8 lg:px-6 xl:px-8 mb-8">
+          <button class="faq-btn flex w-full text-left" @click="openFaq2 = !openFaq2">
+            <div
+              class="w-full max-w-[40px] h-10 flex items-center justify-center rounded-lg bg-primary text-primary bg-opacity-5 mr-5"
+            >
+              <svg width="17" height="10" viewBox="0 0 17 10" class="fill-current icon">
+                <path
+                  d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                  fill="#3056D3"
+                  stroke="#3056D3"
+                />
+              </svg>
+            </div>
+            <div class="w-full">
+              <h4 class="text-lg font-semibold text-black">How long we deliver your first blog post?</h4>
+            </div>
+          </button>
+          <div x-show="openFaq2" class="faq-content pl-[62px]">
+            <p class="text-base text-body-color leading-relaxed py-3">
+              It takes 2-3 weeks to get your first blog post ready. That includes the in-depth research & creation of
+              your monthly content marketing strategy that we do before writing your first blog post, Ipsum available .
+            </p>
+          </div>
+        </div>
+        <div class="single-faq w-full bg-white border border-[#F3F4FE] rounded-lg p-4 sm:p-8 lg:px-6 xl:px-8 mb-8">
+          <button class="faq-btn flex w-full text-left" @click="openFaq3 = !openFaq3">
+            <div
+              class="w-full max-w-[40px] h-10 flex items-center justify-center rounded-lg bg-primary text-primary bg-opacity-5 mr-5"
+            >
+              <svg width="17" height="10" viewBox="0 0 17 10" class="fill-current icon">
+                <path
+                  d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                  fill="#3056D3"
+                  stroke="#3056D3"
+                />
+              </svg>
+            </div>
+            <div class="w-full">
+              <h4 class="text-lg font-semibold text-black">How long we deliver your first blog post?</h4>
+            </div>
+          </button>
+          <div x-show="openFaq3" class="faq-content pl-[62px]">
+            <p class="text-base text-body-color leading-relaxed py-3">
+              It takes 2-3 weeks to get your first blog post ready. That includes the in-depth research & creation of
+              your monthly content marketing strategy that we do before writing your first blog post, Ipsum available .
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="w-full lg:w-1/2 px-4">
+        <div class="single-faq w-full bg-white border border-[#F3F4FE] rounded-lg p-4 sm:p-8 lg:px-6 xl:px-8 mb-8">
+          <button class="faq-btn flex w-full text-left" @click="openFaq4 = !openFaq4">
+            <div
+              class="w-full max-w-[40px] h-10 flex items-center justify-center rounded-lg bg-primary text-primary bg-opacity-5 mr-5"
+            >
+              <svg width="17" height="10" viewBox="0 0 17 10" class="fill-current icon">
+                <path
+                  d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                  fill="#3056D3"
+                  stroke="#3056D3"
+                />
+              </svg>
+            </div>
+            <div class="w-full">
+              <h4 class="text-lg font-semibold text-black">How long we deliver your first blog post?</h4>
+            </div>
+          </button>
+          <div x-show="openFaq4" class="faq-content pl-[62px]">
+            <p class="text-base text-body-color leading-relaxed py-3">
+              It takes 2-3 weeks to get your first blog post ready. That includes the in-depth research & creation of
+              your monthly content marketing strategy that we do before writing your first blog post, Ipsum available .
+            </p>
+          </div>
+        </div>
+        <div class="single-faq w-full bg-white border border-[#F3F4FE] rounded-lg p-4 sm:p-8 lg:px-6 xl:px-8 mb-8">
+          <button class="faq-btn flex w-full text-left" @click="openFaq5 = !openFaq5">
+            <div
+              class="w-full max-w-[40px] h-10 flex items-center justify-center rounded-lg bg-primary text-primary bg-opacity-5 mr-5"
+            >
+              <svg width="17" height="10" viewBox="0 0 17 10" class="fill-current icon">
+                <path
+                  d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                  fill="#3056D3"
+                  stroke="#3056D3"
+                />
+              </svg>
+            </div>
+            <div class="w-full">
+              <h4 class="text-lg font-semibold text-black">How long we deliver your first blog post?</h4>
+            </div>
+          </button>
+          <div x-show="openFaq5" class="faq-content pl-[62px]">
+            <p class="text-base text-body-color leading-relaxed py-3">
+              It takes 2-3 weeks to get your first blog post ready. That includes the in-depth research & creation of
+              your monthly content marketing strategy that we do before writing your first blog post, Ipsum available .
+            </p>
+          </div>
+        </div>
+        <div class="single-faq w-full bg-white border border-[#F3F4FE] rounded-lg p-4 sm:p-8 lg:px-6 xl:px-8 mb-8">
+          <button class="faq-btn flex w-full text-left" @click="openFaq6 = !openFaq6">
+            <div
+              class="w-full max-w-[40px] h-10 flex items-center justify-center rounded-lg bg-primary text-primary bg-opacity-5 mr-5"
+            >
+              <svg width="17" height="10" viewBox="0 0 17 10" class="fill-current icon">
+                <path
+                  d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                  fill="#3056D3"
+                  stroke="#3056D3"
+                />
+              </svg>
+            </div>
+            <div class="w-full">
+              <h4 class="text-lg font-semibold text-black">How long we deliver your first blog post?</h4>
+            </div>
+          </button>
+          <div x-show="openFaq6" class="faq-content pl-[62px]">
+            <p class="text-base text-body-color leading-relaxed py-3">
+              It takes 2-3 weeks to get your first blog post ready. That includes the in-depth research & creation of
+              your monthly content marketing strategy that we do before writing your first blog post, Ipsum available .
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="absolute bottom-0 right-0 z-[-1]">
+    <svg width="1440" height="886" viewBox="0 0 1440 886" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        opacity="0.5"
+        d="M193.307 -273.321L1480.87 1014.24L1121.85 1373.26C1121.85 1373.26 731.745 983.231 478.513 729.927C225.976 477.317 -165.714 85.6993 -165.714 85.6993L193.307 -273.321Z"
+        fill="url(#paint0_linear)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear"
+          x1="1308.65"
+          y1="1142.58"
+          x2="602.827"
+          y2="-418.681"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#3056D3" stop-opacity="0.36" />
+          <stop offset="1" stop-color="#F5F2FD" stop-opacity="0" />
+          <stop offset="1" stop-color="#F5F2FD" stop-opacity="0.096144" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+</section>