Skip to content

Commit

Permalink
Add animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@git-create-devben
git-create-devben committed Aug 4, 2024
1 parent cfafafb commit d2f9095
Show file tree
Hide file tree
Showing 9 changed files with 730 additions and 470 deletions.
6 changes: 3 additions & 3 deletions app/chat/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export default function Chat() {
const image = user?.photoURL as string;

return (
<main className="flex h-screen bg-black overflow-hidden">
<main className="flex h-screen bg-[#131314] overflow-hidden">
<FirstVisitPopup />
<div className="hidden lg:block">
<Sidebar />
Expand Down Expand Up @@ -119,7 +119,7 @@ export default function Chat() {
animate={{ x: 0 }}
exit={{ x: "-100%" }}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
className="fixed inset-y-0 left-0 w-64 bg-gray-900 z-50 lg:hidden"
className="fixed inset-y-0 left-0 w-64 bg-[#1e1f20] z-50 lg:hidden"
>
<button
className="absolute top-4 right-4 text-white"
Expand All @@ -133,4 +133,4 @@ export default function Chat() {
</AnimatePresence>
</main>
);
}
}
120 changes: 86 additions & 34 deletions components/CardCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import Image from "next/image";
import Logo from "@/public/png/logo-no-background.png";
import Typewriter from "typewriter-effect";
import local from "@/public/png/logo-black.png";
import { motion, AnimatePresence } from "framer-motion";

export const CardCarousel = () => {
const [showResponse, setShowResponse] = useState(false);
const [showCard, setShowCard] = useState(false);
Expand All @@ -22,10 +24,20 @@ export const CardCarousel = () => {

const image = user?.photoURL || local;
const robotText = `Hi ${user?.displayName}, Yes! I found a great one nearby. Check it out and book now.`;

return (
<div className="flex gap-12 items-center justify-center">
<div className="relative bg-[#34343677] w-full max-w-[35rem] h-[21rem]">
<div className=" p-4 rounded-lg">
<motion.div
className="flex gap-12 items-center justify-center"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
>
<motion.div
className="relative bg-[#34343677] w-full max-w-[35rem] h-[21rem]"
whileHover={{ scale: 1.05 }}
transition={{ type: "spring", stiffness: 300 }}
>
<div className="p-4 rounded-lg">
<div className="flex gap-2">
<Image
src={Logo}
Expand All @@ -36,15 +48,27 @@ export const CardCarousel = () => {
/>

<div className="space-y-4">
{!showResponse && text && (
<div className="mt-32 mx-auto">
<h1 className="animate-pulse bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-red-600 text-6xl">
Loca AI
</h1>
</div>
)}
<AnimatePresence>
{!showResponse && text && (
<motion.div
className="mt-32 mx-auto"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }}
>
<h1 className="animate-pulse bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-red-600 text-6xl">
Loca AI
</h1>
</motion.div>
)}
</AnimatePresence>
{showResponse && (
<div className="text-[#caccce]">
<motion.div
className="text-[#caccce]"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.5 }}
>
<Typewriter
onInit={(t: any) => {
t.typeString(robotText)
Expand All @@ -54,13 +78,20 @@ export const CardCarousel = () => {
.start();
}}
/>
</div>
</motion.div>
)}
{showCard && <CardComponent />}
<AnimatePresence>
{showCard && <CardComponent />}
</AnimatePresence>
</div>
</div>
</div>
<div className="flex gap-2 p-6 items-center absolute -bottom-14 right-0 bg-[#131314] rounded-lg">
<motion.div
className="flex gap-2 p-6 items-center absolute -bottom-14 right-0 bg-[#131314] rounded-lg"
initial={{ x: 100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ type: "spring", stiffness: 120 }}
>
<Image
src={image}
alt="Loca logo"
Expand All @@ -74,7 +105,6 @@ export const CardCarousel = () => {
t.typeString(
`<p className="text-[#caccce] font-semibold"> Hey <b>Loca</b>, any plumber near <br /> me in Texas</p>`,
)
// .pauseFor(2500)
.callFunction(() => {
setShowResponse(true);
setText(false);
Expand All @@ -83,10 +113,14 @@ export const CardCarousel = () => {
}}
/>
</div>
</div>
</div>
<div className="relative lg:hidden xl:block hidden bg-[#34343677] w-full max-w-[30rem] h-80">
<div className=" p-4 rounded-lg">
</motion.div>
</motion.div>
<motion.div
className="relative lg:hidden xl:block hidden bg-[#34343677] w-full max-w-[30rem] h-80"
whileHover={{ scale: 1.05 }}
transition={{ type: "spring", stiffness: 300 }}
>
<div className="p-4 rounded-lg">
<div className="flex gap-2">
<Image
src={Logo}
Expand All @@ -97,15 +131,27 @@ export const CardCarousel = () => {
/>

<div className="space-y-4">
{!showResponse && text && (
<div className="mt-32 mx-auto">
<h1 className="animate-pulse bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-red-600 text-6xl">
Loca AI
</h1>
</div>
)}
<AnimatePresence>
{!showResponse && text && (
<motion.div
className="mt-32 mx-auto"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }}
>
<h1 className="animate-pulse bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-red-600 text-6xl">
Loca AI
</h1>
</motion.div>
)}
</AnimatePresence>
{showResponse && (
<div className="text-[#caccce]">
<motion.div
className="text-[#caccce]"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.5 }}
>
<Typewriter
onInit={(t) => {
t.typeString(robotText)
Expand All @@ -115,13 +161,20 @@ export const CardCarousel = () => {
.start();
}}
/>
</div>
</motion.div>
)}
{showCard && <CardComponent />}
<AnimatePresence>
{showCard && <CardComponent />}
</AnimatePresence>
</div>
</div>
</div>
<div className="flex gap-2 p-6 items-center absolute -bottom-14 right-0 bg-[#131314] rounded-lg">
<motion.div
className="flex gap-2 p-6 items-center absolute -bottom-14 right-0 bg-[#131314] rounded-lg"
initial={{ x: 100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ type: "spring", stiffness: 120 }}
>
<Image
src={image}
alt="Loca logo"
Expand All @@ -135,7 +188,6 @@ export const CardCarousel = () => {
t.typeString(
`<p className="text-[#caccce] font-semibold"> Hey <b>Loca</b>, any plumber near <br /> me in Texas</p>`,
)
// .pauseFor(2500)
.callFunction(() => {
setShowResponse(true);
setText(false);
Expand All @@ -144,8 +196,8 @@ export const CardCarousel = () => {
}}
/>
</div>
</div>
</div>
</div>
</motion.div>
</motion.div>
</motion.div>
);
};
44 changes: 35 additions & 9 deletions components/Deafultchatpage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,43 @@
import { CardCarousel } from "./CardCarousel";
import { motion } from "framer-motion";

export const DefaultChatPage = ({ user }: { user: string }) => {
return (
<main>
<div className="text-[#c4c7c556] lg:text-6xl text-4xl font-semibold flex flex-col ">
<h1 className="bg-clip-text text-transparent bg-gradient-to-r from-[#4b90ff] from-1% via-blue-600 via-5% to-15% to-[#ff5546]">
<motion.main
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
>
<motion.div
className="text-[#c4c7c556] lg:text-6xl text-4xl font-semibold flex flex-col"
initial={{ scale: 0.9 }}
animate={{ scale: 1 }}
transition={{ duration: 0.5, delay: 0.2 }}
>
<motion.h1
className="bg-clip-text text-transparent bg-gradient-to-r from-[#4b90ff] from-1% via-blue-600 via-5% to-15% to-[#ff5546]"
initial={{ x: -50 }}
animate={{ x: 0 }}
transition={{ type: "spring", stiffness: 100 }}
>
Hello {user}
</h1>
<p>What can I find for you today?</p>
</div>
<div className="mt-20 lg:pb-24">
</motion.h1>
<motion.p
initial={{ x: 50 }}
animate={{ x: 0 }}
transition={{ type: "spring", stiffness: 100, delay: 0.1 }}
>
What can I find for you today?
</motion.p>
</motion.div>
<motion.div
className="mt-20 lg:pb-24"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.5 }}
>
<CardCarousel />
</div>
</main>
</motion.div>
</motion.main>
);
};
Loading

0 comments on commit d2f9095

Please sign in to comment.