Skip to content

Commit

Permalink
feat: 랜딩페이지 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrbonk97
mrbonk97 committed Jul 18, 2024
1 parent 92d5892 commit 952585e
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 113 deletions.
Binary file added public/intro/service1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/intro/service3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 3 additions & 5 deletions src/components/nav/Footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { Logo } from "../Logo";

export const Footer = () => {
return (
<footer className="h-48 flex items-center justify-center bg-gray-500 text-white">
<div className="min-w-[500px]">
<footer className="h-48 text-sm md:text-md flex items-center justify-center bg-zinc-700 text-white">
<div className="space-y-1">
<nav>
<ul className="flex gap-3">
<ul className="flex flex-wrap gap-2 md:gap-3">
<li className="cursor-pointer">개인정보처리방침</li>
<li className="cursor-pointer">신용정보활용체제</li>
<li className="cursor-pointer">고객정보활용방침</li>
Expand Down
255 changes: 147 additions & 108 deletions src/pages/Main.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,140 +1,179 @@
import "animate.css";
import { motion, useScroll, useTransform } from "framer-motion";
import { IoIosArrowDown } from "react-icons/io";
import { Suspense, useEffect, useRef, useState } from "react";
import { forwardRef, Suspense, useEffect, useRef, useState } from "react";
import { Footer } from "../components/nav/Footer";
import { Link } from "react-router-dom";
import { Spinner } from "@chakra-ui/react";

export default function Main() {
return (
<main className="min-h-full h-full">
<Section1 />
<Section2 />
<Section3 />
<Footer />
</main>
);
}

const Section2 = () => {
const ref = useRef(null);
const ref2 = useRef(null);
const { scrollYProgress } = useScroll({ target: ref });
const [isLoaded, setIsLoaded] = useState(false);
const section2Ref = useRef(null);
const { scrollYProgress } = useScroll({ target: section2Ref });
const w = window.screen.width;
let size = 500;
if (w <= 1280) size = 450;
if (w <= 1024) size = 400;
if (w <= 768) size = 350;
if (w <= 640) size = 300;

const left = useTransform(
scrollYProgress,
[0, 0.35, 0.6, 1],
[-400, 100, 100, -400]
[0, 0.3, 0.7, 1],
[-size, 0, 0, -size]
);
const right = useTransform(
scrollYProgress,
[0, 0.35, 0.6, 1],
[400, -100, -100, 400]
[0, 0.3, 0.7, 1],
[size, 0, 0, size]
);

useEffect(() => setIsLoaded(true), []);

if (!isLoaded) return <div>히</div>;
if (!isLoaded)
return (
<main className="xl:text-2xl h-full w-full flex items-center justify-center">
<Spinner />
</main>
);

return (
<main className="h-full">
<section className="relative min-h-full bg-neutral-800">
<Suspense fallback={<div>영상 처리중</div>}>
<img
src="/main.gif"
style={{ objectFit: "cover", height: "100vh" }}
width={4000}
height={4000}
/>
</Suspense>
<hgroup className="min-h-[600px] absolute top-0 h-full w-full flex flex-col items-center pt-60 text-white bg-black/20">
<h2 className="animate__animated animate__fadeInUp text-6xl">
전세 사기와 추천
</h2>
<h1 className="animate__animated animate__fadeInUp mt-6 text-7xl">
<strong className="text-blue-300 font-extrabold">예방</strong>
에서 만나다
</h1>
</hgroup>
<div className="absolute left-1/2 bottom-20 transform -translate-x-[50%]">
<IoIosArrowDown
className="text-white animate-bounce cursor-pointer"
size="75"
onClick={() => {
section2Ref.current.scrollIntoView({ behavior: "smooth" });
}}
/>
</div>
</section>
<section
ref={section2Ref}
className="relative min-h-full overflow-x-hidden"
>
<motion.article
style={{ translateX: left }}
className="absolute bottom-10 left-10 w-[650px] h-[500px] rounded-xl shadow-2xl overflow-hidden"
>
<img
src={"/service-intro-1.png"}
width={1000}
style={{ objectFit: "contain" }}
/>
</motion.article>
<motion.article
style={{ translateX: right }}
className="absolute top-10 right-10 w-[650px] h-[500px] rounded-xl shadow-2xl overflow-hidden"
>
<img
src={"/service-intro-1.png"}
width={1000}
style={{ objectFit: "contain" }}
/>
</motion.article>
<section ref={ref} className="p-14 min-h-full flex justify-center">
<div className="2xl:max-w-[1300px] w-full" ref={ref2}>
<motion.p
viewport={{ once: true }}
initial={{ opacity: 0 }}
whileInView={{ opacity: 1, transition: { duration: 1, delay: 0.2 } }}
className="absolute top-20 left-20 text-4xl font-medium leading-[1.5]"
whileInView={{
opacity: 0.85,
transition: { duration: 1, delay: 0.2 },
}}
className="text-4xl font-medium leading-[1.5]"
>
<strong>예방 추천</strong>
<br /> 꼭 필요했던.
<br /> 나에게 딱 맞는
<br /> 원클릭 전세사기 예방 서비스.
</motion.p>
</section>
<section className="min-h-full mt-20 pt-40 bg-rose-100 flex flex-col justify-between items-center">
<div className="flex flex-col-reverse items-center">
<motion.img
viewport={{ once: true }}
initial={{ opacity: 0.1, y: 30 }}
whileInView={{
opacity: 1,
y: 0,
transition: { duration: 0.5, ease: "easeOut", delay: 0.4 },
}}
src="/seoul.png"
width={600}
height={600}
/>
<motion.h2
viewport={{ once: true }}
className="text-center text-6xl"
initial={{ opacity: 0.1, y: 20 }}
whileInView={{
opacity: 1,
y: 0,
transition: { duration: 0.3, ease: "easeOut", delay: 0.2 },
}}
>
<strong className="font-bold underline-offset-8 text-blue-500">
서울 5개
</strong>
구 서비스 시작
</motion.h2>
</div>
<div className="pl-10 py-6 w-full flex items-center justify-evenly bg-neutral-800 text-white text-4xl leading-[1.55] tracking-wide">
<div>
이제부터
<br /> <strong className="text-blue-300">예방</strong>과 함께하세요.
<div className="relative pt-10">
<div className="flex justify-start">
<motion.article
style={{ translateX: left }}
className="lg:max-w-[700px] border shadow-xl rounded-xl"
>
<img
src={"/intro/service1.png"}
width={1500}
height={1500}
style={{ objectFit: "contain" }}
className="rounded-xl"
/>
</motion.article>
</div>
<div className="flex justify-end">
<motion.article
style={{ translateX: right }}
className="lg:max-w-[700px] mt-16 border shadow-xl rounded-xl"
>
<img
src={"/intro/service3.png"}
width={1000}
style={{ objectFit: "contain" }}
className="rounded-xl"
/>
</motion.article>
</div>
<Link
to={"/protect"}
className="border px-5 h-16 hover:opacity-70 duration-200 hover:border-blue-400"
>
시작하기
</Link>
</div>
</section>
<Footer />
</main>
</div>
</section>
);
}
};

const Section1 = () => {
return (
<section className="relative h-full bg-neutral-800">
<Suspense fallback={<div>영상 처리중</div>}>
<img
src="/main.gif"
style={{ objectFit: "cover", height: "100vh" }}
width={4000}
height={4000}
/>
</Suspense>
<hgroup className="min-h-[600px] absolute top-0 h-full w-full flex flex-col items-center pt-60 text-white bg-black/20">
<h2 className="animate__animated animate__fadeInUp text-3xl sm:text-5xl lg:text-6xl">
전세 사기와 추천
</h2>
<h1 className="animate__animated animate__fadeInUp mt-6 text-4xl sm:text-6xl lg:text-7xl">
<strong className="text-blue-300 font-extrabold">예방</strong>
에서 만나다
</h1>
</hgroup>
<div className="absolute left-1/2 bottom-20 transform -translate-x-[50%]">
<IoIosArrowDown
className="text-white animate-bounce cursor-pointer text-5xl sm:text-6xl lg:text-7xl"
onClick={() => {
// section2Ref.current.scrollIntoView({ behavior: "smooth" });
}}
/>
</div>
</section>
);
};

const Section3 = () => {
return (
<section className="mt-20 h-full flex flex-col justify-between items-center bg-gradient-to-b from-70% to-95% from-white to-black/30">
<div className="pt-20">
<motion.h2
viewport={{ once: true }}
className="text-center font-medium text-4xl sm:text-5xl md:text-6xl"
initial={{ opacity: 0.1, y: 20 }}
whileInView={{
opacity: 1,
y: 0,
transition: { duration: 0.3, ease: "easeOut", delay: 0.2 },
}}
>
<strong className="font-bold text-blue-500">서울 5개</strong>구 서비스
시작
</motion.h2>
<motion.img
viewport={{ once: true }}
initial={{ opacity: 0.1, y: 30 }}
whileInView={{
opacity: 1,
y: 0,
transition: { duration: 0.5, ease: "easeOut", delay: 0.4 },
}}
src="/seoul.png"
width={600}
height={600}
/>
</div>
<div className="pl-10 py-6 w-full flex items-center justify-evenly bg-neutral-800 text-white leading-[1.55] tracking-wide">
<div className="text-xl sm:text-2xl md:text-3xl lg:text-4xl">
지금부터
<br /> <strong className="text-blue-300">예방</strong>과 함께하세요.
</div>
<Link
to={"/protect"}
className="px-7 py-3 sm:px-10 md:py-4 lg:px-20 lg:py-5 border rounded hover:opacity-70 duration-300 hover:border-blue-400"
>
시작하기
</Link>
</div>
</section>
);
};

0 comments on commit 952585e

Please sign in to comment.