feat(landing): 푸터를 포함한 랜딩페이지 작업

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@lukemorales/query-key-factory": "^1.3.2",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
     "@tanstack/react-query": "^5.17.9",

src/app/(landing)/_components/faq.tsx

@@ -0,0 +1,31 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import React from "react";
+
+const FAQ = () => {
+  return (
+    <div className="flex w-full max-w-[375px] flex-col items-center gap-10 px-5">
+      <p className="w-full whitespace-pre-wrap text-h3-semibold text-grey-900">{`Frequently\nAsked Questions`}</p>
+      <Accordion type="single" collapsible className="flex w-full flex-col gap-3">
+        <AccordionItem value="item-1" className="rounded border border-grey-100 p-4">
+          <AccordionTrigger>Which stocks does Payout cover?</AccordionTrigger>
+          <AccordionContent>
+            Payout currently supports stocks listed on the three major U.S exchanges: NYSE, NASDAQ, and AMEX.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2" className="rounded border border-grey-100 p-4">
+          <AccordionTrigger>Is the dividend information up to date?</AccordionTrigger>
+          <AccordionContent>
+            Stock Data are updated daily at midnight UTC, and Dividend Data are estimated based on the data of the
+            preceding year.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3" className="rounded border border-grey-100 p-4">
+          <AccordionTrigger>How can I suggest ideas for Payout?</AccordionTrigger>
+          <AccordionContent>Idea Suggestions are always appreciated! Please contact us at</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+};
+
+export default FAQ;

src/app/(landing)/_components/footer.tsx

@@ -0,0 +1,18 @@
+import Logo from "@/components/logo/logo";
+import React from "react";
+
+const Footer = () => {
+  return (
+    <div className="flex w-full flex-col items-start justify-center gap-5 bg-grey-50 px-5 py-8">
+      <Logo />
+      <p className="text-left text-body3 text-grey-600">
+        The investment information provided by Payout is solely for reference purposes and is not intended for any kind
+        of financial advices. Stock Data are updated daily at midnight UTC, and Dividend Data are estimated based on the
+        data of the preceding year.
+      </p>
+      <p className="text-body4 text-grey-500">© 2024 Payout. All Rights Reserved.</p>
+    </div>
+  );
+};
+
+export default Footer;

src/app/(landing)/_components/header.tsx

@@ -0,0 +1,12 @@
+import Logo from "@/components/logo/logo";
+import React from "react";
+
+const Header = () => {
+  return (
+    <div className="h-11 w-full bg-purple-100 px-4 py-[10px]">
+      <Logo />
+    </div>
+  );
+};
+
+export default Header;

src/app/(landing)/layout.tsx

@@ -6,7 +6,7 @@ export const viewport: Viewport = {
 };
 
 const LandingLayout = ({ children }: { children: React.ReactNode }) => {
-  return <div className="flex w-full flex-col items-center justify-center">{children}</div>;
+  return <div className="relative flex w-full flex-col items-center justify-center">{children}</div>;
 };
 
 export default LandingLayout;

src/app/(landing)/page.tsx

@@ -1,18 +1,30 @@
+import Header from "./_components/header";
 import Intro from "./_components/intro";
 import MonthlyDividend from "./_components/monthly-dividend";
 import SectorBalanced from "./_components/sector-balanced";
 import TargetUser from "./_components/target-user";
 import YearlyDividend from "./_components/yearly-dividend";
+import FAQ from "./_components/faq";
+import Footer from "./_components/footer";
+import { Button } from "@/components/button/button";
 
 export default function Home() {
   return (
     <>
+      <Header />
       <Intro />
-      <div className="flex w-full flex-col items-center justify-center gap-20 pb-20 pt-10">
+      <div className="flex w-full flex-col items-center justify-center gap-20 pb-32 pt-10">
         <TargetUser />
         <SectorBalanced />
         <MonthlyDividend />
         <YearlyDividend />
+        <FAQ />
+        <Footer />
+      </div>
+      <div className="fixed bottom-0 left-1/2 w-full max-w-[768px] -translate-x-1/2 bg-[linear-gradient(0deg,_#FFF_52.78%,_rgba(255,_255,_255,_0.00)_100%);] p-5 pt-[50px]">
+        <Button variant={"primary"} size={"large"} className="w-full ">
+          Check My Dividend Portfolio
+        </Button>
       </div>
     </>
   );

src/components/Button/Button.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/utils/cn";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-h5 transition-colors disabled:pointer-disabled",
+  {
+    variants: {
+      variant: {
+        primary: "bg-main-700 text-white active:bg-main-400 disabled:bg-[#7692DA] disabled:text-opacity-40",
+        secondary: "bg-main-50 text-main-900 active:bg-main-100 ",
+        tertiary: "bg-grey-100 text-grey-800 active:bg-grey-200 ",
+      },
+      size: {
+        large: "p-4 h-[58px] w-[335px]",
+        medium: "p-4 h-12 w-[335px]",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "large",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, ...props }, ref) => {
+  return <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+});
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

src/components/icons/chevron-down.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export interface ChevronDownIconProps extends React.SVGProps<SVGSVGElement> {}
+
+const ChevronDownIcon = React.memo(({ ...props }: ChevronDownIconProps) => {
+  return (
+    <svg {...props} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4 6L8 10L12 6"
+        stroke="currentColor"
+        stroke-width="0.866667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+});
+
+export default ChevronDownIcon;

src/components/ui/accordion.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cn } from "@/utils/cn";
+import ChevronDownIcon from "../icons/chevron-down";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => <AccordionPrimitive.Item ref={ref} className={cn(className)} {...props} />);
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={
+        "flex flex-1 items-center justify-between text-body2 text-grey-900 transition-all [&[data-state=open]>div>svg]:rotate-180"
+      }
+      {...props}
+    >
+      {children}
+      <div className="flex size-6 items-center justify-center rounded-full bg-grey-100">
+        <ChevronDownIcon className=" h-4 w-4 shrink-0 text-grey-500 transition-transform duration-200" />
+      </div>
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={"pt-6 text-body2 text-grey-600"}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

tailwind.config.ts

@@ -8,6 +8,20 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
@@ -38,15 +52,15 @@ const config: Config = {
           },
         ],
         "h3-semibold": [
-          "20px",
+          "21px",
           {
             lineHeight: "27.3px",
             letterSpacing: "-0.42px",
             fontWeight: 600,
           },
         ],
         h3: [
-          "20px",
+          "21px",
           {
             lineHeight: "25.2px",
             letterSpacing: "-0.42px",
@@ -198,7 +212,7 @@ const config: Config = {
         "grey-800": "var(--color-grey-800)",
         "grey-900": "var(--color-grey-900)",
 
-        "error": "var(--color-error)"
+        error: "var(--color-error)",
       },
     },
   },
@@ -215,5 +229,5 @@ const config: Config = {
     ".*Styles*", // Add ".*Styles*" (or whatever matches your naming scheme)
   ],
   plugins: [require("tailwindcss-animate")],
-} satisfies Config
+} satisfies Config;
 export default config;