main

AW-474, AW-475, AW-476, AW-477, AW-478, AW-479

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -p 3001",
     "lint": "next lint"
   },
   "dependencies": {

src/app/(core)/layout.module.scss

@@ -2,3 +2,10 @@
     padding: 16px;
     padding-bottom: 64px;
 }
+
+.navBar {
+    position: sticky;
+    top: 0;
+    z-index: 7777;
+    background: var(--background);
+}

src/app/(core)/layout.tsx

@@ -7,7 +7,7 @@ export default function CoreLayout({
     children: React.ReactNode;
 }>) {
     return <>
-        <NavigationBar />
+        <NavigationBar className={styles.navBar} />
         <main className={styles.main}>
             {children}
         </main>

src/app/layout.module.scss

@@ -1,4 +1,5 @@
 .body {
     max-width: 560px;
     margin: 0 auto;
+    position: relative;
 }

src/app/layout.tsx

@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./globals.css";
 import clsx from "clsx";
 import styles from "./layout.module.scss"
+import "@/styles/globals.css";
 
 const inter = Inter({
   subsets: ["latin", "cyrillic"],

src/components/AdviserCard/AdviserCard.module.scss

@@ -1,4 +1,4 @@
-.card {
+.card.adviserCard {
     padding: 0;
     min-width: 160px;
     height: 235px;
@@ -7,6 +7,7 @@
     justify-content: flex-end;
     position: relative;
     overflow: hidden;
+    background-repeat: no-repeat;
 }
 
 .content {

src/components/AdviserCard/AdviserCard.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import Button from "../ui/Button/Button"
 import Card from "../ui/Card/Card"
 import Typography from "../ui/Typography/Typography"
@@ -5,7 +6,7 @@ import styles from "./AdviserCard.module.scss"
 
 export default function AdviserCard() {
     return (
-        <Card className={styles.card} style={{ backgroundImage: `url(/adviser-card.png)` }}>
+        <Card className={clsx(styles.card, styles.adviserCard)} style={{ backgroundImage: `url(/adviser-card.png)` }}>
             <div className={styles.content}>
                 <div className={styles.info}>
                     <div className={styles.name}>

src/components/AdvisersSection/AdvisersSection.module.scss

@@ -1,4 +1,12 @@
 .sectionContent {
     overflow-x: scroll;
-    width: calc(100% + 16px);
+    width: calc(100% + 32px);
+    padding: 16px;
+    padding-right: 0;
+    margin: -16px;
+    margin-right: 0;
+}
+
+.grid {
+    padding-right: 16px;
 }

src/components/AdvisersSection/AdvisersSection.tsx

@@ -19,7 +19,7 @@ const advisers = [
 export default function AdvisersSection() {
     return (
         <Section title="Advisers" contentClassName={styles.sectionContent}>
-            <Grid columns={5}>
+            <Grid columns={5} className={styles.grid}>
                 {advisers.map((adviser, index) => (
                     <AdviserCard key={index} {...adviser} />
                 ))}

src/components/CompatibilitySection/CompatibilitySection.module.scss

@@ -1,4 +1,10 @@
 .sectionContent {
     overflow-x: scroll;
-    width: calc(100% + 16px);
+    width: calc(100% + 32px);
+    padding: 16px;
+    margin: -16px;
+}
+
+.grid {
+    padding-right: 16px;
 }

src/components/CompatibilitySection/CompatibilitySection.tsx

@@ -19,7 +19,7 @@ const compatibilities = [
 export default function CompatibilitySection() {
     return (
         <Section title="Compatibility" contentClassName={styles.sectionContent}>
-            <Grid columns={5}>
+            <Grid columns={5} className={styles.grid}>
                 {compatibilities.map((compatibility, index) => (
                     <CompatibilityCard key={index} {...compatibility} />
                 ))}

src/components/Horoscope/Horoscope.module.scss

@@ -24,8 +24,13 @@
     flex-direction: column;
     padding-inline: 8px;
     gap: 20px;
+    transition: height 2s ease;
 }
 
-.seeAll {
+.seeAllButton {
-    text-align: right;
+    padding: 0 !important;
+    background: none !important;
+    border-radius: 0 !important;
+    width: fit-content !important;
+    margin-left: auto;
 }

src/components/Horoscope/Horoscope.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import TabBar, { Tab } from "../ui/TabBar/TabBar";
 import Text from "../ui/Typography/Typography";
 import styles from "./Horoscope.module.scss";
 import Card from "../ui/Card/Card";
+import Button from "../ui/Button/Button";
 
 type Period = "today" | "week" | "month" | "year";
 
@@ -16,7 +17,7 @@ const TABS: Tab<Period>[] = [
 ];
 
 const HOROSCOPE_TEXT = {
-    today: "Today, Cancer men should trust their intuition — it will guide them through a tricky moment. A pleasant surprise from a loved one is likely. Spend the evening in comfort and calm.",
+    today: "Today, Cancer men should trust their intuition — it will guide them through a tricky moment. A pleasant surprise from a loved one is likely. Spend the evening in comfort and calm. Today, Cancer men should trust their intuition — it will guide them through a tricky moment. A pleasant surprise from a loved one is likely. Spend the evening in comfort and calm.",
     week: "Weekly horoscope text...",
     month: "Monthly horoscope text...",
     year: "Yearly horoscope text...",
@@ -24,6 +25,16 @@ const HOROSCOPE_TEXT = {
 
 export default function Horoscope() {
     const [active, setActive] = useState<Period>("today");
+    const [isCollapsed, setIscollapsed] = useState(true)
+
+    const enableCollapse = useMemo(() => {
+        return HOROSCOPE_TEXT[active]?.split(" ")?.length > 30
+    }, [active])
+
+    const text = useMemo(() => {
+        if (!isCollapsed || !enableCollapse) return HOROSCOPE_TEXT[active];
+        return HOROSCOPE_TEXT[active]?.split(" ").slice(0, 31).join(" ") + " ..."
+    }, [isCollapsed, active, enableCollapse])
 
     return (
         <Card className={styles.card}>
@@ -33,11 +44,13 @@ export default function Horoscope() {
                     — Your Horoscope today —
                 </Text>
                 <Text as="p" weight="medium" className={styles.text}>
-                    {HOROSCOPE_TEXT[active]}
+                    {text}
                 </Text>
-                <Text as="span" size="sm" weight="medium" color="secondary" className={styles.seeAll}>
+                {enableCollapse && <Button className={styles.seeAllButton} onClick={() => setIscollapsed((prev) => !prev)}>
-                    See All
+                    <Text as="span" size="sm" weight="medium" color="secondary" align="right">
+                        {isCollapsed ? "See All" : "Hide"}
                     </Text>
+                </Button>}
             </div>
         </Card>
     );

src/components/MeditationSection/MeditationSection.module.scss

@@ -1,4 +1,10 @@
 .sectionContent {
     overflow-x: scroll;
-    width: calc(100% + 16px);
+    width: calc(100% + 32px);
+    padding: 16px;
+    margin: -16px;
+}
+
+.grid {
+    padding-right: 16px;
 }

src/components/MeditationSection/MeditationSection.tsx

@@ -14,7 +14,7 @@ const meditations = [
 export default function MeditationSection() {
     return (
         <Section title="Meditations" contentClassName={styles.sectionContent}>
-            <Grid columns={5}>
+            <Grid columns={5} className={styles.grid}>
                 {meditations.map((meditation, index) => (
                     <MeditationCard key={index} {...meditation} />
                 ))}

src/components/NavigationBar/NavigationBar.tsx

@@ -1,10 +1,17 @@
 import Logo from "../Logo/Logo"
 import Icon, { IconName } from "../ui/Icon/Icon"
 import styles from "./NavigationBar.module.scss"
+import clsx from "clsx";
 
-export default function NavigationBar() {
+interface NavigationBarProps {
+    className?: string;
+}
+
+export default function NavigationBar({
+    className
+}: NavigationBarProps) {
     return (
-        <header className={styles.header}>
+        <header className={clsx(styles.header, className)}>
             <Icon name={IconName.Menu} />
             <Logo />
             <div>

src/components/PalmSection/PalmSection.module.scss

@@ -1,4 +1,10 @@
 .sectionContent {
     overflow-x: scroll;
-    width: calc(100% + 16px);
+    width: calc(100% + 32px);
+    padding: 16px;
+    margin: -16px;
+}
+
+.grid {
+    padding-right: 16px;
 }

src/components/PalmSection/PalmSection.tsx

@@ -14,7 +14,7 @@ const palms = [
 export default function PalmSection() {
     return (
         <Section title="Palm" contentClassName={styles.sectionContent}>
-            <Grid columns={5}>
+            <Grid columns={5} className={styles.grid}>
                 {palms.map((palm, index) => (
                     <PalmCard key={index} {...palm} />
                 ))}

src/components/ui/Button/Button.module.scss

@@ -1,4 +1,5 @@
 .button {
+    font: inherit;
     display: inline-flex;
     align-items: center;
     justify-content: center;

src/components/ui/Grid/Grid.module.scss

@@ -1,4 +1,5 @@
 .grid {
     display: grid;
     width: 100%;
+    min-width: fit-content;
 }

src/components/ui/Section/Section.module.scss

@@ -7,4 +7,8 @@
 
 .content {
     width: 100%;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
 }

src/components/ui/Section/Section.tsx

@@ -12,6 +12,7 @@ interface SectionProps {
 }
 
 export default function Section({ title, children, className, titleClassName, contentClassName }: SectionProps) {
+
     return (
         <section className={clsx(styles.section, className)}>
             {title &&

src/styles/globals.css

@@ -13,7 +13,7 @@
 html,
 body {
   max-width: 100vw;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }