diff --git a/public/images/charts-light.webp b/public/images/charts-light.webp new file mode 100644 index 0000000..ef443b8 Binary files /dev/null and b/public/images/charts-light.webp differ diff --git a/public/images/charts.webp b/public/images/charts.webp new file mode 100644 index 0000000..afabe71 Binary files /dev/null and b/public/images/charts.webp differ diff --git a/public/images/music-light.webp b/public/images/music-light.webp new file mode 100644 index 0000000..cd9caf1 Binary files /dev/null and b/public/images/music-light.webp differ diff --git a/public/images/music.webp b/public/images/music.webp new file mode 100644 index 0000000..6f9ca6f Binary files /dev/null and b/public/images/music.webp differ diff --git a/src/app/(public)/(home)/page.tsx b/src/app/(public)/(home)/page.tsx index bc1abc9..01d56ee 100644 --- a/src/app/(public)/(home)/page.tsx +++ b/src/app/(public)/(home)/page.tsx @@ -14,6 +14,16 @@ // import { HomeShowcase } from "@/components/home/home-showcase"; // import { HomeTestimonials } from "@/components/home/home-testimonials"; // import HomeVideo from "@/components/home/home-video"; +import CallToAction from "@/components/nsui/call-to-action"; +import ContentSection from "@/components/nsui/content-2"; +import FAQs from "@/components/nsui/faqs"; +import Features from "@/components/nsui/features-2"; +import FeaturesSection from "@/components/nsui/features-8"; +import HeroSection from "@/components/nsui/hero-section"; +import LogoCloud from "@/components/nsui/logo-cloud"; +import Pricing from "@/components/nsui/pricing"; +import StatsSection from "@/components/nsui/stats"; +import WallOfLoveSection from "@/components/nsui/testimonials"; import { siteConfig } from "@/config/site"; import { constructMetadata } from "@/lib/metadata"; @@ -28,6 +38,27 @@ export default async function HomePage() { {/* */}
+ + + + + + {/* */} + + + + + + + + + + + + + + + {/* */} {/* */} diff --git a/src/components/nsui/call-to-action.tsx b/src/components/nsui/call-to-action.tsx new file mode 100644 index 0000000..28c351a --- /dev/null +++ b/src/components/nsui/call-to-action.tsx @@ -0,0 +1,30 @@ +import { Button } from '@/components/ui/button' +import { Mail, SendHorizonal } from 'lucide-react' + +export default function CallToAction() { + return ( +
+
+
+

Start Building

+

Libero sapiente aliquam quibusdam aspernatur.

+ +
+
+ + + + +
+ +
+
+
+
+
+
+ ) +} diff --git a/src/components/nsui/content-2.tsx b/src/components/nsui/content-2.tsx new file mode 100644 index 0000000..4a9ba2c --- /dev/null +++ b/src/components/nsui/content-2.tsx @@ -0,0 +1,44 @@ +import { Cpu, Zap } from 'lucide-react' +import Image from 'next/image' + +export default function ContentSection() { + return ( +
+
+

The Lyra ecosystem brings together our models.

+
+
+

+ Lyra is evolving to be more than just the models. It supports an entire ecosystem — from products innovate. +

+

It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate

+ +
+
+
+ +

Faaast

+
+

It supports an entire helping developers and innovate.

+
+
+
+ +

Powerful

+
+

It supports an entire helping developers and businesses.

+
+
+
+
+
+
+ payments illustration dark + payments illustration light +
+
+
+
+
+ ) +} diff --git a/src/components/nsui/faqs.tsx b/src/components/nsui/faqs.tsx new file mode 100644 index 0000000..dc80f0a --- /dev/null +++ b/src/components/nsui/faqs.tsx @@ -0,0 +1,46 @@ +export default function FAQs() { + return ( +
+
+
+
+

+ Frequently
Asked
+ Questions +

+

Accusantium quisquam. Illo, omnis?

+
+ +
+
+

What is the refund policy?

+

We offer a 30-day money back guarantee. If you are not satisfied with our product, you can request a refund within 30 days of your purchase.

+ +
    +
  1. To request a refund, please contact our support team with your order number and reason for the refund.
  2. +
  3. Refunds will be processed within 3-5 business days.
  4. +
  5. Please note that refunds are only available for new customers and are limited to one per customer.
  6. +
+
+
+

How do I cancel my subscription?

+

You can cancel your subscription at any time by logging into your account and clicking on the cancel button.

+
+
+

Can I upgrade my plan?

+

Yes, you can upgrade your plan at any time by logging into your account and selecting the plan you want to upgrade to.

+
    +
  • You will be charged the difference in price between your current plan and the plan you are upgrading to.
  • +
  • Your new plan will take effect immediately and you will be billed at the new rate on your next billing cycle.
  • +
+
+
+

Do you offer phone support?

+

We do not offer phone support at this time. However, you can contact us via email or live chat for any questions or concerns you may have.

+
+
+
+
+
+ ) +} diff --git a/src/components/nsui/features-2.tsx b/src/components/nsui/features-2.tsx new file mode 100644 index 0000000..c7ab465 --- /dev/null +++ b/src/components/nsui/features-2.tsx @@ -0,0 +1,67 @@ +import { Card, CardContent, CardHeader } from '@/components/ui/card' +import { Settings2, Sparkles, Zap } from 'lucide-react' +import { ReactNode } from 'react' + +export default function Features() { + return ( +
+
+
+

Built to cover your needs

+

Libero sapiente aliquam quibusdam aspernatur, praesentium iusto repellendus.

+
+
+ + + + + + +

Customizable

+
+ + +

Extensive customization options, allowing you to tailor every aspect to meet your specific needs.

+
+
+ + + + + + + +

You have full control

+
+ + +

From design elements to functionality, you have complete control to create a unique and personalized experience.

+
+
+ + + + + + + +

Powered By AI

+
+ + +

Elements to functionality, you have complete control to create a unique experience.

+
+
+
+
+
+ ) +} + +const CardDecorator = ({ children }: { children: ReactNode }) => ( +
+
+
+
{children}
+
+) diff --git a/src/components/nsui/features-8.tsx b/src/components/nsui/features-8.tsx new file mode 100644 index 0000000..d14583f --- /dev/null +++ b/src/components/nsui/features-8.tsx @@ -0,0 +1,184 @@ +import { Card, CardContent } from '@/components/ui/card' +import { Shield, Users } from 'lucide-react' + +export default function FeaturesSection() { + return ( +
+
+
+
+ + +
+ + + + 100% +
+

Customizable

+
+
+ + +
+ + + + + + + + + + + + + + + + +
+
+

Secure by default

+

Provident fugit and vero voluptate. magnam magni doloribus dolores voluptates a sapiente nisi.

+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + +
+
+

Faster than light

+

Provident fugit vero voluptate. magnam magni doloribus dolores voluptates inventore nisi.

+
+
+
+ + +
+
+ +
+
+

Faster than light

+

Provident fugit vero voluptate. Voluptates a sapiente inventore nisi.

+
+
+
+
+ + + +
+ + + + + + + + + + +
+
+
+ + +
+
+ +
+
+

Keep your loved ones safe

+

Voluptate. magnam magni doloribus dolores voluptates a sapiente inventore nisi.

+
+
+
+
+
+ Likeur +
+ +
+
+
+
+ +
+ M. Irung +
+
+ B. Ng +
+ +
+
+
+
+
+
+
+
+
+
+ ) +} diff --git a/src/components/nsui/hero-section.tsx b/src/components/nsui/hero-section.tsx new file mode 100644 index 0000000..8cdc8f5 --- /dev/null +++ b/src/components/nsui/hero-section.tsx @@ -0,0 +1,78 @@ +'use client' +import React from 'react' +import Link from 'next/link' +import { Logo } from '@/components/logo' +import { ArrowRight, Menu, Rocket, X } from 'lucide-react' +import { Button } from '@/components/ui/button' +import Image from 'next/image' + +const menuItems = [ + { name: 'Features', href: '#' }, + { name: 'Solution', href: '#' }, + { name: 'Pricing', href: '#' }, + { name: 'About', href: '#' }, +] + +export default function HeroSection() { + const [menuState, setMenuState] = React.useState(false) + + return ( + <> +
+
+
+
+
+ + New + Introduction Tailus UI Html + + + + + +

Modern Software testing reimagined

+

Tailwindcss highly customizable components for building modern websites and applications that look and feel the way you mean it.

+

Highly customizable components for building modern websites and applications, with your personal spark.

+ +
+ +
+
+
+
+
+
+ app screen + app screen +
+
+
+
+ {/*
+
+

Your favorite companies are our partners.

+
+ Nvidia Logo + Column Logo + GitHub Logo + Nike Logo + Laravel Logo + Lilly Logo + Lemon Squeezy Logo + OpenAI Logo + Tailwind CSS Logo + Vercel Logo + Zapier Logo +
+
+
*/} +
+ + ) +} diff --git a/src/components/nsui/logo-cloud.tsx b/src/components/nsui/logo-cloud.tsx new file mode 100644 index 0000000..2725398 --- /dev/null +++ b/src/components/nsui/logo-cloud.tsx @@ -0,0 +1,22 @@ +export default function LogoCloud() { + return ( +
+
+

Your favorite companies are our partners.

+
+ Nvidia Logo + Column Logo + GitHub Logo + Nike Logo + Laravel Logo + Lilly Logo + Lemon Squeezy Logo + OpenAI Logo + Tailwind CSS Logo + Vercel Logo + Zapier Logo +
+
+
+ ) +} diff --git a/src/components/nsui/pricing.tsx b/src/components/nsui/pricing.tsx new file mode 100644 index 0000000..a5e907e --- /dev/null +++ b/src/components/nsui/pricing.tsx @@ -0,0 +1,101 @@ +import Link from 'next/link' +import { Button } from '@/components/ui/button' +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' +import { Check } from 'lucide-react' + +export default function Pricing() { + return ( +
+
+
+

Pricing that Scales with You

+

Gemini is evolving to be more than just the models. It supports an entire to the APIs and platforms helping developers and businesses innovate.

+
+ +
+ + + Free + + $0 / mo + + Per editor + + + + +
+ +
    + {['Basic Analytics Dashboard', '5GB Cloud Storage', 'Email and Chat Support'].map((item, index) => ( +
  • + + {item} +
  • + ))} +
+
+
+ + + Popular + + + Pro + + $19 / mo + + Per editor + + + + + +
+ +
    + {['Everything in Free Plan', '5GB Cloud Storage', 'Email and Chat Support', 'Access to Community Forum', 'Single User Access', 'Access to Basic Templates', 'Mobile App Access', '1 Custom Report Per Month', 'Monthly Product Updates', 'Standard Security Features'].map((item, index) => ( +
  • + + {item} +
  • + ))} +
+
+
+ + + + Startup + + $29 / mo + + Per editor + + + + + +
+ +
    + {['Everything in Pro Plan', '5GB Cloud Storage', 'Email and Chat Support'].map((item, index) => ( +
  • + + {item} +
  • + ))} +
+
+
+
+
+
+ ) +} diff --git a/src/components/nsui/stats.tsx b/src/components/nsui/stats.tsx new file mode 100644 index 0000000..41fb53d --- /dev/null +++ b/src/components/nsui/stats.tsx @@ -0,0 +1,27 @@ +export default function StatsSection() { + return ( +
+
+
+

Tailus UI in numbers

+

Gemini is evolving to be more than just the models. It supports an entire to the APIs and platforms helping developers and businesses innovate.

+
+ +
+
+
+1200
+

Stars on GitHub

+
+
+
22 Million
+

Active Users

+
+
+
+500
+

Powered Apps

+
+
+
+
+ ) +} diff --git a/src/components/nsui/testimonials.tsx b/src/components/nsui/testimonials.tsx new file mode 100644 index 0000000..e2f12e4 --- /dev/null +++ b/src/components/nsui/testimonials.tsx @@ -0,0 +1,135 @@ +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' +import { Card, CardContent } from '@/components/ui/card' + +type Testimonial = { + name: string + role: string + image: string + quote: string +} + +const testimonials: Testimonial[] = [ + { + name: 'Jonathan Yombo', + role: 'Software Engineer', + image: 'https://randomuser.me/api/portraits/men/1.jpg', + quote: 'Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.', + }, + { + name: 'Yves Kalume', + role: 'GDE - Android', + image: 'https://randomuser.me/api/portraits/men/6.jpg', + quote: 'With no experience in webdesign I just redesigned my entire website in a few minutes with tailwindcss thanks to Tailus.', + }, + { + name: 'Yucel Faruksahan', + role: 'Tailkits Creator', + image: 'https://randomuser.me/api/portraits/men/7.jpg', + quote: 'Great work on tailfolio template. This is one of the best personal website that I have seen so far :)', + }, + { + name: 'Anonymous author', + role: 'Doing something', + image: 'https://randomuser.me/api/portraits/men/8.jpg', + quote: 'I am really new to Tailwind and I want to give a go to make some page on my own. I searched a lot of hero pages and blocks online. However, most of them are not giving me a clear view or needed some HTML/CSS coding background to make some changes from the original or too expensive to have. I downloaded the one of Tailus template which is very clear to understand at the start and you could modify the codes/blocks to fit perfectly on your purpose of the page.', + }, + { + name: 'Shekinah Tshiokufila', + role: 'Senior Software Engineer', + image: 'https://randomuser.me/api/portraits/men/4.jpg', + quote: 'Tailus is redefining the standard of web design, with these blocks it provides an easy and efficient way for those who love beauty but may lack the time to implement it. I can only recommend this incredible wonder.', + }, + { + name: 'Oketa Fred', + role: 'Fullstack Developer', + image: 'https://randomuser.me/api/portraits/men/2.jpg', + quote: 'I absolutely love Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze.', + }, + { + name: 'Zeki', + role: 'Founder of ChatExtend', + image: 'https://randomuser.me/api/portraits/men/5.jpg', + quote: "Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly.", + }, + { + name: 'Joseph Kitheka', + role: 'Fullstack Developer', + image: 'https://randomuser.me/api/portraits/men/9.jpg', + quote: 'Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development!', + }, + { + name: 'Khatab Wedaa', + role: 'MerakiUI Creator', + image: 'https://randomuser.me/api/portraits/men/10.jpg', + quote: "Tailus is an elegant, clean, and responsive tailwind css components it's very helpful to start fast with your project.", + }, + { + name: 'Rodrigo Aguilar', + role: 'TailwindAwesome Creator', + image: 'https://randomuser.me/api/portraits/men/11.jpg', + quote: 'I love Tailus ❤️. The component blocks are well-structured, simple to use, and beautifully designed. It makes it really easy to have a good-looking website in no time.', + }, + { + name: 'Eric Ampire', + role: 'Mobile Engineer at @BRPNews • @GoogleDevExpert for Android', + image: 'https://randomuser.me/api/portraits/men/12.jpg', + quote: 'Tailus templates are the perfect solution for anyone who wants to create a beautiful and functional website without any web design experience. The templates are easy to use, customizable, and responsive, and the support team is always available to help. I highly recommend Tailus templates to anyone who is looking to create a website.', + }, + { + name: 'Roland Tubonge', + role: 'Software Engineer', + image: 'https://randomuser.me/api/portraits/men/13.jpg', + quote: 'Tailus is so well designed that even with a very poor knowledge of web design you can do miracles. Let yourself be seduced!', + }, +] + +const chunkArray = (array: Testimonial[], chunkSize: number): Testimonial[][] => { + const result: Testimonial[][] = [] + for (let i = 0; i < array.length; i += chunkSize) { + result.push(array.slice(i, i + chunkSize)) + } + return result +} + +const testimonialChunks = chunkArray(testimonials, Math.ceil(testimonials.length / 3)) + +export default function WallOfLoveSection() { + return ( +
+
+
+
+

Loved by the Community

+

Harum quae dolore orrupti aut temporibus ariatur.

+
+
+ {testimonialChunks.map((chunk, chunkIndex) => ( +
+ {chunk.map(({ name, role, quote, image }, index) => ( + + + + + ST + + +
+

{name}

+ + {role} + +
+

{quote}

+
+
+
+
+ ))} +
+ ))} +
+
+
+
+ ) +}