- Project Milestones -
-- Track progress across custom flows for your team. Find the right - balance for the user, privacy and security. -
-
- {/* Secondary illustration */}
-
-
- {/* Video thumbnail */}
-
- {/* End: Video thumbnail */}
-
-
-
- );
-}
diff --git a/components/page-illustration.tsx b/components/page-illustration.tsx
deleted file mode 100644
index 0c287c3f2..000000000
--- a/components/page-illustration.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import Image from "next/image";
-import Illustration from "@/public/images/page-illustration.svg";
-import BlurredShapeGray from "@/public/images/blurred-shape-gray.svg";
-import BlurredShape from "@/public/images/blurred-shape.svg";
-
-export default function PageIllustration({
- multiple = false,
-}: {
- multiple?: boolean;
-}) {
- return (
- <>
-
- {multiple && (
- <>
-
-
-
- )}
-
- );
-}
diff --git a/components/spotlight.tsx b/components/spotlight.tsx
deleted file mode 100644
index 6c2d14160..000000000
--- a/components/spotlight.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client";
-
-import React, { useRef, useState, useEffect } from "react";
-import useMousePosition from "@/utils/useMousePosition";
-
-type SpotlightProps = {
- children: React.ReactNode;
- className?: string;
-};
-
-export default function Spotlight({
- children,
- className = "",
-}: SpotlightProps) {
- const containerRef = useRef
- {children}
-
- );
-}
diff --git a/components/testimonials.tsx b/components/testimonials.tsx
deleted file mode 100644
index bef6dc61b..000000000
--- a/components/testimonials.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import useMasonry from "@/utils/useMasonry";
-import Image, { StaticImageData } from "next/image";
-import TestimonialImg01 from "@/public/images/testimonial-01.jpg";
-import TestimonialImg02 from "@/public/images/testimonial-02.jpg";
-import TestimonialImg03 from "@/public/images/testimonial-03.jpg";
-import TestimonialImg04 from "@/public/images/testimonial-04.jpg";
-import TestimonialImg05 from "@/public/images/testimonial-05.jpg";
-import TestimonialImg06 from "@/public/images/testimonial-06.jpg";
-import TestimonialImg07 from "@/public/images/testimonial-07.jpg";
-import TestimonialImg08 from "@/public/images/testimonial-08.jpg";
-import TestimonialImg09 from "@/public/images/testimonial-09.jpg";
-import ClientImg01 from "@/public/images/client-logo-01.svg";
-import ClientImg02 from "@/public/images/client-logo-02.svg";
-import ClientImg03 from "@/public/images/client-logo-03.svg";
-import ClientImg04 from "@/public/images/client-logo-04.svg";
-import ClientImg05 from "@/public/images/client-logo-05.svg";
-import ClientImg06 from "@/public/images/client-logo-06.svg";
-import ClientImg07 from "@/public/images/client-logo-07.svg";
-import ClientImg08 from "@/public/images/client-logo-08.svg";
-import ClientImg09 from "@/public/images/client-logo-09.svg";
-
-const testimonials = [
- {
- img: TestimonialImg01,
- clientImg: ClientImg01,
- name: "MaKayla P.",
- company: "Disney",
- content:
- "As a content creator, I was always on the lookout for a tool that could help me keep up with the demand. The AI-driven content tool has been a game-changer. It generates high-quality content in a fraction of the time it used to take me.",
- categories: [1, 3, 5],
- },
- {
- img: TestimonialImg02,
- clientImg: ClientImg02,
- name: "Andrew K.",
- company: "Samsung",
- content:
- "I've tried several content generation tools, but this AI-driven tool is by far the best. It understands my brand's voice and consistently produces content that resonates with my audience!",
- categories: [1, 2, 4],
- },
- {
- img: TestimonialImg03,
- clientImg: ClientImg03,
- name: "Lucy D.",
- company: "Rio",
- content:
- "Content creation used to be a bottleneck in our workflow, but not anymore. This AI tool is intuitive and produces top-notch content every time. It's like having an extra team member who never sleeps! Definitely recommend.",
- categories: [1, 2, 5],
- },
- {
- img: TestimonialImg04,
- clientImg: ClientImg04,
- name: "Pavel M.",
- company: "Canon",
- content:
- "The quality of the content generated by this AI tool is outstanding. It has taken our content marketing to new heights, allowing us to publish more frequently without compromising on quality. Highly recommended for anyone.",
- categories: [1, 4],
- },
- {
- img: TestimonialImg05,
- clientImg: ClientImg05,
- name: "Miriam E.",
- company: "Cadbury",
- content:
- "The AI-driven content tool has been a lifesaver for my marketing agency. We can now produce high-quality content for multiple clients quickly and efficiently. It's an invaluable asset to our team.",
- categories: [1, 3, 5],
- },
- {
- img: TestimonialImg06,
- clientImg: ClientImg06,
- name: "Eloise V.",
- company: "Maffell",
- content:
- "I'm amazed at how well this AI-driven content tool performs. It's incredibly versatile and can generate content for blogs, social media, and even product descriptions effortlessly. It's fantastic!",
- categories: [1, 3],
- },
- {
- img: TestimonialImg07,
- clientImg: ClientImg07,
- name: "Pierre-Gilles L.",
- company: "Binance",
- content:
- "I was blown away by how easy it was to create my content using this tool! Within a few hours, I had a professional-looking platform up and running, and my client could not believe it.",
- categories: [1, 2, 5],
- },
- {
- img: TestimonialImg08,
- clientImg: ClientImg08,
- name: "Danielle K.",
- company: "Forbes Inc.",
- content:
- "I've never been a fan of complicated website AI tools, which is why Open PRO is perfect for me. Its minimalist design and simple functionality make staying organized feel like second nature.",
- categories: [1, 4],
- },
- {
- img: TestimonialImg09,
- clientImg: ClientImg09,
- name: "Mary P.",
- company: "Ray Ban",
- content:
- "I've never been one for coding, so finding an AI tool that doesn't require any technical skills was a dream come true. This tool exceeded my expectations, and I'm proud to show off my new stuff to friends.",
- categories: [1, 2],
- },
-];
-
-export default function Testimonials() {
- const masonryContainer = useMasonry();
- const [category, setCategory] = useState
-
- );
-}
-
-export function Testimonial({
- testimonial,
- category,
- children,
-}: {
- testimonial: {
- img: StaticImageData;
- clientImg: StaticImageData;
- name: string;
- company: string;
- content: string;
- categories: number[];
- };
- category: number;
- children: React.ReactNode;
-}) {
- return (
-
- {/* Section header */}
-
-
-
-
- - Don't take our word for it -
-- We provide tech-first solutions that empower decision-makers to - build healthier and happier workspaces from anywhere in the world. -
-
- {/* Buttons */}
-
-
-
-
- {/* Cards */}
-
- {/* Button #1 */}
-
- {/* Button #2 */}
-
- {/* Button #3 */}
-
- {/* Button #4 */}
-
- {/* Button #5 */}
-
-
-
- {testimonials.map((testimonial, index) => (
-
-
-
- {testimonial.content}
-
-
- ))}
-
-
-
- {/* Site branding */}
-
-
-
-
- {/* Desktop sign in links */}
- -
-
- - - Sign In - - -
- - - Register - - -
-
-
- {/* Section header */}
-
- {/* Card 1 */}
-
-
-
-
-
- {/* Spotlight items */}
-
-
- Tailored Workflows
-
-
- - Map your product journey -
-- Simple and elegant interface to start collaborating with your team - in minutes. It seamlessly integrates with your code and your - favorite programming languages. -
-
- {/* Arrow */}
-
- {/* Image */}
-
-
- {/* Card 2 */}
-
-
-
-
-
-
- Built-in Tools
-
-
-
- - Streamline the product development flow with a content - platform that's aligned across specs and insights. -
-
- {/* Arrow */}
-
- {/* Image */}
-
-
- {/* Card 3 */}
-
-
-
-
-
-
- Scale Instantly
-
-
-
- - Streamline the product development flow with a content - platform that's aligned across specs and insights. -
-
- {/* Arrow */}
-
- {/* Image */}
-
-
-
-
-
-
-
- Tailored Flows
-
-
-
- - Streamline the product development flow with a content - platform that's aligned across specs and insights. -
-
+
+
+ {/* 
*/}
+
+
+
+
+
+
+ + + About{" "} + + Company +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit + amet, consectetur adipiscing elit. +
+
+
+
+
+ You already change lives,
+
+
+
+ {/*
+ You already change lives,
+
+
+ {" "}
+ let's make it easier.{" "}
+
+
+
+ {/* Let's remove all the manuals.
+
*/}
+ Stop wasting time and effort managing everthing manually.
+ {/* Join{" "}CAPES.APP and focus on what you love doing most. */}
+
+
+ Start Now
+
+
+ Book a Demo
+
+
+ */}
+ {/*
+ */}
+ {/*
*/}
+ + Frequently Asked{" "} + + Questions + +
+ ++ Still have questions?{" "} + + Contact us + +
+
+
+
+ {" "}
+ {/* Fix width issues */}
+
+ {" "}
+ {/* Adjust margin */}
+ {featureList.map((feature: string) => (
+
+
+ {feature}
+
+
+ ))}
+
+
+
+
+
+ 
+
+
+
+
+ Your own dashboard
+
+
+ Your Whole Business in
+
+
+
+ Your Whole Business in
+
+ One Dashboard
+
+
+ + Replace multiple tools with one powerful platform +
+
+
+
+
+
+
+ {title}
+
+
+
+
+ );
+};
+
+export const FeatureOfferings = () => {
+ return (
+
+
+
+
+
+
+
+
+ {/* Left side component - Content */}
+
+
+
+
+ {/* Right side component - Image */}
+
+
+
+ + Your clients deserves the best. +
++ Provide seamless experience to your clients for all your + offerings and services. +
+
+ {features &&
+ features.map((feature, index) => (
+
+
+ 
+
+
+
+
+
+ {title}
+
+
+
+
+ );
+};
+
+export const FeaturePage = () => {
+ return (
+
+
+
+
+
+
+
+ Capes helps manage
+
+
+
+ Capes helps manage
+
+ your business
+
+
+
+
+
+ {/* Left side component - Image */}
+
+
+
+
+
+ {/* Right side component - Content */}
+
+
+ + Setup your personalized page for your offerings and services. +
+
+ {features &&
+ features.map((feature, index) => (
+
+
+
+
+
+ {title}
+
+
+
+
+ );
+};
+
+export const FeaturePayments = () => {
+ return (
+
+
+
+
+
+
+
+
+ {/* Left side component - Image */}
+
+
+
+
+
+ {/* Right side component - Content */}
+
+
+ + Manage all your payments and notifications +
+ +
+ {features &&
+ features.map((feature, index) => (
+
+
+
+
+
+ {title}
+
+
+
+
+ );
+};
+
+export const FeatureTestimonials = () => {
+ return (
+
+
+
+
+
+
+
+
+ {/* Left side component - Content */}
+
+
+
+
+ {/* Right side component - Image */}
+ + Let the world know your good work. +
+
+ {features &&
+ features.map((feature, index) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Left side component - Image */}
+
+
+
+
+
+ {/* Right side component - Content */}
+
+
+
+
+ Features
+
+
+ + Video, Voice, Group Sessions all in one platform. +
++ Manage and schedule all your video calls, voice calls and + group sessions seamlessly with custom payments. +
+
+ {features &&
+ features.map((feature, index) => (
+
+
+
+
+
+
+ {/* Left side */}
+
+
+ {/*
+ Connect, Manage and
+
+
+
+ {/*
+ {/* Right side */}
+
+ {/* Hero cards sections */}
+ {/* 
+
+ {/* Shadow effect */}
+
+
+
+
+
+ {" "}
+
+
+
+
+ Coming Soon
+
+ 🚀
+ {/*
+ + + Shadcn + {" "} + landing page +
{" "} + for{" "} ++ + React + {" "} + developers +
*/} +
+ Connect, Manage and
+
+ Monetize your Audience
+ {/*
+ cape{" "}
+
+ - Set your business to autopilot. */}
+
+ + The one-stop solution for creators, coaches, teachers, and + professionals to build, grow, and manage their digital business. +
*/} +
+ {featureList.map(({ icon: Icon, label }) => (
+
+
+
+ {/* users */}
+ {/*
+
+ ))}
+
+
*/}
+
+
+
+ 
+
+
+
+
+
+
+ 4.6/5 on Trustpilot
+
+ 1000+ superhero creators
+
+
+
*/}
+
+ {/* profile */}
+
+ 
+
+
+ {/* table */}
+
+ {/*
+ 
+ Leo Miranda
+
+ Frontend Developer
+
+
+
+
+
+
+
+
+ */}
+ 
+
+
+ {/* Pricing
+
+
+
+ Free
+
+ Most popular
+
+
+
+ Lorem ipsum dolor sit, amet ipsum consectetur adipisicing elit.
+
+
+
+
+
+
+
+
+ +
+
+ */}
+
+ {/* product */}
+
+ {/*
+ */}
+ 
+
+
+ );
+};
diff --git a/src/components/HowItWorks.tsx b/src/components/HowItWorks.tsx
new file mode 100644
index 000000000..4a5dd985e
--- /dev/null
+++ b/src/components/HowItWorks.tsx
@@ -0,0 +1,105 @@
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { motion, useInView } from "framer-motion";
+import { useRef } from "react";
+import profile from "../assets/1.png";
+import product from "../assets/2.png";
+import run from "../assets/3.png";
+
+interface FeatureProps {
+ title: string;
+ description: string;
+ number: string;
+ image?: string;
+}
+
+const features: FeatureProps[] = [
+ {
+ number: "1",
+ image: profile,
+ title: "Setup your profile page",
+ description:
+ "Create a profile page that showcases your offerings and services. Add your logo, bio, and links to your social media.",
+ },
+ {
+ number: "2",
+ image: product,
+ title: "Create your offerings",
+ description:
+ "Create your offerings and services. Set up your payment. Share your profile page with your clients.",
+ },
+ {
+ number: "3",
+ image: run,
+ title: "Start onboarding clients",
+ description:
+ "Start onboarding clients and leads. Get your business up and running within minutes.",
+ },
+];
+
+const FeatureCard = ({ title, description, number, image }: FeatureProps) => {
+ const cardRef = useRef(null);
+ const isCardInView = useInView(cardRef, { once: true, amount: 0.3 });
+
+ return (
+ + I really enjoy transforming ideas into functional software that + exceeds expectations +
+
+ $0
+ /month
+
+
+ + +
+ {["4 Team member", "4 GB Storage", "Upto 6 pages"].map(
+ (benefit: string) => (
+
+
+ {benefit}
+ + ) + )} +
+
+
+ Light & dark mode
+
+ Lorem ipsum dolor sit amet consect adipisicing elit. Consectetur
+ natusm.
+
+
+
+
+ How it Works
+
+
+ + Get Started in 3 Easy Steps. +
+
+ {features.map((feature) => (
+
+
+
+ );
+};
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 000000000..63f674d29
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,126 @@
+import { useState } from "react";
+import {
+ NavigationMenu,
+ NavigationMenuItem,
+ NavigationMenuList,
+} from "@/components/ui/navigation-menu";
+import {
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+} from "@/components/ui/sheet";
+
+import { buttonVariants } from "./ui/button";
+// import { Menu } from "lucide-react";
+import { ModeToggle } from "./mode-toggle";
+
+interface RouteProps {
+ href: string;
+ label: string;
+}
+
+const routeList: RouteProps[] = [
+ // {
+ // href: "#features",
+ // label: "Features",
+ // },
+ // {
+ // href: "#services",
+ // label: "Offerings",
+ // },
+ // {
+ // href: "#faq",
+ // label: "FAQ",
+ // },
+];
+
+export const Navbar = () => {
+ const [isOpen, setIsOpen] = useState
+
+
+
+
+ {/*
+ Login
+ */}
+
+
+ + Get + + {" "} + Unlimited{" "} + + Access +
++ Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias + reiciendis. +
+
+ {pricingList.map((pricing: PricingProps) => (
+
+
+
+ {pricing.title}
+ {pricing.popular === PopularPlanType.YES ? (
+
+ Most popular
+
+ ) : null}
+
+ {pricing.description}
+
+
+
+
+
+
+
+ +
+
+
+ ))}
+
+
+ ${pricing.price}
+ /month
+
+
+ + +
+ {pricing.benefitList.map((benefit: string) => (
+
+
+ {benefit}
+ + ))} +
+
+
+
+
+
+
+
+
+ Offerings
+
+
+ + Offerings for every need. +
++ Fully integrated services and products you can start offering in + minutes +
+
+ {features.map((feature, index) => (
+
+ + Investors and founders +
+ +
+ {sponsors.map(({ icon, name }: SponsorProps) => (
+
+
+ {icon}
+
+ ))}
+ {name}
+
+ {stats.map(({ quantity, description }: statsProps) => (
+
+
+
+ ))}
+ {quantity}
+{description}
++ + Our Dedicated{" "} + + Crew +
+ ++ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis + dolor pariatur sit! +
+ +
+ {teamList.map(
+ ({ imageUrl, name, position, socialNetworks }: TeamProps) => (
+
+
+ 
+ {name}
+
+ {position}
+
+
+
+
+
+
+
+ {socialNetworks.map(({ name, url }: SociaNetworkslProps) => (
+
+ ))}
+
+
+ )
+ )}
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit.
++ Discover Why + + {" "} + People Love{" "} + + This Landing Page +
+ ++ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non unde error + facere hic reiciendis illo +
+ +
+ {testimonials.map(
+ ({ image, name, userName, comment }: TestimonialProps) => (
+
+
+
+ OM
+
+
+
+
+ {comment}
+
+ )
+ )}
+
+
+ {name}
+ {userName}
+
+
+
+
+
+
+
+ Why Capes?
+
+
+
+ + Based on our user survey... +
+
+ {features &&
+ features.map((feature, index) => (
+
+
+
+
+ {children}
+
+ );
+}
diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
new file mode 100644
index 000000000..a0a44d5d1
--- /dev/null
+++ b/src/components/mode-toggle.tsx
@@ -0,0 +1,19 @@
+import { Button } from "@/components/ui/button";
+import { useTheme } from "@/components/theme-provider";
+import { Moon, Sun } from "lucide-react";
+
+export function ModeToggle() {
+ const { theme, setTheme } = useTheme();
+
+ const toggleTheme = () => {
+ setTheme(theme === "dark" ? "light" : "dark");
+ };
+
+ return (
+
+ );
+}
diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx
new file mode 100644
index 000000000..85163c1b4
--- /dev/null
+++ b/src/components/theme-provider.tsx
@@ -0,0 +1,76 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+ children: React.ReactNode;
+ defaultTheme?: Theme;
+ storageKey?: string;
+};
+
+type ThemeProviderState = {
+ theme: Theme;
+ setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+ theme: "system",
+ setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext
+ {children}
+
+
+ {children}
+
+
+
+
+ )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+
+));
+NavigationMenuViewport.displayName =
+ NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+ React.ElementRef