Made the footer #55
Made the footer #55
Conversation
Update Images to Webp
Update Images to Webp
src/components/Footer.tsx
Outdated
| <Border /> | ||
| <div className="bg-hsa-gray-200">Footer</div> | ||
| </> | ||
| <div className="bg-hsa-gray-200 pb-6 pt-6"> |
src/components/Footer.tsx
Outdated
| <div className="bg-hsa-gray-200">Footer</div> | ||
| </> | ||
| <div className="bg-hsa-gray-200 pb-6 pt-6"> | ||
| <div className="sm:px-15 flex flex-row justify-between px-8"> |
There was a problem hiding this comment.
no need to add flex-row, it's the default when declaring flex. make sure to remove the other flex-rows too
src/components/Footer.tsx
Outdated
| import Instagram from "@/public/assets/insta.webp"; | ||
| import Image2 from "@/public/assets/image2.webp"; | ||
| import Linktree from "@/public/assets/Linktree.webp"; | ||
| import Contact from "@/public/assets/contact.webp"; |
There was a problem hiding this comment.
unless you're importing pictures, assets should be exported from Figma as SVG. But you shouldn't export the logos, get Instagram and Facebook from Lucide. For the Linktree logo use this link:
https://brandfetch.com/linktr.ee?view=library&library=default&collection=logos
|
Also you forgot to add the asset above the gray footer bar: |
… into daniyal/footer
|
|
src/components/Footer.tsx
Outdated
| <Image src={Image2} alt="Image2" className="w-10 sm:w-14" /> | ||
| </div> | ||
| <div className="flex w-[50%] justify-end gap-3 pb-1 pt-3 font-semibold text-white"> | ||
| <div className="pb-4 text-xl duration-300 hover:scale-110"> |
There was a problem hiding this comment.
no need for hover effects on this
public/assets/Image2.svg
Outdated
There was a problem hiding this comment.
a complex image like this shouldn't be an svg, look at the source code and you'll kinda see why
redownload this from the figma as a png and compress it with tinypng, then import that instead
keep the name of the image lowercase, also something more descriptive like footerImage.webp instead for code quality purposes :]
public/assets/Linktree.svg
Outdated
There was a problem hiding this comment.
also lowercase name
src/components/Footer.tsx
Outdated
| > | ||
| <Facebook /> | ||
| </Link> | ||
| <Link href="linktr.ee/hsaucr" target="_blank" className="w-5"> |
There was a problem hiding this comment.
try moving the image hover className stuff to the link here
I didn't add any link to the contact us logo and the starting icon as I don't know what to attach.