feat: landing v2

apps/admin/src/pages/Landing/LandingPage.styles.ts

@@ -1,17 +1,13 @@
-import { mq_lg } from '@boolti/ui';
 import styled from '@emotion/styled';
 import { m } from 'framer-motion';
 
 const Container = styled(m.div)`
   overflow: hidden;
   min-height: 100vh;
-  padding-top: 48px;
+
   &::-webkit-scrollbar {
     display: none;
   }
-  ${mq_lg} {
-    padding-top: 68px;
-  }
 `;
 
 const FooterContainer = styled.div`

apps/admin/src/pages/Landing/atoms/visibleSectionAtom.ts

@@ -2,9 +2,14 @@ import { atom, useSetAtom } from 'jotai';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
-type VisibleSection = 'key-visal' | 'organizer' | 'user';
+type VisibleSection =
+  | 'hero'
+  | 'problem'
+  | 'solution-features'
+  | 'solution-highlight'
+  | 'how-to-use';
 
-export const visibleSectionAtom = atom<VisibleSection>('key-visal');
+export const visibleSectionAtom = atom<VisibleSection>('hero');
 
 export const useVisibleSectionAtom = (section: VisibleSection) => {
   const { ref, inView, entry } = useInView({ threshold: 0.2 });

apps/admin/src/pages/Landing/components/FeatureCard/FeatureCard.styles.ts

@@ -0,0 +1,157 @@
+import { mq_lg } from '@boolti/ui';
+import styled from '@emotion/styled';
+
+import { LANDING_COLORS, mq_desktop } from '../../constants';
+
+const Card = styled.article`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+`;
+
+const TextArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 0 24px 24px;
+
+  ${mq_lg} {
+    gap: 20px;
+    padding: 0 0 32px;
+  }
+
+  ${mq_desktop} {
+    gap: 24px;
+    padding: 0 0 40px;
+  }
+`;
+
+const Chip = styled.div`
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 14px;
+  border-radius: 200px;
+  background-color: ${LANDING_COLORS.chipBg};
+  color: ${LANDING_COLORS.chipText};
+  font-family: Pretendard, sans-serif;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
+
+  ${mq_lg} {
+    font-size: 18px;
+  }
+
+  ${mq_desktop} {
+    padding: 10px 16px;
+    font-size: 24px;
+  }
+`;
+
+const TitleBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+`;
+
+const Title = styled.h3`
+  font-family: Pretendard, sans-serif;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 1.35;
+  letter-spacing: -0.02em;
+  white-space: pre-line;
+  color: #000000;
+  margin: 0;
+
+  ${mq_lg} {
+    font-size: 24px;
+  }
+
+  ${mq_desktop} {
+    font-size: 32px;
+  }
+`;
+
+const Description = styled.p`
+  font-family: Pretendard, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.5;
+  letter-spacing: -0.02em;
+  white-space: pre-line;
+  color: #a2a5b4;
+  margin: 0;
+
+  ${mq_lg} {
+    font-size: 18px;
+  }
+
+  ${mq_desktop} {
+    font-size: 24px;
+  }
+`;
+
+const Media = styled.div`
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  width: 100%;
+  padding: 16px;
+  border: 1px solid ${LANDING_COLORS.cardBorder};
+  border-radius: 16px;
+  background-color: #ffffff;
+
+  ${mq_desktop} {
+    padding: 32px;
+    gap: 24px;
+  }
+`;
+
+const MediaImage = styled.img`
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  border-radius: 8px;
+`;
+
+const MediaArrow = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg,
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  ${mq_desktop} {
+    width: 48px;
+    height: 48px;
+  }
+`;
+
+export default {
+  Card,
+  TextArea,
+  Chip,
+  TitleBlock,
+  Title,
+  Description,
+  Media,
+  MediaImage,
+  MediaArrow,
+};

apps/admin/src/pages/Landing/components/FeatureCard/index.tsx

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+
+import arrowSvg from '~/assets/landing-v2/arrow.svg';
+
+import Styled from './FeatureCard.styles';
+
+interface FeatureCardProps {
+  chip: string;
+  title: string;
+  description: string;
+  asisSrc?: string;
+  tobeSrc?: string;
+  media?: ReactNode;
+  className?: string;
+}
+
+const FeatureCard = ({
+  chip,
+  title,
+  description,
+  asisSrc,
+  tobeSrc,
+  media,
+  className,
+}: FeatureCardProps) => {
+  return (
+    <Styled.Card className={className}>
+      <Styled.TextArea>
+        <Styled.Chip>{chip}</Styled.Chip>
+        <Styled.TitleBlock>
+          <Styled.Title>{title}</Styled.Title>
+          <Styled.Description>{description}</Styled.Description>
+        </Styled.TitleBlock>
+      </Styled.TextArea>
+      {media ??
+        (asisSrc && tobeSrc ? (
+          <Styled.Media>
+            <Styled.MediaImage src={asisSrc} alt="" aria-hidden />
+            <Styled.MediaImage src={tobeSrc} alt="" aria-hidden />
+            <Styled.MediaArrow aria-hidden>
+              <img src={arrowSvg} alt="" />
+            </Styled.MediaArrow>
+          </Styled.Media>
+        ) : null)}
+    </Styled.Card>
+  );
+};
+
+export default FeatureCard;