diff --git a/package.json b/package.json index 7e7d2a03..aecb50d1 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@mantine/notifications": "7.1.7", "@paralleldrive/cuid2": "2.2.2", "@planetscale/database": "^1.11.0", + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 10715f7c..387e25bf 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,6 +1,7 @@ import FooterBar from "@/components/home/footer-bar"; import HeaderBar from "@/components/home/header"; import Faq from "@/sections/home/faq"; +import { Features } from "@/sections/home/features/features"; import Hero from "@/sections/home/hero"; import Mission from "@/sections/home/mission"; import Pricing from "@/sections/home/pricing"; @@ -10,6 +11,7 @@ export default function page() { <> + diff --git a/src/components/dashboard/user-nav.tsx b/src/components/dashboard/user-nav.tsx index 8d75637e..99e097e7 100644 --- a/src/components/dashboard/user-nav.tsx +++ b/src/components/dashboard/user-nav.tsx @@ -43,8 +43,7 @@ export async function UserNav() { - Settings - New Organization + Settings (coming soon)
+
- +
- - +
+
); } diff --git a/src/components/home/footer-bar/footer-links.module.css b/src/components/home/footer-bar/footer-links.module.css deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/home/footer-bar/footer-links.tsx b/src/components/home/footer-bar/footer-links.tsx index 29638df3..ac6723f2 100644 --- a/src/components/home/footer-bar/footer-links.tsx +++ b/src/components/home/footer-bar/footer-links.tsx @@ -1,22 +1,18 @@ -"use client"; - -import { Anchor, Group } from "@mantine/core"; +import Link from "next/link"; export function FooterLinks() { return ( - +
{footerLinks?.map(({ title, link }) => ( - - c="dimmed" + {title} - + ))} - +
); } diff --git a/src/components/home/header/header-actions.tsx b/src/components/home/header/header-actions.tsx index c7f3f313..773be0ef 100644 --- a/src/components/home/header/header-actions.tsx +++ b/src/components/home/header/header-actions.tsx @@ -1,6 +1,5 @@ import { cn } from "@/lib/utils"; import { buttonVariants } from "@/ui/button"; -import { Group } from "@mantine/core"; import { useSession } from "next-auth/react"; import Link from "next/link"; @@ -8,7 +7,7 @@ export function HeaderActions() { const session = useSession(); return ( - + <> {session?.data ? ( )} - + ); } diff --git a/src/components/home/heading/heading.module.css b/src/components/home/heading/heading.module.css deleted file mode 100644 index 2a3af715..00000000 --- a/src/components/home/heading/heading.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.heading { - @media (max-width: $mantine-breakpoint-sm) { - font-size: 24px; - } -} diff --git a/src/components/home/heading/heading.tsx b/src/components/home/heading/heading.tsx index 979b5bf7..4abd3a5f 100644 --- a/src/components/home/heading/heading.tsx +++ b/src/components/home/heading/heading.tsx @@ -1,7 +1,3 @@ -import { Stack, Text, Title } from "@mantine/core"; - -import classes from "./heading.module.css"; - export function Heading({ title, description, @@ -10,12 +6,9 @@ export function Heading({ description: string; }) { return ( - - - {title} - - {description} - {/* {description} */} - +
+

{title}

+

{description}

+
); } diff --git a/src/components/home/section/section.tsx b/src/components/home/section/section.tsx index 0a56184a..d24e245a 100644 --- a/src/components/home/section/section.tsx +++ b/src/components/home/section/section.tsx @@ -1,24 +1,16 @@ -import { Container } from "@mantine/core"; - export function Section({ id, children, }: { id: string; - children: React.ReactNode[]; + children: React.ReactNode[] | React.ReactNode; }) { return ( - {children} - + ); } diff --git a/src/sections/home/faq/faq.tsx b/src/sections/home/faq/faq.tsx index a61dbc7f..e1b297f9 100644 --- a/src/sections/home/faq/faq.tsx +++ b/src/sections/home/faq/faq.tsx @@ -2,52 +2,27 @@ import Heading from "@/components/home/heading"; import Section from "@/components/home/section"; -import { Accordion, Container } from "@mantine/core"; -import classes from "./faq.module.css"; - -const placeholder = - "It can’t help but hear a pin drop from over half a mile away, so it lives deep in the mountains where there aren’t many people or Pokémon.It was born from sludge on the ocean floor. In a sterile environment, the germs within its body can’t multiply, and it dies.It has no eyeballs, so it can’t see. It checks its surroundings via the ultrasonic waves it emits from its mouth."; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/ui/accordion"; export function Faq() { return (
- - - - How can I reset my password? - {placeholder} - - - - - Can I create more that one account? - - {placeholder} - - - - - How can I subscribe to monthly newsletter? - - {placeholder} - - - - - Do you store credit card information securely? - - {placeholder} - - - - - What payment systems to you work with? - - {placeholder} - +
+ + + Is it accessible? + + Yes. It adheres to the WAI-ARIA design pattern. + + - +
); } diff --git a/src/sections/home/features/feature-card.tsx b/src/sections/home/features/feature-card.tsx index 3ca4104d..442733a2 100644 --- a/src/sections/home/features/feature-card.tsx +++ b/src/sections/home/features/feature-card.tsx @@ -1,43 +1,23 @@ -// import { Card, Text, useMantineTheme } from "@mantine/core"; -// import { Icon as IconType } from "@tabler/icons-react"; +import { cn } from "@/lib/utils"; -// export function FeatureCard({ -// title, -// description, -// Icon, -// }: { -// title: string; -// description: string; -// Icon: IconType; -// }) { -// const theme = useMantineTheme(); -// return ( -// -// -// -// {title} -// -// -// {description} -// -// -// ); -// } +export default function FeatureCard({ invert = false }: { invert?: boolean }) { + return ( +
+
+

Title

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem + nesciunt beatae, perspiciatis, distinctio vel itaque illum ut + excepturi eius a ad repellendus! Laboriosam quod aliquid atque + provident ullam inventore vitae. +

+
+
Diagram
+
+ ); +} diff --git a/src/sections/home/features/features.tsx b/src/sections/home/features/features.tsx index 9f7fbecd..11d60645 100644 --- a/src/sections/home/features/features.tsx +++ b/src/sections/home/features/features.tsx @@ -1,29 +1,24 @@ -// import Section from "@/components/home/section"; -// import Heading from "@/components/home/heading"; -// import { SimpleGrid } from "@mantine/core"; -// import { FeatureCard } from "./feature-card"; +import Heading from "@/components/home/heading"; +import Section from "@/components/home/section"; +import FeatureCard from "./feature-card"; // import { featuresData } from "./featuresData"; -// export function Features() { -// const features = featuresData.map((feature) => ( -// -// )); +export function Features() { + // const features = featuresData.map((feature) => ( + // + // )); -// return ( -//
-// - -// -// {features} -// -//
-// ); -// } + return ( +
+ +
+ + + +
+
+ ); +} diff --git a/src/sections/home/footer-bar/footer-bar.tsx b/src/sections/home/footer-bar/footer-bar.tsx deleted file mode 100644 index d75e47c7..00000000 --- a/src/sections/home/footer-bar/footer-bar.tsx +++ /dev/null @@ -1,75 +0,0 @@ -// import { -// ActionIcon, -// Container, -// createStyles, -// Group, -// Image, -// Stack, -// Text, -// } from "@mantine/core"; -// import { IconBrandLinkedin } from "@tabler/icons-react"; -// import Link from "next/link"; - -// const useStyles = createStyles((theme) => ({ -// footer: { -// marginTop: 120, -// borderTop: `1px solid ${ -// theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2] -// }`, -// }, - -// inner: { -// display: "flex", -// justifyContent: "space-between", -// alignItems: "center", -// paddingTop: theme.spacing.xl, -// paddingBottom: theme.spacing.xl, - -// [theme.fn.smallerThan("xs")]: { -// flexDirection: "column", -// gap: "1.25em", -// }, -// }, - -// links: { -// [theme.fn.smallerThan("xs")]: { -// marginTop: theme.spacing.md, -// }, -// }, -// })); - -// export function FooterBar() { -// const { classes } = useStyles(); - -// return ( -//
-// -// HubOne logo -// -// -// Made with love ❤️ by ihsen.me -// -// -// © 2023 HubOne. All rights reserved. -// -// -// -// -// -// -// -// -//
-// ); -// } diff --git a/src/sections/home/footer-bar/index.ts b/src/sections/home/footer-bar/index.ts deleted file mode 100644 index ab43b7f0..00000000 --- a/src/sections/home/footer-bar/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -// import { FooterBar } from "./footer-bar"; - -// export default FooterBar; diff --git a/src/sections/home/hero/hero.old.tsx b/src/sections/home/hero/hero.old.tsx new file mode 100644 index 00000000..d06b3102 --- /dev/null +++ b/src/sections/home/hero/hero.old.tsx @@ -0,0 +1,117 @@ +"use client"; + +import { Button, Container, Group, Text, Title } from "@mantine/core"; + +import { IconArchive, IconBook, IconUsers } from "@tabler/icons-react"; +import classes from "./hero.module.css"; + +export function Hero() { + return ( +
+ +
+
+ + The{" "} + <Text component="span" variant="gradient" inherit> + central Hub + </Text>{" "} + for you and your team. + + + + Tired of keeping track of your most used websites? Tired of not + finding that one super important link? Create you Hub and sync + with your team. + + + + + + +
+
+
+ +
+ + + Onboarding + + + A document containing all about onboarding new team members. + +
+
+
+ +
+ + Documentation + + + Our public documentation website for internal and external users. + +
+
+
+ +
+ + Tutorials + + + A collection to of tutorials for the most used tools in our + compony. + +
+
+ +
+ ); +} diff --git a/src/sections/home/hero/hero.tsx b/src/sections/home/hero/hero.tsx index d06b3102..c4d5856e 100644 --- a/src/sections/home/hero/hero.tsx +++ b/src/sections/home/hero/hero.tsx @@ -1,117 +1,48 @@ -"use client"; - -import { Button, Container, Group, Text, Title } from "@mantine/core"; - -import { IconArchive, IconBook, IconUsers } from "@tabler/icons-react"; -import classes from "./hero.module.css"; +import { Button } from "@/ui/button"; export function Hero() { return ( -
- -
-
- - The{" "} - <Text component="span" variant="gradient" inherit> - central Hub - </Text>{" "} - for you and your team. - - - - Tired of keeping track of your most used websites? Tired of not - finding that one super important link? Create you Hub and sync - with your team. - - - - - - -
-
-
- -
- - - Onboarding - - - A document containing all about onboarding new team members. - -
-
-
- -
- - Documentation - - - Our public documentation website for internal and external users. - -
-
-
- -
- - Tutorials - - - A collection to of tutorials for the most used tools in our - compony. - +
+ )} + +
+

+ {title} +

+
+

+ {price} {currency === "eur" ? "€" : ""} +

+

{frequency}

+
+
- - - {title} - - - - {price} {currency === "eur" ? "€" : ""} - - - {frequency} - - - - - - {description} - +

{description}

- - {lastLevel && ( - - - Everything in {lastLevel} - - )} - {features.map((feature) => ( - - - {feature} - - ))} - +
+ {lastLevel && ( +
+ +

Everything in {lastLevel}

+
+ )} + {features.map((feature) => ( +
+ +

{feature}

+
+ ))} +
- + }} + > + {button} + + ); } diff --git a/src/ui/accordion.tsx b/src/ui/accordion.tsx new file mode 100644 index 00000000..937620af --- /dev/null +++ b/src/ui/accordion.tsx @@ -0,0 +1,60 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/yarn.lock b/yarn.lock index 7844b1e1..53c02c82 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1222,6 +1222,34 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-accordion@npm:^1.1.2": + version: 1.1.2 + resolution: "@radix-ui/react-accordion@npm:1.1.2" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/primitive": "npm:1.0.1" + "@radix-ui/react-collapsible": "npm:1.0.3" + "@radix-ui/react-collection": "npm:1.0.3" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-context": "npm:1.0.1" + "@radix-ui/react-direction": "npm:1.0.1" + "@radix-ui/react-id": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-use-controllable-state": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 54fe3642306d62f68ac4d534c6bec1998d00d441663b16119fe267cb085e48761acf3c02b9466245d42b8ab419632a573d35d79d3a5d328906bde121dd1816db + languageName: node + linkType: hard + "@radix-ui/react-arrow@npm:1.0.3": version: 1.0.3 resolution: "@radix-ui/react-arrow@npm:1.0.3" @@ -1265,6 +1293,33 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-collapsible@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-collapsible@npm:1.0.3" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/primitive": "npm:1.0.1" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-context": "npm:1.0.1" + "@radix-ui/react-id": "npm:1.0.1" + "@radix-ui/react-presence": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-use-controllable-state": "npm:1.0.1" + "@radix-ui/react-use-layout-effect": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 7bc3e601e3fa84991bdf46ea1bdb725760942f8facadf42f05808abc7a1399c6ab90a00c70699367026afbd8afba0254ff9634f9d1e05b24ae452d9e0524d328 + languageName: node + linkType: hard + "@radix-ui/react-collection@npm:1.0.3": version: 1.0.3 resolution: "@radix-ui/react-collection@npm:1.0.3" @@ -5399,6 +5454,7 @@ __metadata: "@next/eslint-plugin-next": "npm:^14.0.0" "@paralleldrive/cuid2": "npm:2.2.2" "@planetscale/database": "npm:^1.11.0" + "@radix-ui/react-accordion": "npm:^1.1.2" "@radix-ui/react-avatar": "npm:^1.0.4" "@radix-ui/react-dialog": "npm:^1.0.5" "@radix-ui/react-dropdown-menu": "npm:^2.0.6"