.

besoeasy · Dec 13, 2023 · e829f85 · e829f85
1 parent 9500229
commit e829f85
Show file tree

Hide file tree

Showing 4 changed files with 376 additions and 0 deletions.
diff --git a/components/price/pricez1.html b/components/price/pricez1.html
@@ -0,0 +1,49 @@
+<section class="py-10 bg-gray-800 overflow-hidden">
+    <div class="container mx-auto px-4">
+      <div class="py-16 px-8 bg-gray-900 rounded-3xl">
+        <div class="max-w-7xl mx-auto">
+          <div class="flex flex-wrap -m-4 mb-14">
+            <div class="w-full md:w-1/2 p-4">
+              <div class="py-16 px-8 text-center h-full bg-gray-800 rounded-3xl">
+                <div class="flex flex-col justify-between h-full">
+                  <div class="flex-initial mb-10">
+                    <span class="inline-block mb-6 text-sm text-blue-500 font-bold uppercase tracking-widest">Standard</span>
+                    <h2 class="font-heading text-5xl md:text-7xl text-gray-100 font-black tracking-tight">
+                      <span>$32</span>
+                      <span class="text-xl">USD</span>
+                    </h2>
+                    <p class="text-xl text-gray-700 font-bold">per month, paid annually or $20 paid monthly</p>
+                  </div>
+                  <div class="flex-initial">
+                    <div class="flex flex-wrap justify-center -m-2">
+                      <div class="w-full md:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Start 14 days free trial</a></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="w-full md:w-1/2 p-4">
+              <div class="py-16 px-8 text-center h-full bg-gray-800 rounded-3xl">
+                <div class="flex flex-col justify-between h-full">
+                  <div class="flex-initial mb-10">
+                    <span class="inline-block mb-6 text-sm text-blue-500 font-bold uppercase tracking-widest">Standard</span>
+                    <h2 class="font-heading text-5xl md:text-7xl text-gray-100 font-black tracking-tight">
+                      <span>$32</span>
+                      <span class="text-xl">USD</span>
+                    </h2>
+                    <p class="text-xl text-gray-700 font-bold">per month, paid annually or $20 paid monthly</p>
+                  </div>
+                  <div class="flex-initial">
+                    <div class="flex flex-wrap justify-center -m-2">
+                      <div class="w-full md:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Start 14 days free trial</a></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <p class="text-2xl text-gray-500 font-bold text-center max-w-4xl mx-auto">No credit card required. No trial period. Full design and CMS control. Start building websites today.</p>
+        </div>
+      </div>
+    </div>
+  </section>
diff --git a/components/price/pricez2.html b/components/price/pricez2.html
@@ -0,0 +1,153 @@
+<section class="py-16 bg-gray-800 overflow-hidden">
+    <div class="container mx-auto px-4">
+      <div class="mb-12 max-w-2xl mx-auto text-center">
+        <h2 class="font-heading text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Choose a plan that suits you. Grow business fast.</h2>
+      </div>
+      <div class="flex flex-wrap -m-4">
+        <div class="w-full md:w-1/3 p-4">
+          <div class="flex flex-col justify-between p-8 h-full bg-gray-900 rounded-3xl">
+            <div class="flex-initial mb-6">
+              <span class="inline-block mb-6 text-sm text-blue-500 font-bold uppercase tracking-widest">Basic</span>
+              <h2 class="font-heading text-4xl text-gray-100 font-black tracking-tight">Free</h2>
+              <p class="mb-8 text-sm text-gray-700 font-bold">No Credit Card required</p>
+              <ul>
+                <li class="flex items-center mb-4">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8333L7.50033 14.1667L15.8337 5.83333" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-gray-100 font-bold">1 Team Members</p>
+                </li>
+                <li class="flex items-center mb-4">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8333L7.50033 14.1667L15.8337 5.83333" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-gray-100 font-bold">1200+ UI Blocks</p>
+                </li>
+                <li class="flex items-center mb-4">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8333L7.50033 14.1667L15.8337 5.83333" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-gray-100 font-bold">10 GB Cloud Storage</p>
+                </li>
+                <li class="flex items-center mb-4">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8335L7.50033 14.1668L15.8337 5.8335" stroke="#374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-gray-700 font-bold">Individual Email Account</p>
+                </li>
+                <li class="flex items-center">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8335L7.50033 14.1668L15.8337 5.8335" stroke="#374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-gray-700 font-bold">Premium Support</p>
+                </li>
+              </ul>
+            </div>
+            <div class="flex-initial">
+              <div class="flex flex-wrap -m-2">
+                <div class="w-full p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-gray-100 font-bold bg-gray-700 hover:bg-gray-900 focus:ring-4 focus:ring-gray-400 rounded-full" href="#">Get Started Now</a></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="w-full md:w-1/3 p-4">
+          <div class="flex flex-col justify-between p-8 h-full bg-blue-500 rounded-3xl">
+            <div class="flex-initial mb-6">
+              <span class="inline-block mb-6 text-sm text-white font-bold uppercase tracking-widest">Standard</span>
+              <h2 class="font-heading text-4xl text-white font-black tracking-tight">
+                <span>$25</span>
+                <span class="text-xl text-blue-400 font-bold">/mo</span>
+              </h2>
+              <p class="mb-8 text-sm text-blue-200 font-bold">Billed Annually</p>
+              <ul>
+                <li class="flex items-center mb-4">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8335L7.50033 14.1668L15.8337 5.8335" stroke="#F3F4F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-gray-100 font-bold">1 Team Members</p>
+                </li>
+                <li class="flex items-center mb-4">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8335L7.50033 14.1668L15.8337 5.8335" stroke="#F3F4F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-gray-100 font-bold">1200+ UI Blocks</p>
+                </li>
+                <li class="flex items-center mb-4">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8335L7.50033 14.1668L15.8337 5.8335" stroke="#F3F4F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-gray-100 font-bold">10 GB Cloud Storage</p>
+                </li>
+                <li class="flex items-center mb-4">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8333L7.50033 14.1667L15.8337 5.83334" stroke="#D1D5DB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-blue-300 font-bold">Individual Email Account</p>
+                </li>
+                <li class="flex items-center">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8333L7.50033 14.1667L15.8337 5.83334" stroke="#D1D5DB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-blue-300 font-bold">Premium Support</p>
+                </li>
+              </ul>
+            </div>
+            <div class="flex-initial">
+              <div class="flex flex-wrap -m-2">
+                <div class="w-full p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-blue-500 font-bold bg-white hover:bg-gray-200 focus:ring-4 focus:ring-gray-300 rounded-full" href="#">Get Started Now</a></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="w-full md:w-1/3 p-4">
+          <div class="flex flex-col justify-between p-8 h-full bg-gray-900 rounded-3xl">
+            <div class="flex-initial mb-6">
+              <span class="inline-block mb-6 text-sm text-blue-500 font-bold uppercase tracking-widest">Pro</span>
+              <h2 class="font-heading text-4xl text-white font-black tracking-tight">
+                <span>$69</span>
+                <span class="text-xl text-gray-500 font-bold">/mo</span>
+              </h2>
+              <p class="mb-8 text-sm text-gray-700 font-bold">Billed Annually</p>
+              <ul>
+                <li class="flex items-center mb-4">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8333L7.50033 14.1667L15.8337 5.83333" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-gray-100 font-bold">1 Team Members</p>
+                </li>
+                <li class="flex items-center mb-4">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8333L7.50033 14.1667L15.8337 5.83333" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-gray-100 font-bold">1200+ UI Blocks</p>
+                </li>
+                <li class="flex items-center mb-4">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8333L7.50033 14.1667L15.8337 5.83333" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-gray-100 font-bold">10 GB Cloud Storage</p>
+                </li>
+                <li class="flex items-center mb-4">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8335L7.50033 14.1668L15.8337 5.8335" stroke="#374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-gray-700 font-bold">Individual Email Account</p>
+                </li>
+                <li class="flex items-center">
+                  <svg class="mr-2.5" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.16699 10.8335L7.50033 14.1668L15.8337 5.8335" stroke="#374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                  <p class="text-gray-700 font-bold">Premium Support</p>
+                </li>
+              </ul>
+            </div>
+            <div class="flex-initial">
+              <div class="flex flex-wrap -m-2">
+                <div class="w-full p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-gray-100 font-bold bg-gray-700 hover:bg-gray-900 focus:ring-4 focus:ring-gray-400 rounded-full" href="#">Get Started Now</a></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
diff --git a/components/price/pricez3.html b/components/price/pricez3.html
@@ -0,0 +1,86 @@
+<section class="py-10 bg-gray-800 overflow-hidden">
+    <div class="container mx-auto px-4">
+      <div class="py-10 px-8 bg-gray-900 rounded-3xl">
+        <div class="max-w-7xl mx-auto">
+          <div class="flex flex-wrap -m-8">
+            <div class="w-full md:w-1/2 p-8">
+              <div class="py-9 md:max-w-md">
+                <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Pricing</span>
+                <h2 class="font-heading mb-4 text-4xl text-gray-100 font-black tracking-tight">Unlimited access to all products</h2>
+                <p class="mb-8 text-gray-500 font-bold">Yearly access to all products with ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
+                <div class="flex flex-wrap -m-2">
+                  <div class="w-auto p-2">
+                    <div class="flex flex-wrap px-3 py-2 bg-white rounded-full">
+                      <div class="w-auto mr-2 pt-1">
+                        <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path d="M8.095 1H3.905C2.085 1 1 2.085 1 3.905V8.09C1 9.915 2.085 11 3.905 11H8.09C9.91 11 10.995 9.915 10.995 8.095V3.905C11 2.085 9.915 1 8.095 1ZM8.39 4.85L5.555 7.685C5.485 7.755 5.39 7.795 5.29 7.795C5.19 7.795 5.095 7.755 5.025 7.685L3.61 6.27C3.465 6.125 3.465 5.885 3.61 5.74C3.755 5.595 3.995 5.595 4.14 5.74L5.29 6.89L7.86 4.32C8.005 4.175 8.245 4.175 8.39 4.32C8.535 4.465 8.535 4.7 8.39 4.85Z" fill="#3B82F6"></path>
+                        </svg>
+                      </div>
+                      <div class="flex-1">
+                        <p class="text-sm text-gray-900 font-bold">Build CSS grid–powered layouts visually</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="w-auto p-2">
+                    <div class="flex flex-wrap px-3 py-2 bg-white rounded-full">
+                      <div class="w-auto mr-2 pt-1">
+                        <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path d="M8.095 1H3.905C2.085 1 1 2.085 1 3.905V8.09C1 9.915 2.085 11 3.905 11H8.09C9.91 11 10.995 9.915 10.995 8.095V3.905C11 2.085 9.915 1 8.095 1ZM8.39 4.85L5.555 7.685C5.485 7.755 5.39 7.795 5.29 7.795C5.19 7.795 5.095 7.755 5.025 7.685L3.61 6.27C3.465 6.125 3.465 5.885 3.61 5.74C3.755 5.595 3.995 5.595 4.14 5.74L5.29 6.89L7.86 4.32C8.005 4.175 8.245 4.175 8.39 4.32C8.535 4.465 8.535 4.7 8.39 4.85Z" fill="#3B82F6"></path>
+                        </svg>
+                      </div>
+                      <div class="flex-1">
+                        <p class="text-sm text-gray-900 font-bold">Responsive images</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="w-auto p-2">
+                    <div class="flex flex-wrap px-3 py-2 bg-white rounded-full">
+                      <div class="w-auto mr-2 pt-1">
+                        <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path d="M8.095 1H3.905C2.085 1 1 2.085 1 3.905V8.09C1 9.915 2.085 11 3.905 11H8.09C9.91 11 10.995 9.915 10.995 8.095V3.905C11 2.085 9.915 1 8.095 1ZM8.39 4.85L5.555 7.685C5.485 7.755 5.39 7.795 5.29 7.795C5.19 7.795 5.095 7.755 5.025 7.685L3.61 6.27C3.465 6.125 3.465 5.885 3.61 5.74C3.755 5.595 3.995 5.595 4.14 5.74L5.29 6.89L7.86 4.32C8.005 4.175 8.245 4.175 8.39 4.32C8.535 4.465 8.535 4.7 8.39 4.85Z" fill="#3B82F6"></path>
+                        </svg>
+                      </div>
+                      <div class="flex-1">
+                        <p class="text-sm text-gray-900 font-bold">Training and onboarding</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="w-auto p-2">
+                    <div class="flex flex-wrap px-3 py-2 bg-white rounded-full">
+                      <div class="w-auto mr-2 pt-1">
+                        <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path d="M8.095 1H3.905C2.085 1 1 2.085 1 3.905V8.09C1 9.915 2.085 11 3.905 11H8.09C9.91 11 10.995 9.915 10.995 8.095V3.905C11 2.085 9.915 1 8.095 1ZM8.39 4.85L5.555 7.685C5.485 7.755 5.39 7.795 5.29 7.795C5.19 7.795 5.095 7.755 5.025 7.685L3.61 6.27C3.465 6.125 3.465 5.885 3.61 5.74C3.755 5.595 3.995 5.595 4.14 5.74L5.29 6.89L7.86 4.32C8.005 4.175 8.245 4.175 8.39 4.32C8.535 4.465 8.535 4.7 8.39 4.85Z" fill="#3B82F6"></path>
+                        </svg>
+                      </div>
+                      <div class="flex-1">
+                        <p class="text-sm text-gray-900 font-bold">Design and develop at the same time</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="w-full md:w-1/2 p-8">
+              <div class="py-24 px-8 text-center h-full bg-gray-800 rounded-3xl">
+                <div class="flex flex-col justify-between h-full">
+                  <div class="flex-initial mb-10">
+                    <span class="inline-block mb-3.5 text-gray-600 font-black uppercase">All updates for one year</span>
+                    <h2 class="font-heading mb-4 text-5xl md:text-7xl text-blue-500 font-black tracking-tight">
+                      <span>$189</span>
+                      <span class="text-xl">USD</span>
+                    </h2>
+                    <p class="text-gray-700 font-bold">per month, paid annually or $20 paid monthly</p>
+                  </div>
+                  <div class="flex-initial">
+                    <div class="flex flex-wrap justify-center -m-2">
+                      <div class="w-full p-2"><a class="block md:max-w-xs mx-auto w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Purchase now</a></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>