Features

import { CloudUpload, Folder, Search } from "@mynaui/icons-react";

export default function Features1() {
  return (
    <section className="mx-auto max-w-7xl space-y-12 px-4 py-12">
      <h2 className="text-2xl font-bold tracking-tight md:text-center">
        Designed and built for developers and designers alike
      </h2>
      <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
        <div className="flex items-start gap-4">
          <div className="rounded-full bg-pink-600/10 p-3">
            <CloudUpload stroke={2} className="size-5 text-pink-600" />
          </div>
          <div className="space-y-1">
            <h3 className="text-base font-semibold">Permanent URLs</h3>
            <p className="text-sm text-muted-foreground">
              Your bookmarks are hosted on a CDN and served over HTTP/2 with a
              valid SSL certificate.
            </p>
          </div>
        </div>
        <div className="flex items-start gap-4">
          <div className="rounded-full bg-sky-600/10 p-3">
            <Folder stroke={2} className="size-5 text-sky-600" />
          </div>
          <div className="space-y-1">
            <h3 className="text-base font-semibold">Bookmark Folders</h3>
            <p className="text-sm text-muted-foreground">
              Organize your bookmarks into folders and subfolders. You can also
              move bookmarks between folders.
            </p>
          </div>
        </div>
        <div className="flex items-start gap-4">
          <div className="rounded-full bg-emerald-600/10 p-3">
            <Search stroke={2} className="size-5 text-emerald-600" />
          </div>
          <div className="space-y-1">
            <h3 className="text-base font-semibold">Full Text Search</h3>
            <p className="text-sm text-muted-foreground">
              Search through your bookmarks by title, description, and tags.
              Search results are sorted by relevance.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

import {
  CloudDownload,
  FolderOne,
  Hash,
  Keyboard,
  Move,
  Search,
} from "@mynaui/icons-react";

function FeatureBlock({
  title,
  description,
  icon,
}: {
  title: string;
  description: string;
  icon: React.ReactNode;
}) {
  return (
    <div className="flex flex-col items-start border bg-background p-4 text-sm">
      <div className="rounded-full bg-blue-700 p-2 text-white">{icon}</div>
      <h3 className="mb-2 mt-4 font-semibold">{title}</h3>
      <p className="text-muted-foreground">{description}</p>
    </div>
  );
}

export default function Features2() {
  return (
    <section className="bg-primary-foreground px-4 py-12">
      <div className="mx-auto max-w-5xl space-y-12">
        <h2 className="text-balance text-2xl font-bold tracking-tight md:mx-auto md:max-w-sm md:text-center md:text-3xl">
          Organize your bookmarks easily with folders and tags.
        </h2>
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
          <FeatureBlock
            title="Folders and Subfolders"
            description="Organize your bookmarks into folders and subfolders. You can also move bookmarks between folders."
            icon={<FolderOne className="size-5" />}
          />
          <FeatureBlock
            title="Tags"
            description="Add tags to your bookmarks to easily find them later. You can also filter bookmarks by tags."
            icon={<Hash className="size-5" />}
          />
          <FeatureBlock
            title="Drag and Drop"
            description="Drag and drop bookmarks to reorder them. You can also drag and drop bookmarks between folders."
            icon={<Move className="size-5" />}
          />
          <FeatureBlock
            title="Import and Export"
            description="Import bookmarks from your browser or export your bookmarks to a file. You can also import bookmarks from a file."
            icon={<CloudDownload className="size-5" />}
          />
          <FeatureBlock
            title="Keyboard Shortcuts"
            description="Use keyboard shortcuts to quickly navigate around the app. You can also use keyboard shortcuts to add bookmarks."
            icon={<Keyboard className="size-5" />}
          />
          <FeatureBlock
            title="Search"
            description="Search for bookmarks by title, description, or URL. You can also search for bookmarks by tag."
            icon={<Search className="size-5" />}
          />
        </div>
      </div>
    </section>
  );
}

import { Check } from "@mynaui/icons-react";

function FeatureBlock({ title }: { title: string }) {
  return (
    <div className="mb-2 mr-2 flex items-center space-x-3 rounded-full border py-2 pl-2 pr-4">
      <div className="rounded-full bg-blue-700/10 p-2 text-blue-700">
        <Check className="size-4" stroke={2} />
      </div>
      <h3 className="font-medium">{title}</h3>
    </div>
  );
}

export default function Features3() {
  return (
    <section className="mx-auto max-w-2xl space-y-12 px-4 py-14">
      <div className="space-y-2 md:text-center">
        <h2 className="text-balance text-3xl font-bold tracking-tighter">
          Loaded with features to help you organize your bookmarks
        </h2>
        <p className="text-balance text-sm text-muted-foreground">
          Thousands of developers and designers use Bookmarkly to organize their
          bookmarks. Here are some of the reasons why:
        </p>
      </div>

      <div className="flex flex-row flex-wrap md:items-center md:justify-center">
        <FeatureBlock title="Folders and Subfolders" />
        <FeatureBlock title="Tags" />
        <FeatureBlock title="Drag and Drop" />
        <FeatureBlock title="Import and Export" />
        <FeatureBlock title="Keyboard Shortcuts" />
        <FeatureBlock title="Search" />
        <FeatureBlock title="Dark Mode" />
        <FeatureBlock title="Mobile Friendly" />
        <FeatureBlock title="Open Source" />
      </div>
    </section>
  );
}

function FeatureBlock({
  title,
  description,
  image,
}: {
  title: string;
  description: string;
  image?: string;
}) {
  return (
    <div className="flex flex-col gap-5 text-center">
      <img
        src={image}
        alt={title}
        className="h-64 w-full rounded-lg border bg-primary-foreground object-cover"
      />
      <div>
        <h3 className="mb-2 text-base font-medium">{title}</h3>
        <p className="text-muted-foreground">{description}</p>
      </div>
    </div>
  );
}

export default function Features4() {
  return (
    <section className="mx-auto max-w-5xl space-y-14 px-4 py-20">
      <h2 className="text-2xl font-bold tracking-tight md:text-center">
        Designed and built for developers and designers alike
      </h2>
      <div className="grid grid-cols-1 gap-16 md:grid-cols-3">
        <FeatureBlock
          title="Folders and Subfolders"
          description="Organize your bookmarks into folders and subfolders."
          image="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
        />
        <FeatureBlock
          title="Tags"
          description="Add tags to your bookmarks to make them easier to find."
          image="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
        />
        <FeatureBlock
          title="Drag and Drop"
          description="Drag and drop bookmarks to reorder them."
          image="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
        />
      </div>
    </section>
  );
}

import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { ArrowRight, Check } from "@mynaui/icons-react";

function FeatureBlock({
  title,
  description,
  image,
  featureList,
  position = "left",
}: {
  title: string;
  description: string;
  image?: string;
  featureList?: string[];
  position?: "left" | "right";
}) {
  return (
    <div className="grid grid-cols-1 items-center gap-8 md:grid-cols-2 md:gap-24">
      <img
        src={image}
        alt={title}
        className={cn(
          "h-80 w-full bg-primary-foreground object-cover",
          position === "left" ? "" : "md:order-last",
        )}
      />
      <div>
        <h3 className="mb-2 text-xl font-semibold">{title}</h3>
        <p className="text-muted-foreground">{description}</p>
        {featureList && (
          <ul className="my-6 space-y-3 text-muted-foreground">
            {featureList.map((feature) => (
              <li key={feature}>
                <Check
                  className="mr-2 inline-block size-4 text-emerald-500"
                  stroke={2}
                />
                <span>{feature}</span>
              </li>
            ))}
          </ul>
        )}
        <a href="#" className={buttonVariants()}>
          <span>Get started</span>
          <ArrowRight className="size-4" stroke={2} />
        </a>
      </div>
    </div>
  );
}

export default function Features5() {
  return (
    <section className="mx-auto max-w-4xl space-y-20 px-4 py-20">
      <h2 className="text-2xl font-bold tracking-tight md:mx-auto md:max-w-sm md:text-center md:text-3xl">
        Organize your bookmarks easily with folders and tags.
      </h2>
      <FeatureBlock
        title="Folders and Subfolders"
        description="Organize your bookmarks into folders and subfolders. You can also move bookmarks between folders."
        image="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
        featureList={[
          "Organize bookmarks into folders and subfolders",
          "Move bookmarks between folders",
          "Drag and drop bookmarks to reorder them",
        ]}
      />
      <FeatureBlock
        title="Tags"
        description="Add tags to your bookmarks to make them easier to find. You can also filter bookmarks by tag."
        image="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
        featureList={[
          "Add tags to your bookmarks",
          "Filter bookmarks by tag",
          "Drag and drop bookmarks to reorder them",
        ]}
        position="right"
      />
      <FeatureBlock
        title="Search"
        description="Search your bookmarks by title, description, or tag. You can also filter bookmarks by tag."
        image="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
        featureList={[
          "Search bookmarks by title, description, or tag",
          "Filter bookmarks by tag",
          "Find bookmarks by URL",
        ]}
      />
      <FeatureBlock
        title="Import and Export"
        description="Import bookmarks from your browser or export your bookmarks to a JSON file."
        image="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
        featureList={[
          "Import bookmarks from your browser",
          "Export bookmarks to a JSON file",
          "Import bookmarks from a JSON file",
        ]}
        position="right"
      />
    </section>
  );
}

import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import {
  CalendarCheck,
  ChartBar,
  Inbox,
  InboxArchive,
  Lightning,
  Message,
  TargetSolid,
  UsersGroup,
} from "@mynaui/icons-react";

export default function Features6() {
  return (
    <section className="mx-auto max-w-7xl px-4 py-16">
      <div className="mx-auto mb-12 max-w-2xl text-center">
        <Badge variant="outline">Our Features</Badge>
        <h2 className="my-3 text-balance text-3xl font-bold tracking-tight">
          Project Management Excellence
        </h2>
        <p className="text-base text-muted-foreground">
          Streamline your projects with our powerful features
        </p>
      </div>
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
        {features.map((feature, index) => (
          <Card key={index} className="shadow-none">
            <CardContent className="pt-6">
              <div
                className={`mb-4 inline-block rounded-lg ${feature.iconBG} p-2`}
              >
                <feature.icon
                  className={`size-6 ${feature.iconColor}`}
                  aria-hidden="true"
                />
              </div>
              <h3 className="mb-2 text-lg font-semibold">{feature.title}</h3>
              <p className="text-muted-foreground">{feature.description}</p>
            </CardContent>
          </Card>
        ))}
      </div>
      <p className="mt-12 text-center text-sm text-muted-foreground">
        MynaUI offers comprehensive project management solutions for businesses
        of all sizes.
      </p>
    </section>
  );
}

const features = [
  {
    icon: Inbox,
    title: "Task Management",
    description:
      "Organize and prioritize tasks efficiently for your team's success.",
    iconBG: "bg-red-100",
    iconColor: "text-red-500",
  },
  {
    icon: Lightning,
    title: "Real-time Updates",
    description:
      "Stay informed with instant notifications on project progress.",
    iconBG: "bg-blue-100",
    iconColor: "text-blue-500",
  },
  {
    icon: UsersGroup,
    title: "Team Collaboration",
    description: "Foster teamwork with integrated communication tools.",
    iconBG: "bg-green-100",
    iconColor: "text-green-500",
  },
  {
    icon: TargetSolid,
    title: "Goal Tracking",
    description: "Set and monitor project milestones and objectives easily.",
    iconBG: "bg-yellow-100",
    iconColor: "text-yellow-500",
  },
  {
    icon: ChartBar,
    title: "Analytics Dashboard",
    description:
      "Gain insights with comprehensive project performance metrics.",
    iconBG: "bg-purple-100",
    iconColor: "text-purple-500",
  },
  {
    icon: CalendarCheck,
    title: "Resource Scheduling",
    description: "Optimize resource allocation for maximum efficiency.",
    iconBG: "bg-orange-100",
    iconColor: "text-orange-500",
  },
  {
    icon: Message,
    title: "Client Communication",
    description: "Streamline client interactions within the project platform.",
    iconBG: "bg-pink-100",
    iconColor: "text-pink-500",
  },
  {
    icon: InboxArchive,
    title: "Project Templates",
    description: "Kickstart projects quickly with customizable templates.",
    iconBG: "bg-muted",
    iconColor: "text-muted-foreground",
  },
];

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Calendar,
  ClockCircle,
  Shield,
  TrendingUp,
  Users,
} from "@mynaui/icons-react";

export default function Component() {
  return (
    <section className="mx-auto max-w-7xl px-4 py-24">
      <div className="mx-auto mb-12 max-w-2xl text-center">
        <Badge variant="outline">Our Features</Badge>
        <h2 className="my-3 text-balance text-3xl font-bold tracking-tight">
          Mastering Project Management
        </h2>
        <p className="text-base text-muted-foreground">
          Elevate your projects with our comprehensive toolkit
        </p>
      </div>

      <div className="mb-6 grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <Calendar className="mb-2 size-8 stroke-2 text-red-500" />
            <CardTitle>Timeline Management</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="mb-4 text-muted-foreground">
              Create and manage project timelines with ease. Set milestones,
              track deadlines, and visualize project progress in real-time.
            </p>
            <Button variant="outline">Explore Timelines</Button>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <Users className="mb-2 size-8 stroke-2 text-blue-500" />
            <CardTitle>Team Collaboration</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="mb-4 text-muted-foreground">
              Enhance team productivity with our collaboration tools. Share
              documents, communicate effectively, and work together seamlessly.
            </p>
            <Button variant="outline">Boost Teamwork</Button>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-6 md:grid-cols-3">
        <Card>
          <CardHeader>
            <TrendingUp className="mb-2 size-8 stroke-2 text-green-500" />
            <CardTitle>Performance Metrics</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="mb-4 text-muted-foreground">
              Track key performance indicators and project health. Generate
              insightful reports to make data-driven decisions.
            </p>
            <Button variant="outline">View Metrics</Button>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <ClockCircle className="mb-2 size-8 stroke-2 text-yellow-500" />
            <CardTitle>Time Tracking</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="mb-4 text-muted-foreground">
              Monitor time spent on tasks and projects. Improve estimation
              accuracy and optimize resource allocation.
            </p>
            <Button variant="outline">Start Tracking</Button>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <Shield className="mb-2 size-8 stroke-2 text-purple-500" />
            <CardTitle>Risk Management</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="mb-4 text-muted-foreground">
              Identify, assess, and mitigate project risks. Stay prepared with
              contingency plans and proactive risk strategies.
            </p>
            <Button variant="outline">Manage Risks</Button>
          </CardContent>
        </Card>
      </div>
    </section>
  );
}

import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import {
  ChartBar,
  ClockCircle,
  Copy,
  Lightning,
  Target,
  Users,
} from "@mynaui/icons-react";

export default function Features8() {
  return (
    <section className="mx-auto max-w-7xl px-4 py-24">
      <div className="mx-auto mb-12 max-w-2xl text-center">
        <Badge variant="outline">Our Features</Badge>
        <h2 className="my-3 text-balance text-3xl font-bold tracking-tight">
          Streamline Your Project Management
        </h2>
        <p className="text-base text-muted-foreground">
          Boost productivity with our comprehensive tools
        </p>
      </div>
      <div className="grid items-center gap-8 md:grid-cols-2">
        <Card className="flex size-full items-center justify-center overflow-hidden p-4">
          <img
            src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
            alt="Project management illustration"
            className="size-full max-h-full max-w-full rounded object-cover"
          />
        </Card>
        <div className="grid grid-cols-2 gap-6">
          {[
            {
              icon: ClockCircle,
              iconColor: "text-red-500",
              title: "98%",
              description: "On-time project delivery rate",
            },
            {
              icon: Users,
              iconColor: "text-blue-500",
              title: "50+",
              description: "Team collaboration tools",
            },
            {
              icon: ChartBar,
              iconColor: "text-green-500",
              title: "3x",
              description: "Increase in team productivity",
            },
            {
              icon: Target,
              iconColor: "text-yellow-500",
              title: "100%",
              description: "Goal achievement accuracy",
            },
            {
              icon: Lightning,
              iconColor: "text-purple-500",
              title: "24/7",
              description: "Real-time project updates",
            },
            {
              icon: Copy,
              iconColor: "text-orange-500",
              title: "1000+",
              description: "Project templates available",
            },
          ].map((item, index) => (
            <Card key={index} className="p-4">
              <CardContent className="flex flex-col items-center p-4 text-center">
                <item.icon
                  className={`mb-2 size-8 ${item.iconColor}`}
                  aria-hidden="true"
                />
                <h3 className="mb-1 text-2xl font-bold">{item.title}</h3>
                <p className="text-sm text-muted-foreground">
                  {item.description}
                </p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}