diff --git a/package.json b/package.json index 053837c..1ec7454 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "shiki": "^2.4.2", "sonner": "^2.0.0", "stripe": "^17.6.0", + "swiper": "^11.2.5", "tailwind-merge": "^3.0.1", "tailwindcss-animate": "^1.0.7", "unist-util-visit": "^5.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fb91d4e..cb66bc8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -182,6 +182,9 @@ importers: stripe: specifier: ^17.6.0 version: 17.6.0 + swiper: + specifier: ^11.2.5 + version: 11.2.5 tailwind-merge: specifier: ^3.0.1 version: 3.0.1 @@ -4219,6 +4222,10 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + swiper@11.2.5: + resolution: {integrity: sha512-nG0kbIyBfeE2BPFt9nPUX03qUBF75o6+enzjIT/DfCmbh8ORlwhc4eZz1+4H/yseAgb3H+OoEYzmb64i0tYNnQ==} + engines: {node: '>= 4.7.0'} + swr@2.3.2: resolution: {integrity: sha512-RosxFpiabojs75IwQ316DGoDRmOqtiAj0tg8wCcbEu4CiLZBs/a9QNtHV7TUfDXmmlgqij/NqzKq/eLelyv9xA==} peerDependencies: @@ -8623,6 +8630,8 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + swiper@11.2.5: {} + swr@2.3.2(react@19.0.0): dependencies: dequal: 2.0.3 diff --git a/public/images/blocks/card.webp b/public/images/blocks/card.webp new file mode 100644 index 0000000..aaed412 Binary files /dev/null and b/public/images/blocks/card.webp differ diff --git a/public/images/charts-light.webp b/public/images/blocks/charts-light.webp similarity index 100% rename from public/images/charts-light.webp rename to public/images/blocks/charts-light.webp diff --git a/public/images/charts.webp b/public/images/blocks/charts.webp similarity index 100% rename from public/images/charts.webp rename to public/images/blocks/charts.webp diff --git a/public/images/blocks/dark-card.webp b/public/images/blocks/dark-card.webp new file mode 100644 index 0000000..faf5384 Binary files /dev/null and b/public/images/blocks/dark-card.webp differ diff --git a/public/images/music-light.webp b/public/images/blocks/music-light.webp similarity index 100% rename from public/images/music-light.webp rename to public/images/blocks/music-light.webp diff --git a/public/images/music.webp b/public/images/blocks/music.webp similarity index 100% rename from public/images/music.webp rename to public/images/blocks/music.webp diff --git a/src/app/[locale]/(marketing)/(home)/page.tsx b/src/app/[locale]/(marketing)/(home)/page.tsx index 879b75e..801c046 100644 --- a/src/app/[locale]/(marketing)/(home)/page.tsx +++ b/src/app/[locale]/(marketing)/(home)/page.tsx @@ -2,7 +2,7 @@ import CallToAction3 from "@/components/blocks/call-to-action/call-to-action-3"; import Content2 from "@/components/blocks/content/content-2"; import FAQs from "@/components/blocks/faq/faqs"; import FeaturesSection from "@/components/blocks/features/features-8"; -import HeroSection from "@/components/blocks/hero/hero-section"; +import HeroSection from "@/components/blocks/hero/hero-section-4"; import LogoCloud from "@/components/blocks/logo-cloud/logo-cloud"; import Pricing from "@/components/blocks/pricing/pricing"; import StatsSection from "@/components/blocks/stats/stats"; diff --git a/src/app/[locale]/(marketing)/blocks/call-to-action/page.tsx b/src/app/[locale]/(marketing)/blocks/call-to-action/page.tsx index 8e84932..7fff315 100644 --- a/src/app/[locale]/(marketing)/blocks/call-to-action/page.tsx +++ b/src/app/[locale]/(marketing)/blocks/call-to-action/page.tsx @@ -6,6 +6,9 @@ interface CallToActionPageProps { params: Promise<{ locale: string }>; }; +/** + * https://nsui.irung.me/call-to-action + */ export default async function CallToActionPage(props: CallToActionPageProps) { const params = await props.params; diff --git a/src/app/[locale]/(marketing)/blocks/faq/page.tsx b/src/app/[locale]/(marketing)/blocks/faq/page.tsx index 8604ae6..f60501b 100644 --- a/src/app/[locale]/(marketing)/blocks/faq/page.tsx +++ b/src/app/[locale]/(marketing)/blocks/faq/page.tsx @@ -4,6 +4,9 @@ interface FAQPageProps { params: Promise<{ locale: string }>; }; +/** + * https://nsui.irung.me/faqs + */ export default async function FAQPage(props: FAQPageProps) { const params = await props.params; diff --git a/src/app/[locale]/(marketing)/blocks/hero/page.tsx b/src/app/[locale]/(marketing)/blocks/hero/page.tsx index df12c66..7c066d4 100644 --- a/src/app/[locale]/(marketing)/blocks/hero/page.tsx +++ b/src/app/[locale]/(marketing)/blocks/hero/page.tsx @@ -1,4 +1,7 @@ import HeroSection from "@/components/blocks/hero/hero-section"; +import HeroSection2 from "@/components/blocks/hero/hero-section-2"; +import HeroSection3 from "@/components/blocks/hero/hero-section-3"; +import HeroSection4 from "@/components/blocks/hero/hero-section-4"; interface HeroPageProps { params: Promise<{ locale: string }>; @@ -11,6 +14,12 @@ export default async function HeroPage(props: HeroPageProps) { <>
+ + + + + +
); diff --git a/src/components/blocks/content/content-2.tsx b/src/components/blocks/content/content-2.tsx index 2be52fc..bb17891 100644 --- a/src/components/blocks/content/content-2.tsx +++ b/src/components/blocks/content/content-2.tsx @@ -38,8 +38,8 @@ export default function Content2() {
- payments illustration dark - payments illustration light + payments illustration dark + payments illustration light
diff --git a/src/components/blocks/hero/hero-section-2.tsx b/src/components/blocks/hero/hero-section-2.tsx new file mode 100644 index 0000000..764f103 --- /dev/null +++ b/src/components/blocks/hero/hero-section-2.tsx @@ -0,0 +1,72 @@ +'use client' +import { Logo } from '@/components/logo' +import { Button } from '@/components/ui/button' +import { ArrowRight, Mail, Menu, SendHorizonal, X } from 'lucide-react' +import Image from 'next/image' +import Link from 'next/link' +import { useState } from 'react' + +const menuItems = [ + { name: 'Features', href: '#' }, + { name: 'Solution', href: '#' }, + { name: 'Pricing', href: '#' }, + { name: 'About', href: '#' }, +] + +export default function HeroSection2() { + const [menuState, setMenuState] = useState(false) + return ( + <> +
+
+
+
+
+ + New + Introduction Tailus UI Html + + + + + +

Production Ready Digital Marketing blocks

+

Error totam sit illum. Voluptas doloribus asperiores quaerat aperiam. Quidem harum omnis beatae ipsum soluta!

+ +
+
+
+ + + + +
+ +
+
+
+ +
    +
  • Faster
    • +
  • Modern
    • +
  • 100% Customizable
    • +
+
+
+
+
+
+
+ app illustration + app illustration +
+
+
+
+
+ + ) +} diff --git a/src/components/blocks/hero/hero-section-3.tsx b/src/components/blocks/hero/hero-section-3.tsx new file mode 100644 index 0000000..cd18ed3 --- /dev/null +++ b/src/components/blocks/hero/hero-section-3.tsx @@ -0,0 +1,203 @@ +'use client' +import React from 'react' +import { Swiper, SwiperSlide } from 'swiper/react' +import { Autoplay, EffectCoverflow } from 'swiper/modules' +import 'swiper/css' +import 'swiper/css/autoplay' +import 'swiper/css/navigation' +import 'swiper/css/pagination' +import 'swiper/css/effect-coverflow' +import Link from 'next/link' +import { Logo } from '@/components/logo' +import { ArrowRight, Menu, Rocket, X } from 'lucide-react' +import { Button } from '@/components/ui/button' + +const menuItems = [ + { name: 'Features', href: '#' }, + { name: 'Solution', href: '#' }, + { name: 'Pricing', href: '#' }, + { name: 'About', href: '#' }, +] + +export default function HeroSection3() { + const [menuState, setMenuState] = React.useState(false) + + return ( + <> +
+
+
+
+
+ + New + Introduction Tailus UI Html + + + + + +

+ Tame the Wild West
of Frontend Development +

+

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.

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

30% Increase in revenue

+
+ + +
+
+ +
+

45% Increase in revenue

+
+ + +
+
+ +
+

60% Increase in revenue

+
+ + +
+
+
+
+
+ + ) +} + +const WorkOsLogo = () => { + return ( + + + + + + + + ) +} + +const AstroLogo = () => { + return ( + + + + + + + + + + + + + + + + + ) +} + +const NetlifyLogo = () => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/components/blocks/hero/hero-section-4.tsx b/src/components/blocks/hero/hero-section-4.tsx new file mode 100644 index 0000000..92445e5 --- /dev/null +++ b/src/components/blocks/hero/hero-section-4.tsx @@ -0,0 +1,60 @@ +'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 HeroSection4() { + 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 +
+
+
+
+
+ + ) +} diff --git a/src/components/blocks/hero/hero-section.tsx b/src/components/blocks/hero/hero-section.tsx index 8cdc8f5..818a98b 100644 --- a/src/components/blocks/hero/hero-section.tsx +++ b/src/components/blocks/hero/hero-section.tsx @@ -1,78 +1,63 @@ '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 Link from 'next/link' +import { useState } from 'react' import { Button } from '@/components/ui/button' +import { Menu, X } from 'lucide-react' import Image from 'next/image' const menuItems = [ - { name: 'Features', href: '#' }, - { name: 'Solution', href: '#' }, - { name: 'Pricing', href: '#' }, - { name: 'About', href: '#' }, + { name: 'Features', href: '#' }, + { name: 'Solution', href: '#' }, + { name: 'Pricing', href: '#' }, + { name: 'About', href: '#' }, ] export default function HeroSection() { - const [menuState, setMenuState] = React.useState(false) + const [menuState, setMenuState] = useState(false) + return ( + <> +
+
+
+
+
+
- return ( - <> -
-
-
-
-
- - New - Introduction Tailus UI Html - +
+
+
+

Modern Software testing reimagined

+

Officiis laudantium excepturi ducimus rerum dignissimos, and tempora nam vitae, excepturi ducimus iste provident dolores.

- - + +
+
-

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 -
-
-
*/} -
- - ) +
+
+
+
+ + tailus ui hero section + tailus ui hero section +
+
+
+
+ +
+ + ) }