diff --git a/src/components/home/Footer.js b/src/components/home/Footer.js index 6b2a8299..b532fba2 100644 --- a/src/components/home/Footer.js +++ b/src/components/home/Footer.js @@ -5,6 +5,7 @@ import { programsNav } from '@/navs/program' import clsx from 'clsx' import Link from 'next/link' import styles from './Footer.module.css' +import MadeInBadge from './MadeInBadge' const footerNav = { 'Getting started': { @@ -146,8 +147,9 @@ export function Footer() { Status

- - +
+ +
diff --git a/src/components/home/MadeInBadge.js b/src/components/home/MadeInBadge.js new file mode 100644 index 00000000..48077897 --- /dev/null +++ b/src/components/home/MadeInBadge.js @@ -0,0 +1,15 @@ +import { IndianFlag } from '@/components/Logos' + +export default function MadeInBadge() { + return ( +
+
+ Made with +
+ in +

India

+ +
+
+ ) +} diff --git a/src/css/main.css b/src/css/main.css index b68d0465..bf4b4832 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -52,3 +52,51 @@ thead tr th { .prose strong { font-weight: 700; } + +/* Heart */ + +.heart { + position: relative; + width: 10px; + height: 10px; + background-color: red; + transform: rotate(45deg) scale(1); + border-radius: 0 0 2px 0; + animation: pumpHeart 1500ms ease-in-out infinite; +} +.heart::before, +.heart::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + background-color: red; +} +.heart::before { + transform: translateY(-50%); +} +.heart::after { + transform: translateX(-50%); +} + +@keyframes pumpHeart { + 0% { + transform: rotate(45deg) scale(1); + } + 50% { + transform: rotate(45deg) scale(1); + } + 60% { + transform: rotate(45deg) scale(1.2); + } + 80% { + transform: rotate(45deg) scale(0.95); + } + 90% { + transform: rotate(45deg) scale(1); + } + 100% { + transform: rotate(45deg) scale(1); + } +}