Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

correction of icons and improvement of footer section #23 #261

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

correction of icons and improvement of footer section #23 #261

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 44 additions & 15 deletions site/components/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,52 @@ const Footer = () => {
<p className="text-sm text-gray-400 mt-2">&copy; {new Date().getFullYear()} Your Company. All rights reserved.</p>
</div>

{/* Right Section: Download the App */}
<div className="flex space-x-4 md:order-3">
<Link href="https://play.google.com/store" target="_blank">
<div className="flex items-center px-4 py-2 bg-white text-gray-800 rounded-lg hover:bg-blue-500 hover:text-white hover:shadow-xl transition-all duration-300 ease-in-out">
<Play className="w-5 h-5 mr-2 transition-transform duration-300 ease-in-out hover:scale-110" />
<span className="text-sm font-semibold">Google Play</span>
</div>
</Link>

<Link href="https://www.apple.com/app-store/" target="_blank">
<div className="flex items-center px-4 py-2 bg-white text-gray-800 rounded-lg hover:bg-blue-500 hover:text-white hover:shadow-xl transition-all duration-300 ease-in-out">
<Apple className="w-5 h-5 mr-2 transition-transform duration-300 ease-in-out hover:scale-110" />
<span className="text-sm font-semibold">App Store</span>
</div>
</Link>
{/* Center Section: App Store Links (Optional) */}
<div className="flex flex-col md:flex-row items-center md:items-start space-y-4 md:space-y-0 space-x-0 md:space-x-4 md:order-3 p-4 bg-black-800 rounded-lg">
<div className="flex space-x-4">
<Link href="https://play.google.com/store" target="_blank">
<button type="button" class="flex items-center justify-center w-48 text-white border-black bg-gray rounded-lg h-14">
<div class="mr-3">
<svg viewBox="30 336.7 120.9 129.2" width="30">
<path fill="#FFD400"
d="M119.2,421.2c15.3-8.4,27-14.8,28-15.3c3.2-1.7,6.5-6.2,0-9.7 c-2.1-1.1-13.4-7.3-28-15.3l-20.1,20.2L119.2,421.2z">
</path>
<path fill="#FF3333"
d="M99.1,401.1l-64.2,64.7c1.5,0.2,3.2-0.2,5.2-1.3 c4.2-2.3,48.8-26.7,79.1-43.3L99.1,401.1L99.1,401.1z">
</path>
<path fill="#48FF48" d="M99.1,401.1l20.1-20.2c0,0-74.6-40.7-79.1-43.1 c-1.7-1-3.6-1.3-5.3-1L99.1,401.1z">
</path>
<path fill="#3BCCFF"
d="M99.1,401.1l-64.3-64.3c-2.6,0.6-4.8,2.9-4.8,7.6 c0,7.5,0,107.5,0,113.8c0,4.3,1.7,7.4,4.9,7.7L99.1,401.1z">
</path>
</svg>
</div>
<div>
<div class="text-xs">
GET IT ON
</div>
<div class="-mt-1 font-sans text-xl font-semibold">
Google Play
</div>
</div>
</button>

</Link>
<Link href="https://www.apple.com/app-store/" target="_blank">
<button href="#" class="flex w-48 h-14 bg-transparent border border-black rounded-xl items-center justify-center">
<div class="mr-3">
<svg viewBox="0 0 384 512" width="30" >
<path fill="currentColor" d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
</svg>
</div>
<div>
<div class="text-xs">Download on the</div>
<div class="text-2xl font-semibold font-sans -mt-1">App Store</div>
</div>
</button>
</Link>
</div>
</div>
{/* Feature: Contact Us */}
<div className="flex flex-col items-start mb-6 md:mb-0">
<h3 className="mb-4 text-lg font-semibold">Contact Us</h3>
Expand Down