diff --git a/public/images/logo.svg b/public/images/logo.svg deleted file mode 100644 index a38087d..0000000 --- a/public/images/logo.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/public/images/logo_symbol.svg b/public/images/logo_symbol.svg new file mode 100644 index 0000000..817ff2b --- /dev/null +++ b/public/images/logo_symbol.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/logo_typo.svg b/public/images/logo_typo.svg new file mode 100644 index 0000000..40c73e4 --- /dev/null +++ b/public/images/logo_typo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/Card.module.css b/src/app/(with-header-sidebar)/dashboard/[id]/components/Card.module.css index 6c1c53d..3c03e13 100644 --- a/src/app/(with-header-sidebar)/dashboard/[id]/components/Card.module.css +++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/Card.module.css @@ -11,6 +11,9 @@ .card.dragging { margin: 0; + box-shadow: + rgba(0, 0, 0, 0.16) 0px 3px 6px, + rgba(0, 0, 0, 0.23) 0px 3px 6px; } .cardContainer { diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/Column.module.css b/src/app/(with-header-sidebar)/dashboard/[id]/components/Column.module.css index b046224..4a18cf7 100644 --- a/src/app/(with-header-sidebar)/dashboard/[id]/components/Column.module.css +++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/Column.module.css @@ -5,15 +5,21 @@ width: auto; max-height: 385px; height: auto; - padding: 16px 12px; - gap: 24px; + padding: 0 12px 16px 12px; } .header { + height: 62px; + padding: 16px 0; display: flex; align-items: center; justify-content: space-between; - height: 24px; + position: sticky; + top: 0; + width: 100%; + left: 0; + background-color: var(--gray-100); + z-index: 1; } .status { @@ -71,6 +77,7 @@ width: 100%; height: 100%; border-bottom: 1px solid var(--gray-200); + padding-top: 8px; } .createCard.createCard { @@ -78,7 +85,7 @@ align-items: center; justify-content: center; width: 100%; - height: 32px; + min-height: 32px; border: 1px solid var(--gray-300); background: var(--white); font-size: 18px; @@ -122,10 +129,25 @@ @media screen and (min-width: 768px) { .column { padding: 20px; + padding-top: 0; max-height: 346px; border-bottom: 1px solid var(--gray-200); } + .header { + height: 68px; + padding: 20px 0; + display: flex; + align-items: center; + justify-content: space-between; + position: sticky; + top: 0; + width: 100%; + left: 0; + background-color: var(--gray-100); + z-index: 1; + } + .createCard { height: 40px; } @@ -133,6 +155,7 @@ .columnContent { gap: 16px; border-bottom: none; + padding-top: 4px; } .scrollContext { @@ -141,7 +164,7 @@ } @media screen and (min-width: 1200px) { .column { - min-width: 354px; + width: 354px; max-height: 100%; border-right: 1px solid var(--gray-200); border-bottom: none; diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/components/Column.tsx b/src/app/(with-header-sidebar)/dashboard/[id]/components/Column.tsx index e5404c7..7d998d5 100644 --- a/src/app/(with-header-sidebar)/dashboard/[id]/components/Column.tsx +++ b/src/app/(with-header-sidebar)/dashboard/[id]/components/Column.tsx @@ -5,8 +5,8 @@ import Button from '@/components/Button'; import Image from 'next/image'; import Card from './Card'; import useModalStore from '@/store/modalStore'; -import SettingsColumnModal from './SettingsColumnModal'; import CreateTaskModal from './CreateCardModal'; +import SettingsColumnModal from './SettingsColumnModal'; import styles from './Column.module.css'; function Column({ @@ -110,6 +110,11 @@ function Column({ }`} ref={provided.innerRef} {...provided.droppableProps} + style={{ + backgroundColor: snapshot.isDraggingOver + ? 'var(--violet-light)' + : '', + }} > {items.map((item, index) => item ? ( @@ -122,7 +127,7 @@ function Column({ ) : null )} {provided.placeholder} -
+
)} diff --git a/src/app/(with-header-sidebar)/dashboard/[id]/page.module.css b/src/app/(with-header-sidebar)/dashboard/[id]/page.module.css index 34d432e..d676c43 100644 --- a/src/app/(with-header-sidebar)/dashboard/[id]/page.module.css +++ b/src/app/(with-header-sidebar)/dashboard/[id]/page.module.css @@ -3,12 +3,16 @@ flex-direction: column; min-height: 100vh; background-color: var(--gray-100); + position: relative; } .createColumnSection { min-width: 284px; - width: auto; padding: 16px 12px; + position: sticky; + bottom: 0; + z-index: 1; + background-color: var(--gray-100); } .createColumn.createColumn { @@ -25,7 +29,6 @@ line-height: 26px; gap: 12px; border-radius: 8px; - margin-top: 48px; } .createColumnIcon { @@ -50,5 +53,6 @@ .createColumn.createColumn { width: 354px; + margin-top: 48px; } } diff --git a/src/app/page.tsx b/src/app/page.tsx index 9b942aa..dbe777f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,13 +4,41 @@ import Layout from '@/components/landing/layout'; import HeroSection from '@/components/landing/Section/HeroSection'; import PrimarySection from '@/components/landing/Section/PrimarySection'; import SecondarySection from '@/components/landing/Section/SecondarySection'; +import { useState, useEffect } from 'react'; export default function Home() { + const [inView, setInView] = useState<{ [key: string]: boolean }>({ + primary: false, + secondary: false, + }); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + const { id } = entry.target; + setInView((prev) => ({ + ...prev, + [id]: !entry.isIntersecting, + })); + }); + }, + { threshold: 0.5 } + ); + + const sections = document.querySelectorAll('section'); + sections.forEach((section) => { + observer.observe(section); + }); + + return () => observer.disconnect(); + }, []); + return ( - - + + ); } diff --git a/src/components/CustomLogo.tsx b/src/components/CustomLogo.tsx index b0ee0c4..75b5ac5 100644 --- a/src/components/CustomLogo.tsx +++ b/src/components/CustomLogo.tsx @@ -1,9 +1,15 @@ -import Logo from '/public/images/logo.svg'; +import Symbol from '/public/images/logo_symbol.svg'; +import Typo from '/public/images/logo_typo.svg'; interface Props { className?: string; + fill?: string; } -export default function CustomLogo({ className }: Props) { - return ; +export function CustomSymbol({ className, fill }: Props) { + return ; +} + +export function CustomTypo({ className, fill }: Props) { + return ; } diff --git a/src/components/MainContainer.module.css b/src/components/MainContainer.module.css index b1c1e23..282bbb8 100644 --- a/src/components/MainContainer.module.css +++ b/src/components/MainContainer.module.css @@ -3,7 +3,3 @@ overflow-y: auto; background-color: var(--gray-100); } - -.mainContainer::-webkit-scrollbar { - display: none; -} diff --git a/src/components/landing/Header/Header.module.css b/src/components/landing/Header/Header.module.css index 47580e9..6df6ddc 100644 --- a/src/components/landing/Header/Header.module.css +++ b/src/components/landing/Header/Header.module.css @@ -8,13 +8,17 @@ z-index: 999; width: 100%; height: 60px; - padding: 18px 24px; - + padding: 16px 24px; background-color: inherit; } -.logo { - fill: white; +.logoSymbol { + width: 24px; + height: 27px; +} + +.logoTypo { + display: none; } .nav { @@ -34,6 +38,23 @@ height: 70px; } + .logoWrapper { + display: flex; + justify-content: center; + align-items: center; + } + + .logoSymbol { + width: 29px; + height: 33px; + } + + .logoTypo { + display: inline; + width: 80px; + height: 22px; + } + .navLink { font-size: 16px; line-height: 26px; diff --git a/src/components/landing/Header/Header.tsx b/src/components/landing/Header/Header.tsx index eff6a82..30046a1 100644 --- a/src/components/landing/Header/Header.tsx +++ b/src/components/landing/Header/Header.tsx @@ -1,15 +1,51 @@ +'use client'; + import Link from 'next/link'; -import CustomLogo from '@/components/CustomLogo'; +import { CustomSymbol, CustomTypo } from '@/components/CustomLogo'; +import { useEffect, useState } from 'react'; import styles from './Header.module.css'; export default function Header() { + const [scroll, setScroll] = useState(0); + + useEffect(() => { + const handleScroll = () => { + setScroll(window.scrollY); + }; + + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + + const getGradientColor = () => { + const scrollPercent = Math.min(scroll / window.innerHeight, 1); + + const red = Math.floor(255 - (255 - 85) * scrollPercent); + const green = Math.floor(255 - (255 - 52) * scrollPercent); + const blue = Math.floor(255 - (255 - 218) * scrollPercent); + + const color = `rgb(${red}, ${green}, ${blue})`; + + return color; + }; + return (
- +
+ + +
+