added featn

besoeasy · Dec 6, 2023 · 04e82c2 · 04e82c2
1 parent f1f8776
commit 04e82c2
Show file tree

Hide file tree

Showing 10 changed files with 446 additions and 0 deletions.
diff --git a/components/feature/featn1.html b/components/feature/featn1.html
@@ -0,0 +1,30 @@
+<section class="py-24 lg:py-28 overflow-hidden">
+    <div class="container px-4 mx-auto">
+      <div class="flex flex-wrap -m-8">
+        <div class="w-full md:w-1/3 p-8">
+          <div class="max-w-xs mx-auto text-center">
+            <img class="mx-auto mb-9" src="https://shuffle.dev/basko-assets/images/features/customize.png" alt="">
+            <h3 class="mb-4 text-xl font-semibold tracking-tight">Customize As Needed</h3>
+            <p class="mb-8 tracking-tight">We consider all the drivers of change gives you the blocks & components you need to change to create.</p>
+            <a class="font-semibold text-indigo-500 hover:text-indigo-600 tracking-tight transition duration-200" href="#">Start Customizing</a>
+          </div>
+        </div>
+        <div class="w-full md:w-1/3 p-8">
+          <div class="max-w-xs mx-auto text-center">
+            <img class="mx-auto mb-9" src="https://shuffle.dev/basko-assets/images/features/smart.png" alt="">
+            <h3 class="mb-4 text-xl font-semibold tracking-tight">Fits Existing Brand</h3>
+            <p class="mb-8 tracking-tight">We consider all the drivers of change gives you the blocks & components you need to change to create.</p>
+            <a class="font-semibold text-indigo-500 hover:text-indigo-600 tracking-tight transition duration-200" href="#">Grow Brand</a>
+          </div>
+        </div>
+        <div class="w-full md:w-1/3 p-8">
+          <div class="max-w-xs mx-auto text-center">
+            <img class="mx-auto mb-9" src="https://shuffle.dev/basko-assets/images/features/design.png" alt="">
+            <h3 class="mb-4 text-xl font-semibold tracking-tight">Multi-layer Design</h3>
+            <p class="mb-8 tracking-tight">We consider all the drivers of change gives you the blocks & components you need to change to create.</p>
+            <a class="font-semibold text-indigo-500 hover:text-indigo-600 tracking-tight transition duration-200" href="#">Start Designing</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
diff --git a/components/feature/featn10.html b/components/feature/featn10.html
@@ -0,0 +1,39 @@
+<section class="overflow-hidden py-24 lg:pb-28">
+    <div class="container mx-auto px-4">
+      <div class="mb-24 max-w-xl">
+        <h2 class="font-heading mb-8 text-6xl tracking-tighter">Engage your target audience and build brand</h2>
+        <a class="inline-flex items-center rounded-lg bg-indigo-500 px-5 py-4 font-semibold tracking-tight text-white transition duration-300 hover:bg-indigo-600 focus:ring-4 focus:ring-indigo-300" href="#">Explore Snippets</a>
+      </div>
+      <div class="-m-8 flex flex-wrap">
+        <div class="w-full p-8 md:w-1/2 lg:w-1/4">
+          <div class="md:max-w-xs">
+            <img class="mb-6" src="https://shuffle.dev/basko-assets/images/features/work.png" alt="" />
+            <h3 class="mb-4 text-xl font-semibold tracking-tight">Save works</h3>
+            <p class="tracking-tight">We consider all the drivers change gives you blocks up components for it on time.</p>
+          </div>
+        </div>
+        <div class="w-full p-8 md:w-1/2 lg:w-1/4">
+          <div class="md:max-w-xs">
+            <img class="mb-6" src="https://shuffle.dev/basko-assets/images/features/message.png" alt="" />
+            <h3 class="mb-4 text-xl font-semibold tracking-tight">Communicate faster</h3>
+            <p class="tracking-tight">We consider all the drivers change gives you blocks up components for it on time.</p>
+          </div>
+        </div>
+        <div class="w-full p-8 md:w-1/2 lg:w-1/4">
+          <div class="md:max-w-xs">
+            <img class="mb-6" src="https://shuffle.dev/basko-assets/images/features/voice.png" alt="" />
+            <h3 class="mb-4 text-xl font-semibold tracking-tight">Share more</h3>
+            <p class="tracking-tight">We consider all the drivers change gives you blocks up components for it on time.</p>
+          </div>
+        </div>
+        <div class="w-full p-8 md:w-1/2 lg:w-1/4">
+          <div class="md:max-w-xs">
+            <img class="mb-6" src="https://shuffle.dev/basko-assets/images/features/brands.png" alt="" />
+            <h3 class="mb-4 text-xl font-semibold tracking-tight">Brand value</h3>
+            <p class="tracking-tight">We consider all the drivers change gives you blocks up components for it on time.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
diff --git a/components/feature/featn2.html b/components/feature/featn2.html
@@ -0,0 +1,25 @@
+<section class="py-24 lg:py-40 overflow-hidden">
+    <div class="container px-4 mx-auto">
+      <div class="flex flex-wrap items-center -m-8">
+        <div class="w-full md:w-1/2 p-8">
+          <div class="max-w-max mx-auto">
+            <img class="transform hover:-translate-y-2 transition duration-500" src="https://shuffle.dev/basko-assets/images/features/transaction.png" alt="">
+          </div>
+        </div>
+        <div class="w-full md:w-1/2 p-8">
+          <div class="md:max-w-md">
+            <div class="flex flex-wrap -m-6">
+              <div class="w-auto p-6">
+                <h3 class="mb-4 text-3xl font-semibold tracking-tighter" style="letter-spacing: -0.5px;">Secured Payments</h3>
+                <p class="tracking-tight">Use and re-use tons of responsive sections to create the perfect layout. Sections are organised into convenientmcategories.</p>
+              </div>
+              <div class="w-auto p-6">
+                <h3 class="mb-4 text-3xl font-semibold tracking-tighter" style="letter-spacing: -0.5px;">Individual Customer Profile</h3>
+                <p class="tracking-tight">Use and re-use tons of responsive sections to create the perfect layout. Sections are organised into convenientmcategories.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
diff --git a/components/feature/featn3.html b/components/feature/featn3.html
@@ -0,0 +1,28 @@
+<section class="py-24 lg:pb-28 bg-black overflow-hidden">
+    <div class="container px-4 mx-auto">
+      <h1 class="font-heading mb-24 text-6xl text-white text-center tracking-tighter">An overview of Basko features</h1>
+      <div class="flex flex-wrap items-end -m-8">
+        <div class="w-full md:w-1/3 p-8">
+          <div class="text-center">
+            <img class="mb-10 mx-auto transform hover:-translate-y-2 transition duration-500" src="https://shuffle.dev/basko-assets/images/features/card1.png" alt="">
+            <h3 class="mb-4 text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">Tracking</h3>
+            <p class="text-gray-300 tracking-tight max-w-xs mx-auto">Use and re-use tons of responsive sections to create the perfect layout. Sections.</p>
+          </div>
+        </div>
+        <div class="w-full md:w-1/3 p-8">
+          <div class="text-center">
+            <img class="mb-10 mx-auto transform hover:-translate-y-2 transition duration-500" src="https://shuffle.dev/basko-assets/images/features/report.png" alt="">
+            <h3 class="mb-4 text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">Report</h3>
+            <p class="text-gray-300 tracking-tight max-w-xs mx-auto">Use and re-use tons of responsive sections to create the perfect layout. Sections.</p>
+          </div>
+        </div>
+        <div class="w-full md:w-1/3 p-8">
+          <div class="text-center">
+            <img class="mx-auto transform hover:-translate-y-2 transition duration-500" src="https://shuffle.dev/basko-assets/images/features/chat.png" alt="">
+            <h3 class="mb-4 text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">Chat</h3>
+            <p class="text-gray-300 tracking-tight max-w-xs mx-auto">Use and re-use tons of responsive sections to create the perfect layout. Sections.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
diff --git a/components/feature/featn4.html b/components/feature/featn4.html
@@ -0,0 +1,27 @@
+<section class="py-24 lg:py-44 overflow-hidden">
+    <div class="container px-4 mx-auto">
+      <div class="flex flex-wrap lg:items-center -m-8">
+        <div class="w-full md:w-1/2 p-8">
+          <div class="md:max-w-xl">
+            <h2 class="font-heading mb-6 text-6xl tracking-tighter">Boost your brand's visibility and reach</h2>
+            <p class="mb-20 tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are firmly of organised into the perfect start.</p>
+            <div class="flex flex-wrap -m-6">
+              <div class="w-full md:w-1/2 p-6">
+                <h3 class="mb-2 text-xl font-semibold tracking-tight">Transactions</h3>
+                <p class="tracking-tight">Use and re-use tons of responsive sections to create the perfect layout. Sections are organised into convenientmcategories.</p>
+              </div>
+              <div class="w-full md:w-1/2 p-6">
+                <h3 class="mb-2 text-xl font-semibold tracking-tight">Summaries</h3>
+                <p class="tracking-tight">Use and re-use tons of responsive sections to create the perfect layout. Sections are organised into convenientmcategories.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="w-full md:w-1/2 p-8">
+          <div class="max-w-max mx-auto">
+            <img class="transform hover:-translate-y-2 transition duration-500" src="https://shuffle.dev/basko-assets/images/features/payment.png" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
diff --git a/components/feature/featn5.html b/components/feature/featn5.html
@@ -0,0 +1,27 @@
+<section class="py-24 lg:py-44 overflow-hidden">
+    <div class="container px-4 mx-auto">
+      <div class="flex flex-wrap lg:items-center -m-8">
+        <div class="w-full md:w-1/2 p-8">
+          <div class="md:max-w-xl">
+            <h2 class="font-heading mb-6 text-6xl tracking-tighter">Boost your brand's visibility and reach</h2>
+            <p class="mb-20 tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are firmly of organised into the perfect start.</p>
+            <div class="flex flex-wrap -m-6">
+              <div class="w-full md:w-1/2 p-6">
+                <h3 class="mb-2 text-xl font-semibold tracking-tight">Transactions</h3>
+                <p class="tracking-tight">Use and re-use tons of responsive sections to create the perfect layout. Sections are organised into convenientmcategories.</p>
+              </div>
+              <div class="w-full md:w-1/2 p-6">
+                <h3 class="mb-2 text-xl font-semibold tracking-tight">Summaries</h3>
+                <p class="tracking-tight">Use and re-use tons of responsive sections to create the perfect layout. Sections are organised into convenientmcategories.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="w-full md:w-1/2 p-8">
+          <div class="max-w-max mx-auto">
+            <img class="transform hover:-translate-y-2 transition duration-500" src="https://shuffle.dev/basko-assets/images/features/payment.png" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
diff --git a/components/feature/featn6.html b/components/feature/featn6.html
@@ -0,0 +1,32 @@
+<section class="py-24 lg:pt-28 lg:pb-32 bg-gray-100 overflow-hidden">
+    <div class="container px-4 mx-auto">
+      <h2 class="font-heading mb-12 text-6xl tracking-tighter">Exclusive features</h2>
+      <div class="flex flex-wrap -m-3">
+        <div class="w-full md:w-1/2 p-3">
+          <div class="relative p-8 h-full overflow-hidden rounded-lg">
+            <div class="relative z-10 flex flex-col justify-between h-full">
+              <div class="mb-24">
+                <h3 class="font-heading text-5xl md:text-6xl text-white tracking-tighter">Boost your brand's visibility and reach</h3>
+              </div>
+              <div class="block">
+                <p class="mb-6 text-xl text-white tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout.</p>
+                <a class="inline-block px-8 py-4 font-semibold bg-white hover:bg-gray-100 tracking-tight rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-300" href="#">Learn more</a>
+              </div>
+            </div>
+            <img class="absolute top-0 left-0 w-full h-full object-cover" src="https://shuffle.dev/basko-assets/images/features/bg.png" alt="">
+          </div>
+        </div>
+        <div class="w-full md:w-1/2 p-3">
+          <div class="flex flex-col justify-between p-8 h-full bg-black overflow-hidden rounded-lg">
+            <div class="mb-24">
+              <h3 class="font-heading text-5xl md:text-6xl text-white tracking-tighter">Maximize your ROI with Basko.</h3>
+            </div>
+            <div class="block">
+              <p class="mb-6 text-xl text-white tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout.</p>
+              <a class="inline-block px-8 py-4 text-white font-semibold bg-gray-700 hover:bg-gray-800 tracking-tight rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-300" href="#">Learn more</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
diff --git a/components/feature/featn7.html b/components/feature/featn7.html
@@ -0,0 +1,66 @@
+<section class="py-24 lg:py-32 bg-gray-100 overflow-hidden">
+    <div class="container px-4 mx-auto">
+      <div class="flex flex-wrap lg:items-center -m-8">
+        <div class="w-full md:w-1/2 p-8">
+          <div class="max-w-max mx-auto">
+            <img class="transform hover:-translate-y-2 transition duration-500" src="https://shuffle.dev/basko-assets/images/features/recent-transaction.png" alt="">
+          </div>
+        </div>
+        <div class="w-full md:w-1/2 p-8">
+          <div class="md:max-w-xl">
+            <h2 class="font-heading mb-6 text-6xl tracking-tighter">Boost your brand's visibility and reach</h2>
+            <p class="mb-20 text-xl tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are firmly of organised into the perfect starting categories.</p>
+            <div class="max-w-md">
+              <h3 class="mb-8 text-xl font-semibold tracking-tight">A snapshot of Basko’s features:</h3>
+              <div class="flex flex-wrap justify-between -m-2">
+                <div class="w-auto p-2">
+                  <ul class="-m-2">
+                    <li class="flex items-center p-2">
+                      <svg class="mr-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M4.58398 11.917L8.25065 15.5837L17.4173 6.41699" stroke="#171A1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                      </svg>
+                      <span class="font-medium tracking-tight">Faster Payment</span>
+                    </li>
+                    <li class="flex items-center p-2">
+                      <svg class="mr-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M4.58398 11.917L8.25065 15.5837L17.4173 6.41699" stroke="#171A1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                      </svg>
+                      <span class="font-medium tracking-tight">Individual Payment</span>
+                    </li>
+                    <li class="flex items-center p-2">
+                      <svg class="mr-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M4.58398 11.917L8.25065 15.5837L17.4173 6.41699" stroke="#171A1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                      </svg>
+                      <span class="font-medium tracking-tight">User Dashboard</span>
+                    </li>
+                  </ul>
+                </div>
+                <div class="w-auto p-2">
+                  <ul class="-m-2">
+                    <li class="flex items-center p-2">
+                      <svg class="mr-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M4.58398 11.917L8.25065 15.5837L17.4173 6.41699" stroke="#171A1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                      </svg>
+                      <span class="font-medium tracking-tight">Faster Payment</span>
+                    </li>
+                    <li class="flex items-center p-2">
+                      <svg class="mr-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M4.58398 11.917L8.25065 15.5837L17.4173 6.41699" stroke="#171A1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                      </svg>
+                      <span class="font-medium tracking-tight">Individual Payment</span>
+                    </li>
+                    <li class="flex items-center p-2">
+                      <svg class="mr-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M4.58398 11.917L8.25065 15.5837L17.4173 6.41699" stroke="#171A1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                      </svg>
+                      <span class="font-medium tracking-tight">User Dashboard</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>