added type writer effect and resolved visibility issue
This commit is contained in:
Bhakti
@@ -3,7 +3,7 @@ import React from "react";
|
||||
const Footer = () => {
|
||||
return (
|
||||
<>
|
||||
<footer className=" text-gray-500">
|
||||
<footer className=" text-gray-50">
|
||||
<div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
|
||||
<div className="md:flex md:justify-between">
|
||||
<div className="mb-6 md:mb-0">
|
||||
@@ -20,10 +20,10 @@ const Footer = () => {
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
|
||||
<div>
|
||||
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
|
||||
<h2 className="mb-6 text-sm font-semibold text-gray-50 uppercase dark:text-white">
|
||||
Resources
|
||||
</h2>
|
||||
<ul className="text-gray-500 dark:text-gray-400 font-medium">
|
||||
<ul className="text-gray-50 dark:text-gray-400 font-medium">
|
||||
<li className="mb-4">
|
||||
<a href="https://flowbite.com/" class="hover:underline">
|
||||
Flowbite
|
||||
@@ -37,10 +37,10 @@ const Footer = () => {
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
|
||||
<h2 className="mb-6 text-sm font-semibold text-gray-50 uppercase dark:text-white">
|
||||
Follow us
|
||||
</h2>
|
||||
<ul className="text-gray-500 dark:text-gray-400 font-medium">
|
||||
<ul className="text-gray-50 dark:text-gray-400 font-medium">
|
||||
<li className="mb-4">
|
||||
<a
|
||||
href="https://github.com/themesberg/flowbite"
|
||||
@@ -60,10 +60,10 @@ const Footer = () => {
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
|
||||
<h2 className="mb-6 text-sm font-semibold text-gray-50 uppercase dark:text-white">
|
||||
Legal
|
||||
</h2>
|
||||
<ul className="text-gray-500 dark:text-gray-400 font-medium">
|
||||
<ul className="text-gray-50 dark:text-gray-400 font-medium">
|
||||
<li className="mb-4">
|
||||
<a href="#" className="hover:underline">
|
||||
Privacy Policy
|
||||
@@ -78,7 +78,7 @@ const Footer = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
|
||||
<hr className="my-6 border-gray-50 sm:mx-auto dark:border-gray-700 lg:my-8" />
|
||||
<div className="sm:flex sm:items-center sm:justify-between">
|
||||
<span className="text-sm text-gray-50 sm:text-center dark:text-gray-400">
|
||||
© 2024{" "}
|
||||
|
||||
@@ -2,29 +2,40 @@ import React from "react";
|
||||
import { IoMdContacts } from "react-icons/io";
|
||||
import { FaClock } from "react-icons/fa";
|
||||
import { FaMessage } from "react-icons/fa6";
|
||||
import TypeWriterEffect from "react-typewriter-effect";
|
||||
|
||||
const Testimonial = () => {
|
||||
|
||||
const myRef = document.querySelector('.scrollable-div')
|
||||
return (
|
||||
<>
|
||||
<section className=" py-12 px-2 md:px-32 text-white">
|
||||
<div className="container mx-auto">
|
||||
<div className="text-center">
|
||||
<h2 className="text-xl sm:text-4xl font-bold mb-4">WHY CHOOSE US?</h2>
|
||||
<h1 className="text-3xl sm:text-6xl font-bold mb-4">
|
||||
Record breaking features like never before
|
||||
<section className=" py-12 px-2 md:px-32 text-white">
|
||||
<div className="container mx-auto ">
|
||||
<div className="text-center ">
|
||||
<h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">WHY CHOOSE US?</h2>
|
||||
<h1 className="text-3xl text-center sm:text-6xl text-white drop-shadow-[10px_10px_10px_rgba(0,0,0,0.25)] font-bold mb-4">
|
||||
<TypeWriterEffect
|
||||
width="230"
|
||||
trackWidth="13"
|
||||
scrollArea={myRef}
|
||||
startDelay={100}
|
||||
cursorColor="gray"
|
||||
text="Record breaking features like never before"
|
||||
typeSpeed={100}
|
||||
/>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row justify-around mt-8 h-auto">
|
||||
|
||||
<div class="max-w-sm p-6 backdrop-blur-lg rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||
<svg class="w-7 h-7 text-gray-400 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
|
||||
</svg>
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-600 dark:text-white">Need a help in Claim?</h5>
|
||||
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Need a help in Claim?</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
|
||||
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
|
||||
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
|
||||
See our guideline
|
||||
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||||
@@ -35,13 +46,13 @@ const Testimonial = () => {
|
||||
|
||||
|
||||
<div class="max-w-sm p-6 backdrop-blur-lg rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||
<svg class="w-7 h-7 text-gray-300 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
|
||||
</svg>
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-600 dark:text-white">Need a help in Claim?</h5>
|
||||
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Need a help in Claim?</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
|
||||
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
|
||||
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
|
||||
See our guideline
|
||||
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||||
@@ -51,13 +62,13 @@ const Testimonial = () => {
|
||||
</div>
|
||||
|
||||
<div class="max-w-sm p-6 backdrop-blur-lg rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||
<svg class="w-7 h-7 text-gray-300 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
|
||||
</svg>
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-600 dark:text-white">Need a help in Claim?</h5>
|
||||
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Need a help in Claim?</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
|
||||
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
|
||||
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
|
||||
See our guideline
|
||||
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||||
|
||||
Reference in New Issue
Block a user