Skip to content

Update masthead illustration #28

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.

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

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
68 changes: 57 additions & 11 deletions components/MastHead.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import React, { useState } from 'react';
import Link from "next/link"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBoxOpen, faBrain } from '@fortawesome/free-solid-svg-icons'
import { motion } from "framer-motion"
import Image from 'next/image';

Expand Down Expand Up @@ -40,17 +38,65 @@ export default function Home() {
repeatDelay: 0,
}}
>
<Image
className="invert text-center inline"
priority
src="/images/favicon.svg"
height={64}
width={64}
alt="Large Language Model"
/>
<Image
className="invert text-center inline translate-x-full"
src="/images/bubble.svg"
height={85}
width={85}
alt="Bubble"
style={{ transform: 'translate(100px, 0px)' }}
/>
<Image
className="invert text-center inline"
src="/images/favicon.svg"
height={85}
width={85}
alt="Large Language Model"
style={{ transform: 'translate(-50px, 50px)' }}
/>

</motion.div>
<FontAwesomeIcon icon={faBoxOpen} className="text-5xl" />
<motion.div
animate={{
scale: [0.9, 1, 0.9], // Zooms in (scale: 1.2) and out (scale: 1) in a loop
}}
transition={{
duration: 2,
ease: 'easeInOut',
repeat: Infinity, // Repeat the animation indefinitely
}}
>
<Image
className="invert text-center inline"
src="/images/eye.svg"
height={40}
width={40}
alt="Eye"
style={{ transform: 'translate(50px, -100px)' }}
/>
</motion.div>
<motion.div
animate={{
scale: [1, 0.9, 1], // Zooms in (scale: 1.2) and out (scale: 1) in a loop
}}
transition={{
duration: 2,
ease: 'easeInOut',
repeat: Infinity, // Repeat the animation indefinitely
}}
>
<Image
className="invert text-center inline"
src="/images/hand.svg"
height={30}
width={30}
alt="Hand"
style={{ transform: 'translate(80px, -120px)' }}
/>
</motion.div>
</div>


<h2 className="text-4xl my-10 font-extralight">
AI for Humans.
</h2>
Expand Down
1 change: 1 addition & 0 deletions public/images/bubble.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/images/eye.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/images/hand.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 60 additions & 0 deletions public/images/new_masthead.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.