-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adjusting and finishing the animations in the third layout , it looks…
… great !
- Loading branch information
Showing
6 changed files
with
152 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| "use client" | ||
| import Image from "next/image"; | ||
| import { useRef } from "react"; | ||
| import gsap from "gsap"; | ||
| import { useGSAP } from "@gsap/react"; | ||
| import SplitText from "gsap-trial/SplitText" ; | ||
|
|
||
| gsap.registerPlugin(useGSAP); | ||
| gsap.registerPlugin(SplitText) ; | ||
|
|
||
| export default function AiText(){ | ||
| const text = useRef(null) ; | ||
| const aiAvatar = useRef(null) ; | ||
|
|
||
| useGSAP(() => { | ||
| var splitText = new SplitText(text.current,{type: "chars"}); | ||
| const tl = gsap.timeline() ; | ||
| tl.from(aiAvatar.current,{ | ||
| autoAlpha: 0 , | ||
| y:30 , | ||
| ease: "power2.out" , | ||
| duration: 0.4 , | ||
| },"+=1.3").from(splitText.chars ,{ | ||
| autoAlpha: 0 , | ||
| stagger: 0.02 , | ||
| }) | ||
|
|
||
| }) | ||
| return( | ||
| <div className="max-w-[400px] flex items-start gap-4 "> | ||
| <Image src={"aiAvatar.svg"} alt={"avatar for ai"} width={28} height={28} ref={aiAvatar} /> | ||
| <div className=" flex-1 text-white/70 text-[16px] leading-5 tracking-[-0.32px] " ref={text}>Absolutely, I can help with that! I've just scoured the internet for potential leads that align with our targets.</div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,54 @@ | ||
| "use client" | ||
| import Image from 'next/image' | ||
| import { gsap } from 'gsap'; | ||
| import Cards from "../ui/cards"; | ||
| import Text from "../ui/aiText"; | ||
| import Prompt from "../ui/prompt"; | ||
| import AiText from "../ui/aiText"; | ||
| import { useRef } from "react"; | ||
| import {useGSAP} from '@gsap/react' | ||
| import gsap from "gsap"; | ||
| import { useGSAP } from "@gsap/react"; | ||
| gsap.registerPlugin(useGSAP); | ||
|
|
||
| interface CardProps{ | ||
| title: string ; | ||
| comment: string ; | ||
| src: string ; | ||
| classname: string ; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| export default function Card({title , comment , src , classname}: CardProps){ | ||
| export default function Card(){ | ||
| const container = useRef(null) ; | ||
|
|
||
| useGSAP(()=>{ | ||
| const tl = gsap.timeline() ; | ||
| tl.from(container.current,{ | ||
| autoAlpha: 0 , | ||
| y:200 , | ||
| ease: "power2.out" , | ||
| duration: 1 , | ||
| }).from(".date",{ | ||
| autoAlpha: 0, | ||
| duration:0.8 , | ||
| ease: "power2.out" , | ||
| y:-20 , | ||
| }).from(".shape",{ | ||
| autoAlpha: 0, | ||
| duration:0.8 , | ||
| ease: "power2.out" , | ||
| }) | ||
|
|
||
| }) ; | ||
|
|
||
| }) | ||
| return( | ||
| <div ref={container}> | ||
| <div className={` ${classname} w-[232px] h-[248px] px-[14px] pt-[20px] z-10 shrink-0 rounded-2xl border border-white/15 bg-gradient-to-b from-[#1c1926f5] from-[-10.57%] to-[#000000f5] to-133.78% shadow-[0px_5px_4px_-1px_rgba(0, 0, 0, 0.15), 0px_0px_20px_0px_rgba(255, 255, 255, 0.03)] hover:transform hover:transition hover:duration-700 hover:ease-in-out hover:translate-y-[-15px] cursor-pointer `}> | ||
| <div className="flex flex-col gap-[14px] "> | ||
| <div className=" pl-[9.16px] inline-flex items-center gap-[10.74px] "> | ||
| <Image src={src} alt={""} width={36} height={36}/> | ||
| <div className={`flex flex-col items-start `}> | ||
| <div className="text-[16px] font-medium leading-5 tracking-[-0.32px] text-white/90">Bryn Booker</div> | ||
| <div className="text-[12px] font-normal leading-[16px] tracking-[-0.12px] text-white/50 ">CEO @bookerai</div> | ||
| </div> | ||
| <div className="w-full relative flex flex-col items-center justify-center mt-[64px]" ref={container}> | ||
| <div className="absolute shape top-[100px] w-[588px] h-[323px] shrink-0 rounded-[16px] bg-[#5458dfb3] blur-[242px] -z-10"></div> | ||
| <div className="max-w-[631px] w-full h-[340px] shrink-0 rounded-2xl border border-white/15 bg-gradient-to-b from-[#1c1926f5] from-[-10.57%] to-[#000000f5] to-133.78% shadow-[0px_5px_4px_-1px_rgba(0, 0, 0, 0.15), 0px_0px_20px_0px_rgba(255, 255, 255, 0.03)]"> | ||
| <div className="flex flex-col gap-[26px] items-start "> | ||
| <div className="px-[60px] pt-[31px] w-full flex flex-col gap-[23px] "> | ||
| <div className="text-center date text-[13px] font-medium leading-5 tracking-[-0.26px] text-white/80 ">Today <span className="text-white/50">04:20 PM</span></div> | ||
| <Prompt /> | ||
| <AiText /> | ||
| </div> | ||
| <div className="flex items-start gap-[21px] ml-[-60px]"> | ||
| <Cards title={"Bryn Booker"} comment={"CEO @bookerai"} src={"cardAvatar1.svg"} classname={"-rotate-2 hover:rotate-[-4deg] "} /> | ||
| <Cards title={"Drik Horton"} comment={"Founder of @horton"} src={"cardAvatar2.svg"} classname={"rotate-1 hover:rotate-[0deg] "} /> | ||
| <Cards title={"Adam Kramer"} comment={"Founder of Listup.ai"} src={"cardAvatar3.svg"} classname={"hover:rotate-[4deg] rotate-3 "}/> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| <div className={`w-[208px] h-[52px] shrink-0 rounded-md bg-[#ffffff08] `}></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| "use client" | ||
| import Image from 'next/image' | ||
| import { gsap } from 'gsap'; | ||
| import { useRef } from "react"; | ||
| import {useGSAP} from '@gsap/react' ; | ||
| gsap.registerPlugin(useGSAP); | ||
|
|
||
| interface CardProps{ | ||
| title: string ; | ||
| comment: string ; | ||
| src: string ; | ||
| classname: string ; | ||
| } | ||
|
|
||
| export default function Cards({title , comment , src , classname}: CardProps){ | ||
| const card = useRef(null) ; | ||
| useGSAP(()=>{ | ||
| const tl = gsap.timeline() ; | ||
| tl.from(card.current,{ | ||
| duration: 1 , | ||
| autoAlpha: 0, | ||
| y:90 , | ||
| ease: "power2.out" , | ||
| },"+=3") | ||
| }) | ||
| return( | ||
| <div ref={card} > | ||
| <div className={`cards ${classname} w-[232px] h-[248px] px-[14px] pt-[20px] z-10 shrink-0 rounded-2xl border border-white/15 bg-gradient-to-b from-[#1c1926f5] from-[-10.57%] to-[#000000f5] to-133.78% shadow-[0px_5px_4px_-1px_rgba(0, 0, 0, 0.15), 0px_0px_20px_0px_rgba(255, 255, 255, 0.03)] hover:transform hover:transition hover:duration-700 hover:ease-in-out hover:translate-y-[-15px] cursor-pointer `}> | ||
| <div className="flex flex-col gap-[14px] "> | ||
| <div className=" pl-[9.16px] inline-flex items-center gap-[10.74px] "> | ||
| <Image src={src} alt={""} width={36} height={36}/> | ||
| <div className={`flex flex-col items-start `}> | ||
| <div className="text-[16px] font-medium leading-5 tracking-[-0.32px] text-white/90">{title}</div> | ||
| <div className="text-[12px] font-normal leading-[16px] tracking-[-0.12px] text-white/50 ">{comment}</div> | ||
| </div> | ||
| </div> | ||
| <div className={`w-[208px] h-[52px] shrink-0 rounded-md bg-[#ffffff08] `}></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| "use client" | ||
| import { useRef } from "react"; | ||
| import gsap from "gsap"; | ||
| import { useGSAP } from "@gsap/react"; | ||
| import Image from "next/image" ; | ||
| gsap.registerPlugin(useGSAP); | ||
|
|
||
| export default function Prompt(){ | ||
| const prompt = useRef(null) ; | ||
|
|
||
| useGSAP(()=>{ | ||
| const tl = gsap.timeline() ; | ||
| tl.from(prompt.current,{ | ||
| autoAlpha: 0 , | ||
| y: 100 , | ||
| duration: 0.4 , | ||
| ease: "power2.out", | ||
| },"+=0.96") | ||
| }) | ||
|
|
||
| return( | ||
| <div className="pt-[5px] inline-flex items-center gap-4 pl-1 " ref={prompt}> | ||
| <div className="textAnimate max-w-[430px] w-full text-right text-[16px] font-normal leading-5 tracking-[-0.32px] text-white/90 ">I need some leads!</div> | ||
| <Image src={"avatar.svg"} alt={"avatarLogoEmpty"} width={28} height={28} className="avatarAnimate"/> | ||
| </div> | ||
| ) | ||
| } |
This file was deleted.
Oops, something went wrong.