+
+ )
+}
+
diff --git a/src/components/landing/features.tsx b/src/components/landing/features.tsx
new file mode 100644
index 0000000..1646e81
--- /dev/null
+++ b/src/components/landing/features.tsx
@@ -0,0 +1,86 @@
+import { LockKeyhole, IdCard, Github, GlobeLock, type LucideIcon } from 'lucide-react'
+import { Button } from "@/components/ui/button"
+import Link from 'next/link';
+import { Card, CardContent } from "@/components/ui/card"
+
+type FeatureProps = {
+ icon: LucideIcon;
+ title: string;
+ description: string;
+};
+
+export default function Features() {
+ const features: FeatureProps[] = [
+ {
+ icon: LockKeyhole,
+ title: "Set a password for your notes",
+ description: "We never store your password. Instead, your password is used as a key to encrypt your notepad. The encrypted output is then stored in our database, and without the password, it is essentially just a random set of characters."
+ },
+ {
+ icon: GlobeLock,
+ title: "Hashed Site names",
+ description: "Your site or notepad names are hashed before being stored in our database. This ensures that even if your password is compromised, it is impossible for anyone to determine your site name."
+ },
+ {
+ icon: IdCard,
+ title: "No login" ,
+ description: "Since we only need a password to encrypt your notes, there's no need for you to log in or provide your email or any other personal information."
+ },
+ {
+ icon: Github,
+ title: "Fully open-source",
+ description: "We are fully open-source on Github. You can feel free to fork the repo and self-deploy or make some customized changes for yourself."
+ },
+ ];
+
+ return (
+ + FAQs +
+
+ {faqs.map((faq, index) => (
+
+
+
+ {openItems.includes(`item-${index}`) && (
+
+ ))}
+
+
+ )}
+ {faq.answer}
+
+
+
+
+ )
+}
+
+function Feature({ icon: Icon, title, description }: FeatureProps) {
+ return (
+
+
+
+
+
+
+
+
+ Encrypted Notepad
++ Protect your notes with a secure password. +
+
+ {features.map((feature, index) => (
+
+
+
+ 
+
+
+
+
+ )
+}
diff --git a/src/components/landing/hero.tsx b/src/components/landing/hero.tsx
index 5ef2002..a620cac 100644
--- a/src/components/landing/hero.tsx
+++ b/src/components/landing/hero.tsx
@@ -22,7 +22,7 @@ export default function Hero() {
+
+
+
+ {title}
+{description}
+
+
diff --git a/src/components/landing/how-to-use.tsx b/src/components/landing/how-to-use.tsx
new file mode 100644
index 0000000..98930b3
--- /dev/null
+++ b/src/components/landing/how-to-use.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+
+export default function HowToUse() {
+ const steps = [
+ {
+ title: "Step 1",
+ description: "Create a notepad with a unique name by simply hovering to sealnotes.com/your-name",
+ },
+ {
+ title: "Step 2",
+ description: "Set a password and start writing notes",
+ },
+ {
+ title: "Step 3",
+ description: "Save and close the tab once you are done!",
+ },
+ ];
+
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ 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) => (
+
+
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
new file mode 100644
index 0000000..ec505d0
--- /dev/null
+++ b/src/components/ui/carousel.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+ type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+ opts?: CarouselOptions
+ plugins?: CarouselPlugin
+ orientation?: "horizontal" | "vertical"
+ setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+ carouselRef: ReturnType[0]
+ api: ReturnType[1]
+ scrollPrev: () => void
+ scrollNext: () => void
+ canScrollPrev: boolean
+ canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext(null)
+
+function useCarousel() {
+ const context = React.useContext(CarouselContext)
+
+ if (!context) {
+ throw new Error("useCarousel must be used within a & CarouselProps
+>(
+ (
+ {
+ orientation = "horizontal",
+ opts,
+ setApi,
+ plugins,
+ className,
+ children,
+ ...props
+ },
+ ref
+ ) => {
+ const [carouselRef, api] = useEmblaCarousel(
+ {
+ ...opts,
+ axis: orientation === "horizontal" ? "x" : "y",
+ },
+ plugins
+ )
+ const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+ const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+ const onSelect = React.useCallback((api: CarouselApi) => {
+ if (!api) {
+ return
+ }
+
+ setCanScrollPrev(api.canScrollPrev())
+ setCanScrollNext(api.canScrollNext())
+ }, [])
+
+ const scrollPrev = React.useCallback(() => {
+ api?.scrollPrev()
+ }, [api])
+
+ const scrollNext = React.useCallback(() => {
+ api?.scrollNext()
+ }, [api])
+
+ const handleKeyDown = React.useCallback(
+ (event: React.KeyboardEvent) => {
+ if (event.key === "ArrowLeft") {
+ event.preventDefault()
+ scrollPrev()
+ } else if (event.key === "ArrowRight") {
+ event.preventDefault()
+ scrollNext()
+ }
+ },
+ [scrollPrev, scrollNext]
+ )
+
+ React.useEffect(() => {
+ if (!api || !setApi) {
+ return
+ }
+
+ setApi(api)
+ }, [api, setApi])
+
+ React.useEffect(() => {
+ if (!api) {
+ return
+ }
+
+ onSelect(api)
+ api.on("reInit", onSelect)
+ api.on("select", onSelect)
+
+ return () => {
+ api?.off("select", onSelect)
+ }
+ }, [api, onSelect])
+
+ return (
+
+
+ )
+ }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const { carouselRef, orientation } = useCarousel()
+
+ return (
+
+>(({ className, ...props }, ref) => {
+ const { orientation } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+ type CarouselApi,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselPrevious,
+ CarouselNext,
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 967c37b..62f8d04 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,7 +7,10 @@ export default {
theme: {
extend: {
fontFamily: {
- sans: ["var(--font-geist-sans)", ...fontFamily.sans]
+ sans: [
+ 'var(--font-geist-sans)',
+ ...fontFamily.sans
+ ]
},
borderRadius: {
lg: 'var(--radius)',
@@ -55,6 +58,28 @@ export default {
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
+ },
+ 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'
}
}
},
+
+ );
+}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..2f55a32
--- /dev/null
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,57 @@
+"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
+ {steps.map((step, index) => (
+
+
+
+
+ ))}
+
+ {step.title}
+{step.description}
+{children}
+
+ {children}
+
+
+
+
+ )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes