diff --git a/components/src/components/Footer/index.tsx b/components/src/components/Footer/index.tsx index 05f33917..17d548f9 100644 --- a/components/src/components/Footer/index.tsx +++ b/components/src/components/Footer/index.tsx @@ -1,91 +1,108 @@ import { LogoSVG } from '../Icons/LogoSVG'; -import { discordLink } from '../links'; +import { discordLink, youtubeLink } from '../links'; import './styles.scss'; -// TODO enable this once styling is worked out -const enableSocialIcons = false; - export const Footer = () => { + const currentYear = new Date().getFullYear(); + return ( -
+ ); }; diff --git a/components/src/components/Footer/styles.scss b/components/src/components/Footer/styles.scss index d3d83dc7..b6bef627 100644 --- a/components/src/components/Footer/styles.scss +++ b/components/src/components/Footer/styles.scss @@ -52,3 +52,231 @@ color: var(--vh-color-neutral-04); } } +.vh-footer { + background-color: #111827; + color: #f8f9fa; + padding: 0 0 30px; + width: 100%; + + .ai-banner { + background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); + padding: 50px 20px; + text-align: center; + margin-bottom: 60px; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,0.1)' fill-rule='evenodd'/%3E%3C/svg%3E"); + opacity: 0.3; + } + + .ai-banner-content { + max-width: 800px; + margin: 0 auto; + position: relative; + z-index: 1; + + h2 { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + color: white; + } + + p { + font-size: 1.2rem; + margin-bottom: 2rem; + color: rgba(255, 255, 255, 0.9); + } + + .ai-banner-button { + display: inline-block; + background-color: white; + color: #0d6efd; + font-weight: 600; + padding: 12px 30px; + border-radius: 30px; + text-decoration: none; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + + &:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); + } + } + } + } + + .footer-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + display: flex; + flex-wrap: wrap; + gap: 40px; + + @media (max-width: 992px) { + flex-direction: column; + } + } + + .footer-brand { + flex: 0 0 300px; + + svg { + path { + fill: white; + } + } + + .footer-tagline { + margin: 15px 0; + font-size: 16px; + color: #adb5bd; + max-width: 250px; + line-height: 1.5; + } + + .social-icons { + display: flex; + gap: 15px; + margin-top: 20px; + + a { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.1); + color: white; + font-size: 18px; + transition: all 0.3s ease; + + &:hover { + background-color: var(--vh-color-action-01); + transform: translateY(-3px); + } + } + } + } + + .footer-links-container { + flex: 1; + display: flex; + flex-wrap: wrap; + gap: 40px; + justify-content: space-between; + + @media (max-width: 768px) { + gap: 30px; + } + } + + .footer-links { + min-width: 160px; + + @media (max-width: 576px) { + min-width: 140px; + } + + .footer-links-title { + font-size: 18px; + font-weight: 600; + margin-bottom: 20px; + color: white; + position: relative; + + &::after { + content: ''; + position: absolute; + bottom: -8px; + left: 0; + width: 30px; + height: 3px; + background-color: var(--vh-color-action-01); + border-radius: 2px; + } + } + + ul { + list-style: none; + padding: 0; + margin: 0; + + li { + margin-bottom: 12px; + + a { + color: #adb5bd; + text-decoration: none; + transition: color 0.2s ease; + font-size: 15px; + display: flex; + align-items: center; + + .ai-badge { + background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); + color: white; + font-size: 10px; + font-weight: 700; + padding: 2px 6px; + border-radius: 4px; + margin-right: 8px; + } + + &:hover { + color: white; + } + } + } + } + } + + .footer-bottom { + max-width: 1200px; + margin: 40px auto 0; + padding: 20px 20px 0; + border-top: 1px solid rgba(255, 255, 255, 0.1); + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 20px; + + @media (max-width: 768px) { + flex-direction: column; + text-align: center; + } + } + + .footer-copyright { + color: #6c757d; + font-size: 14px; + } + + .footer-bottom-links { + display: flex; + gap: 20px; + + a { + color: #6c757d; + text-decoration: none; + font-size: 14px; + transition: color 0.2s ease; + + &:hover { + color: white; + } + } + } +} diff --git a/components/src/components/Header/index.tsx b/components/src/components/Header/index.tsx index fed6ba74..573b7f9a 100644 --- a/components/src/components/Header/index.tsx +++ b/components/src/components/Header/index.tsx @@ -148,6 +148,7 @@ export const Header = ({ + AI VizBot Pricing { + return ( +
+
+
+
+ ); +}; + +export default Story;