Skip to content

Commit

Permalink
Fix : update landing page responsive css
Browse files Browse the repository at this point in the history
  • Loading branch information
@ungpyolee
ungpyolee committed Aug 2, 2024
1 parent bb402c8 commit 28d7077
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 36 deletions.
13 changes: 7 additions & 6 deletions src/components/Landing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,8 @@ const Landing = () => {
<p className="text-lg mt-6 text-white">
대화를 ai에게 전달해주세요.
<br />
대화를 요약하고 상대방이 어떤 감정을 가지고 나와 대화하는지 분석합니다.
대화를 요약하고 상대방이 어떤 감정을 <br className="md:hidden" />
가지고 나와 대화하는지 분석합니다.
</p>
</div>
<HomeChatInfo />
Expand Down Expand Up @@ -143,18 +144,18 @@ const Landing = () => {
<div className="absolute w-full h-[160px] bottom-0 bg-gradient-to-b from-transparent via-black to-black z-30"></div>
<HomeForestInfo isInView={isInView} />
</motion.div>
<footer className="text-center bg-black pt-40 w-full">
<div className="text-center mb-[120px]">
<footer className="text-center bg-black pt-40 pb-40 w-full">
<div className="text-center mb-[120px] px-5">
<h2 className="font-title text-2xl text-primary-light">팀을 소개합니다</h2>
<p className="text-lg mt-6 text-gray-200">
우리 팀은 인공지능(AI)을 활용한 혁신적인 감정 분석 서비스를
개발했습니다. <br />
우리 팀은 인공지능(AI)을 활용한 <br className="sm:hidden" />
혁신적인 감정 분석 서비스를 개발했습니다. <br />
사용자들의 감정을 분석하여 그 데이터를 나무에게 전달함으로써 나무가
성장하는 형태의 인터랙티브 경험을 제공합니다.
</p>
<p className="text-lg mb-24 mt-1 text-gray-200">
<br /> 감정을 시각적으로 표현하고, 사용자들에게 긍정적인 피드백을
제공하여 감정 관리와 <br />
제공하여 감정 관리와 <br className="hidden lg:block" />
정서적 성장을 도울 수 있도록 설계되었습니다.
</p>
<HomeTeamInfo />
Expand Down
35 changes: 15 additions & 20 deletions src/components/common/home/HomeChatInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,24 @@ import { IconLineStar } from "../../../config/IconData";
const HomeChatInfo = () => {
return (
<div>
<div className="m-auto mt-[70px] justify-center md:relative flex flex-col sm:flex sm:flex-row">
<div className="m-auto mt-[70px] justify-center flex flex-col lg:flex-row items-center">
<img
className="lg:w-[600px] md:w-[70%] sm:w-[70%] h-[100%]"
className="w-full sm:w-[600px]"
src="/img/landing_chat.webp"
alt="채팅 이미지"
/>
<div className="lg:mt-[18%] md:mt-[12%] lg:static md:absolute flex flex-row sm:block sm:right-0">
<div className="mt-10 ml-10 sm:ml-0 lg:mt-[210px] flex flex-col">
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 0.5, type: "spring" }}
>
<IconLineStar className="-ml-6 w-[148px] lg:h-[53px]" />
<div className="-mt-3 ml-6">
<p className="lg:text-lg font-semibold sm:text-[14px]">
<IconLineStar className="hidden lg:block lg:-ml-6 lg:w-[148px] lg:h-[53px]" />
<div className="lg:-mt-3 lg:ml-6 mb-6 text-center lg:text-left">
<p className="lg:text-lg font-semibold ">
감정구슬이 대화를 확인합니다
</p>
<p className="text-gray-200 mt-0.5 lg:text-base sm:text-[13px] sm:block hidden">
<p className="text-gray-200 mt-0.5 lg:text-base">
감정구슬이 대화 속 상대방의 대답의 <br />
감정을 보여줍니다
</p>
Expand All @@ -31,14 +31,11 @@ const HomeChatInfo = () => {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1.2, type: "spring" }}
className="sm:my-[50px] sm:mx-0 my-0 mx-5"
>
<IconLineStar className="-ml-6 w-[148px] h-[53px]" />
<div className="-mt-3 ml-6">
<p className="lg:text-lg font-semibold sm:text-[14px]">
감정을 파악했습니다
</p>
<p className="text-gray-200 mt-0.5 lg:text-base sm:text-[13px] sm:block hidden">
<IconLineStar className="hidden lg:block lg:-ml-6 lg:w-[148px] lg:h-[53px]" />
<div className="lg:-mt-3 lg:ml-6 mb-6 text-center lg:text-left">
<p className="lg:text-lg font-semibold ">감정을 파악했습니다</p>
<p className="text-gray-200 mt-0.5 lg:text-base">
요약한 대화 속에서 감정 키워드를
<br /> 추출합니다
</p>
Expand All @@ -49,12 +46,10 @@ const HomeChatInfo = () => {
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1.9, type: "spring" }}
>
<IconLineStar className="-ml-6 w-[148px] h-[53px]" />
<div className="-mt-3 ml-6">
<p className="lg:text-lg font-semibold sm:text-[14px]">
감정을 나무에 전달합니다.
</p>
<p className="text-gray-200 mt-0.5 lg:text-base sm:text-[13px] sm:block hidden">
<IconLineStar className="hidden lg:block lg:-ml-6 lg:w-[148px] lg:h-[53px]" />
<div className="lg:-mt-3 lg:ml-6 mb-6 text-center lg:text-left">
<p className="lg:text-lg font-semibold ">감정을 나무에 전달합니다.</p>
<p className="text-gray-200 mt-0.5 lg:text-base">
추출된 감정이 나무에게 전달되고
<br /> 나무가 성장합니다
</p>
Expand Down
10 changes: 5 additions & 5 deletions src/components/common/home/HomeForestInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ interface HomeForestInfoProps {

const HomeForestInfo = ({ isInView }: HomeForestInfoProps) => {
return (
<div className="h-[1080px] overflow-hidden">
<div className="relative left-[50%] sm:block hidden">
<div className="h-[660px] lg:h-[1080px] overflow-hidden">
<div className="relative left-[136%] sm:left-[80%] lg:left-[50%]">
<motion.img
className="relative animate-gravity"
initial={{ left: -800, top: 100, scale: 0.6, opacity: 0 }}
Expand Down Expand Up @@ -41,7 +41,7 @@ const HomeForestInfo = ({ isInView }: HomeForestInfoProps) => {
src="/img/landing_tree_02.png"
/>
</div>
<div className="relative -top-[240px] left-[47%] sm:block hidden">
<div className="relative -top-[240px] left-[60%] lg:left-[47%] sm:block hidden">
<motion.img
className="relative animate-gravity"
initial={{ left: 30, top: -50, opacity: 0 }}
Expand All @@ -57,7 +57,7 @@ const HomeForestInfo = ({ isInView }: HomeForestInfoProps) => {
src="/img/landing_tree_03.png"
/>
</div>
<div className="relative -right-[83%] sm:left-[50%] sm:bottom-[360px] bottom-[-250px] -translate-x-2/4 sm:translate-x-0">
<div className="relative -right-[95%] sm:left-[50%] sm:bottom-[360px] bottom-[-250px] -translate-x-2/4 sm:translate-x-0 lg:block hidden">
<motion.img
className="relative animate-gravity"
initial={{ right: 0, top: 100, opacity: 0 }}
Expand All @@ -78,7 +78,7 @@ const HomeForestInfo = ({ isInView }: HomeForestInfoProps) => {
/>
</div>
<motion.img
className="absolute left-0 top-0 -z-10"
className="absolute left-0 top-0 -z-10 w-[200px] sm:w-[320px] md:w-[480px] lg:w-[600px] xl:w-auto"
initial={{ left: -200, opacity: 0 }}
animate={isInView ? { left: 0, opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.5, delay: 0, type: "tween" }}
Expand Down
8 changes: 4 additions & 4 deletions src/components/common/home/HomeTeamInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const HomeTeamInfo = () => {
return (
<div>
<div className="text-white flex text-center m-auto break-keep sm:max-w-[1200px] w-full flex-col sm:flex-row">
<dl className="sm:w-60 w-full relative">
<dl className="sm:w-60 w-full relative mb-10">
<dt>
<p className="block text-sm font-medium text-literal-angry">
Team & FE Leader
Expand Down Expand Up @@ -43,7 +43,7 @@ const HomeTeamInfo = () => {
className="top-0 absolute right-0 sm:block hidden"
/>
</dl>
<dl className="sm:w-60 w-full relative mt-10 sm:mt-0">
<dl className="sm:w-60 w-full relative mb-10 mt-10 sm:mt-0">
<dt>
<p className="block text-sm font-medium text-literal-joy">FE Member</p>
Park, Min Ah
Expand Down Expand Up @@ -78,7 +78,7 @@ const HomeTeamInfo = () => {
className="top-0 absolute right-0 sm:block hidden"
/>
</dl>
<dl className="sm:w-60 w-full relative mt-10 sm:mt-0">
<dl className="sm:w-60 w-full relative mb-10 mt-10 sm:mt-0">
<dt>
<p className="block text-sm font-medium text-primary">FE Member</p>
Lee, Ung Pyo
Expand Down Expand Up @@ -113,7 +113,7 @@ const HomeTeamInfo = () => {
className="top-0 absolute right-0 sm:block hidden"
/>
</dl>
<dl className="sm:w-60 w-full relative mt-10 sm:mt-0">
<dl className="sm:w-60 w-full relative mb-10 mt-10 sm:mt-0">
<dt>
<p className="block text-sm font-medium text-literal-sorrow">BE Leader</p>
Yang, Ui Jong
Expand Down
2 changes: 1 addition & 1 deletion src/pages/PageMaintenance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const PageMaintenance = ({ children }: { children: ReactNode }) => {
if (hours === 0 && minutes >= 0 && minutes < 5) {
setIsMaintenanceTime(true);
} else {
setIsMaintenanceTime(true);
setIsMaintenanceTime(false);
}
};

Expand Down

0 comments on commit 28d7077

Please sign in to comment.