├── public
    ├── favicon.ico
    ├── videos
    │   └── video.mp4
    └── images
    │   ├── hero-image-01.jpg
    │   ├── testimonial-01.jpg
    │   ├── testimonial-02.jpg
    │   ├── testimonial-03.jpg
    │   ├── features-03-image-01.png
    │   ├── features-03-image-02.png
    │   └── features-03-image-03.png
├── app
    ├── api
    │   └── hello
    │   │   └── route.ts
    ├── (auth)
    │   ├── layout.tsx
    │   ├── reset-password
    │   │   └── page.tsx
    │   ├── signin
    │   │   └── page.tsx
    │   └── signup
    │   │   └── page.tsx
    ├── (default)
    │   ├── page.tsx
    │   └── layout.tsx
    ├── css
    │   ├── style.css
    │   └── additional-styles
    │   │   ├── toggle-switch.css
    │   │   ├── utility-patterns.css
    │   │   ├── range-slider.css
    │   │   └── theme.css
    └── layout.tsx
├── .vscode
    └── settings.json
├── postcss.config.js
├── next.config.js
├── CHANGELOG.md
├── .gitignore
├── tsconfig.json
├── package.json
├── components
    ├── banner.tsx
    ├── ui
    │   ├── header.tsx
    │   ├── mobile-menu.tsx
    │   └── footer.tsx
    ├── modal-video.tsx
    ├── testimonials.tsx
    ├── features.tsx
    ├── blocks.tsx
    ├── zigzag.tsx
    ├── hero.tsx
    ├── newsletter.tsx
    └── page-illustration.tsx
├── tailwind.config.js
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frozen-dev71/open-react-template/main/public/favicon.ico


--------------------------------------------------------------------------------
/public/videos/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frozen-dev71/open-react-template/main/public/videos/video.mp4


--------------------------------------------------------------------------------
/app/api/hello/route.ts:
--------------------------------------------------------------------------------
1 | export async function GET(request: Request) {
2 |   return new Response('Hello, Next.js!')
3 | }
4 | 


--------------------------------------------------------------------------------
/public/images/hero-image-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frozen-dev71/open-react-template/main/public/images/hero-image-01.jpg


--------------------------------------------------------------------------------
/public/images/testimonial-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frozen-dev71/open-react-template/main/public/images/testimonial-01.jpg


--------------------------------------------------------------------------------
/public/images/testimonial-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frozen-dev71/open-react-template/main/public/images/testimonial-02.jpg


--------------------------------------------------------------------------------
/public/images/testimonial-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frozen-dev71/open-react-template/main/public/images/testimonial-03.jpg


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "typescript.tsdk": "node_modules/typescript/lib",
3 |   "typescript.enablePromptUseWorkspaceTsdk": true
4 | }


--------------------------------------------------------------------------------
/public/images/features-03-image-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frozen-dev71/open-react-template/main/public/images/features-03-image-01.png


--------------------------------------------------------------------------------
/public/images/features-03-image-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frozen-dev71/open-react-template/main/public/images/features-03-image-02.png


--------------------------------------------------------------------------------
/public/images/features-03-image-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frozen-dev71/open-react-template/main/public/images/features-03-image-03.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     'postcss-import': {},
4 |     tailwindcss: {},
5 |     autoprefixer: {},
6 |   },
7 | }
8 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   experimental: {
4 |     appDir: true,
5 |   },
6 | }
7 | 
8 | module.exports = nextConfig
9 | 


--------------------------------------------------------------------------------
/app/(auth)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import PageIllustration from '@/components/page-illustration'
 2 | 
 3 | export default function AuthLayout({
 4 |   children,
 5 | }: {
 6 |   children: React.ReactNode
 7 | }) {  
 8 |   return (
 9 |     <main className="grow">
10 | 
11 |       <PageIllustration />
12 | 
13 |       {children}
14 | 
15 |     </main>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # CHANGELOG.md
 2 | 
 3 | ## [3.1.0] - 2023-05-07
 4 | 
 5 | Modal video improvements
 6 | 
 7 | ## [3.0.0] - 2023-04-12
 8 | 
 9 | Conversion to Next.js
10 | 
11 | ## [2.0.3] - 2023-03-28
12 | 
13 | Fix video
14 | 
15 | ## [2.0.2] - 2023-03-28
16 | 
17 | Add self-hosted video
18 | 
19 | ## [2.0.1] - 2023-02-16
20 | 
21 | Remove header links
22 | 
23 | ## [2.0.0] - 2023-02-16
24 | 
25 | Replace Cruip CSS with Tailwind CSS
26 | 
27 | ## [1.0.0] - 2020-04-07
28 | 
29 | First release


--------------------------------------------------------------------------------
/app/(default)/page.tsx:
--------------------------------------------------------------------------------
 1 | export const metadata = {
 2 |   title: 'Home - Open PRO',
 3 |   description: 'Page description',
 4 | }
 5 | 
 6 | import Hero from '@/components/hero'
 7 | import Features from '@/components/features'
 8 | import Newsletter from '@/components/newsletter'
 9 | import Zigzag from '@/components/zigzag'
10 | import Testimonials from '@/components/testimonials'
11 | 
12 | export default function Home() {
13 |   return (
14 |     <>
15 |       <Hero />
16 |       <Features />
17 |       <Zigzag />
18 |       <Testimonials />
19 |       <Newsletter />
20 |     </>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 
38 | # contentlayer
39 | .contentlayer
40 | 


--------------------------------------------------------------------------------
/app/css/style.css:
--------------------------------------------------------------------------------
 1 | @import 'tailwindcss/base';
 2 | @import 'tailwindcss/components';
 3 | 
 4 | /* Additional styles */
 5 | @import 'additional-styles/utility-patterns.css';
 6 | @import 'additional-styles/range-slider.css';
 7 | @import 'additional-styles/toggle-switch.css';
 8 | @import 'additional-styles/theme.css';
 9 | 
10 | @import 'tailwindcss/utilities';
11 | 
12 | /* Additional Tailwind directives: https://tailwindcss.com/docs/functions-and-directives/#responsive */
13 | @layer utilities {
14 |     .rtl {
15 |         direction: rtl;
16 |     }
17 | }
18 | 
19 | /* See Alpine.js: https://github.com/alpinejs/alpine#x-cloak */
20 | [x-cloak=""] {
21 |     display: none;
22 | }
23 | 


--------------------------------------------------------------------------------
/app/css/additional-styles/toggle-switch.css:
--------------------------------------------------------------------------------
 1 | /* Switch element */
 2 | .form-switch {
 3 |     @apply relative select-none;
 4 |     width: 60px;
 5 | }
 6 | 
 7 | .form-switch label {
 8 |     @apply block overflow-hidden cursor-pointer h-8 rounded-full;
 9 | }
10 | 
11 | .form-switch label>span:first-child {
12 |     @apply absolute block rounded-full;
13 |     width: 28px;
14 |     height: 28px;
15 |     top: 2px;
16 |     left: 2px;
17 |     right: 50%;
18 |     transition: all .15s ease-out;
19 | }
20 | 
21 | .form-switch input[type="checkbox"]:checked+label {
22 |     @apply bg-purple-600;
23 | }
24 | 
25 | .form-switch input[type="checkbox"]:checked+label>span:first-child {
26 |     left: 30px;
27 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "paths": {
23 |       "@/*": ["./*"]
24 |     }
25 |   },
26 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------
/app/(default)/layout.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useEffect } from 'react'
 4 | 
 5 | import AOS from 'aos'
 6 | import 'aos/dist/aos.css'
 7 | 
 8 | import PageIllustration from '@/components/page-illustration'
 9 | import Footer from '@/components/ui/footer'
10 | 
11 | export default function DefaultLayout({
12 |   children,
13 | }: {
14 |   children: React.ReactNode
15 | }) {  
16 | 
17 |   useEffect(() => {
18 |     AOS.init({
19 |       once: true,
20 |       disable: 'phone',
21 |       duration: 600,
22 |       easing: 'ease-out-sine',
23 |     })
24 |   })
25 | 
26 |   return (
27 |     <>
28 |       <main className="grow">
29 | 
30 |         <PageIllustration />
31 | 
32 |         {children}
33 | 
34 |       </main>
35 | 
36 |       <Footer />
37 |     </>
38 |   )
39 | }
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "open-pro-next",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@headlessui/react": "^1.7.13",
13 |     "@types/node": "^18.15.11",
14 |     "@types/react": "^18.0.34",
15 |     "@types/react-dom": "18.0.11",
16 |     "aos": "^3.0.0-beta.6",
17 |     "next": "^13.3.0",
18 |     "react": "18.2.0",
19 |     "react-dom": "18.2.0",
20 |     "typescript": "^5.0.4"
21 |   },
22 |   "devDependencies": {
23 |     "@tailwindcss/forms": "^0.5.3",
24 |     "@types/aos": "^3.0.4",
25 |     "autoprefixer": "^10.4.14",
26 |     "postcss": "^8.4.21",
27 |     "tailwindcss": "^3.3.1"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import './css/style.css'
 2 | 
 3 | import { Inter, Architects_Daughter } from 'next/font/google'
 4 | 
 5 | import Header from '@/components/ui/header'
 6 | import Banner from '@/components/banner'
 7 | 
 8 | const inter = Inter({
 9 |   subsets: ['latin'],
10 |   variable: '--font-inter',
11 |   display: 'swap'
12 | })
13 | 
14 | const architects_daughter = Architects_Daughter({
15 |   subsets: ['latin'],
16 |   variable: '--font-architects-daughter',
17 |   weight: '400',
18 |   display: 'swap'
19 | })
20 | 
21 | export const metadata = {
22 |   title: 'Create Next App',
23 |   description: 'Generated by create next app',
24 | }
25 | 
26 | export default function RootLayout({
27 |   children,
28 | }: {
29 |   children: React.ReactNode
30 | }) {
31 |   return (
32 |     <html lang="en">
33 |       <body className={`${inter.variable} ${architects_daughter.variable} font-inter antialiased bg-gray-900 text-gray-200 tracking-tight`}>
34 |         <div className="flex flex-col min-h-screen overflow-hidden">
35 |           <Header />
36 |           {children}
37 |           <Banner />
38 |         </div>
39 |       </body>
40 |     </html>
41 |   )
42 | }
43 |  


--------------------------------------------------------------------------------
/app/css/additional-styles/utility-patterns.css:
--------------------------------------------------------------------------------
 1 | /* Typography */
 2 | .h1 {
 3 |     @apply text-4xl font-extrabold leading-tight tracking-tighter;
 4 | }
 5 | 
 6 | .h2 {
 7 |     @apply text-3xl font-extrabold leading-tight tracking-tighter;
 8 | }
 9 | 
10 | .h3 {
11 |     @apply text-3xl font-bold leading-tight;
12 | }
13 | 
14 | .h4 {
15 |     @apply text-2xl font-bold leading-snug tracking-tight;
16 | }
17 | 
18 | @screen md {
19 |     .h1 {
20 |         @apply text-5xl;
21 |     }
22 | 
23 |     .h2 {
24 |         @apply text-4xl;
25 |     }
26 | }
27 | 
28 | /* Buttons */
29 | .btn,
30 | .btn-sm {
31 |     @apply font-medium inline-flex items-center justify-center border border-transparent rounded-sm leading-snug transition duration-150 ease-in-out;
32 | }
33 | 
34 | .btn {
35 |     @apply px-8 py-3;
36 | }
37 | 
38 | .btn-sm {
39 |     @apply px-4 py-2;
40 | }
41 | 
42 | /* Forms */
43 | .form-input,
44 | .form-textarea,
45 | .form-multiselect,
46 | .form-select,
47 | .form-checkbox,
48 | .form-radio {
49 |     @apply bg-transparent border border-gray-700 focus:border-gray-500;
50 | }
51 | 
52 | .form-input,
53 | .form-textarea,
54 | .form-multiselect,
55 | .form-select,
56 | .form-checkbox {
57 |     @apply rounded-sm;
58 | }
59 | 
60 | .form-input,
61 | .form-textarea,
62 | .form-multiselect,
63 | .form-select {
64 |     @apply py-3 px-4;
65 | }
66 | 
67 | .form-input,
68 | .form-textarea {
69 |     @apply placeholder-gray-500;
70 | }
71 | 
72 | .form-select {
73 |     @apply pr-10;
74 | }
75 | 
76 | .form-checkbox,
77 | .form-radio {
78 |     @apply text-purple-600;
79 | }


--------------------------------------------------------------------------------
/components/banner.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useState } from 'react'
 4 | 
 5 | export default function Banner() {
 6 |   const [bannerOpen, setBannerOpen] = useState<boolean>(true)
 7 | 
 8 |   return (
 9 |     <>
10 |       {bannerOpen && (
11 |         <div className="fixed bottom-0 right-0 w-full md:bottom-8 md:right-12 md:w-auto z-60">
12 |           <div className="bg-slate-800 text-slate-50 text-sm p-3 md:rounded shadow-lg flex justify-between">
13 |             <div className="text-slate-500 inline-flex">
14 |               <a
15 |                 className="font-medium hover:underline text-slate-50"
16 |                 href="https://github.com/cruip/open-react-template"
17 |                 target="_blank"
18 |                 rel="noreferrer"
19 |               >
20 |                 Download<span className="hidden sm:inline"> on GitHub</span>
21 |               </a>{' '}
22 |               <span className="italic px-1.5">or</span>{' '}
23 |               <a className="font-medium hover:underline text-emerald-400" href="https://cruip.com/open-pro/" target="_blank" rel="noreferrer">
24 |                 Check Premium Version
25 |               </a>
26 |             </div>
27 |             <button className="text-slate-500 hover:text-slate-400 pl-2 ml-3 border-l border-gray-700" onClick={() => setBannerOpen(false)}>
28 |               <span className="sr-only">Close</span>
29 |               <svg className="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16">
30 |                 <path d="M12.72 3.293a1 1 0 00-1.415 0L8.012 6.586 4.72 3.293a1 1 0 00-1.414 1.414L6.598 8l-3.293 3.293a1 1 0 101.414 1.414l3.293-3.293 3.293 3.293a1 1 0 001.414-1.414L9.426 8l3.293-3.293a1 1 0 000-1.414z" />
31 |               </svg>
32 |             </button>
33 |           </div>
34 |         </div>
35 |       )}
36 |     </>
37 |   )
38 | }
39 | 


--------------------------------------------------------------------------------
/app/(auth)/reset-password/page.tsx:
--------------------------------------------------------------------------------
 1 | export const metadata = {
 2 |   title: 'Reset Password - Open PRO',
 3 |   description: 'Page description',
 4 | }
 5 | 
 6 | import Link from 'next/link'
 7 | 
 8 | export default function ResetPassword() {
 9 |   return (
10 |     <section className="relative">
11 |       <div className="max-w-6xl mx-auto px-4 sm:px-6">
12 |         <div className="pt-32 pb-12 md:pt-40 md:pb-20">
13 | 
14 |           {/* Page header */}
15 |           <div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
16 |             <h1 className="h1 mb-4">Forgot your password?</h1>
17 |             <p className="text-xl text-gray-400">We'll email you instructions on how to reset it.</p>
18 |           </div>
19 | 
20 |           {/* Form */}
21 |           <div className="max-w-sm mx-auto">
22 |             <form>
23 |               <div className="flex flex-wrap -mx-3 mb-4">
24 |                 <div className="w-full px-3">
25 |                   <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="email">Email</label>
26 |                   <input id="email" type="email" className="form-input w-full text-gray-300" placeholder="you@yourcompany.com" required />
27 |                 </div>
28 |               </div>
29 |               <div className="flex flex-wrap -mx-3 mt-6">
30 |                 <div className="w-full px-3">
31 |                   <button className="btn text-white bg-purple-600 hover:bg-purple-700 w-full">Reset Password</button>
32 |                 </div>
33 |               </div>
34 |             </form>
35 |             <div className="text-gray-400 text-center mt-6">
36 |               <Link href="/signin" className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out">Cancel</Link>
37 |             </div>
38 |           </div>
39 | 
40 |         </div>
41 |       </div>
42 |     </section>
43 |   )
44 | }
45 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     './app/**/*.{js,ts,jsx,tsx}',
 5 |     './pages/**/*.{js,ts,jsx,tsx}',
 6 |     './components/**/*.{js,ts,jsx,tsx}',
 7 |   ],
 8 |   theme: {
 9 |     extend: {
10 |       colors: {
11 |         gray: {
12 |           100: '#EBF1F5',
13 |           200: '#D9E3EA',
14 |           300: '#C5D2DC',
15 |           400: '#9BA9B4',
16 |           500: '#707D86',
17 |           600: '#55595F',
18 |           700: '#33363A',
19 |           800: '#25282C',
20 |           900: '#151719',
21 |         },
22 |         purple: {
23 |           100: '#F4F4FF',
24 |           200: '#E2E1FF',
25 |           300: '#CBCCFF',
26 |           400: '#ABABFF',
27 |           500: '#8D8DFF',
28 |           600: '#5D5DFF',
29 |           700: '#4B4ACF',
30 |           800: '#38379C',
31 |           900: '#262668',
32 |         },
33 |       },
34 |       spacing: {
35 |         '9/16': '56.25%',
36 |         '3/4': '75%',
37 |         '1/1': '100%',
38 |       },
39 |       fontFamily: {
40 |         inter: ['var(--font-inter)', 'sans-serif'],
41 |         'architects-daughter': ['var(--font-architects-daughter)', 'sans-serif']
42 |       },
43 |       fontSize: {
44 |         xs: '0.75rem',
45 |         sm: '0.875rem',
46 |         base: '1rem',
47 |         lg: '1.125rem',
48 |         xl: '1.25rem',
49 |         '2xl': '1.5rem',
50 |         '3xl': '2rem',
51 |         '4xl': '2.5rem',
52 |         '5xl': '3.25rem',
53 |         '6xl': '4rem',
54 |       },
55 |       inset: {
56 |         'full': '100%',
57 |       },
58 |       letterSpacing: {
59 |         tighter: '-0.02em',
60 |         tight: '-0.01em',
61 |         normal: '0',
62 |         wide: '0.01em',
63 |         wider: '0.02em',
64 |         widest: '0.4em',
65 |       },
66 |       minWidth: {
67 |         '10': '2.5rem',
68 |       },
69 |       scale: {
70 |         '98': '.98'
71 |       },
72 |     },
73 |   },
74 |   plugins: [
75 |     require('@tailwindcss/forms'),
76 |   ],
77 | }
78 | 


--------------------------------------------------------------------------------
/app/css/additional-styles/range-slider.css:
--------------------------------------------------------------------------------
 1 | /* Range slider */
 2 | :root {
 3 |     --range-thumb-size: 36px;
 4 | }
 5 | 
 6 | input[type=range] {
 7 |     appearance: none;
 8 |     background: #ccc;
 9 |     border-radius: 3px;
10 |     height: 6px;
11 |     margin-top: (--range-thumb-size - 6px) * 0.5;
12 |     margin-bottom: (--range-thumb-size - 6px) * 0.5;
13 |     --thumb-size: #{--range-thumb-size};
14 | }
15 | 
16 | input[type=range]::-webkit-slider-thumb {
17 |     appearance: none;
18 |     -webkit-appearance: none;
19 |     background-color: #000;
20 |     background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
21 |     background-position: center;
22 |     background-repeat: no-repeat;
23 |     border: 0;
24 |     border-radius: 50%;
25 |     cursor: pointer;
26 |     height: --range-thumb-size;
27 |     width: --range-thumb-size;
28 | }
29 | 
30 | input[type=range]::-moz-range-thumb {
31 |     background-color: #000;
32 |     background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
33 |     background-position: center;
34 |     background-repeat: no-repeat;
35 |     border: 0;
36 |     border: none;
37 |     border-radius: 50%;
38 |     cursor: pointer;
39 |     height: --range-thumb-size;
40 |     width: --range-thumb-size;
41 | }
42 | 
43 | input[type=range]::-ms-thumb {
44 |     background-color: #000;
45 |     background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
46 |     background-position: center;
47 |     background-repeat: no-repeat;
48 |     border: 0;
49 |     border-radius: 50%;
50 |     cursor: pointer;
51 |     height: --range-thumb-size;
52 |     width: --range-thumb-size;
53 | }
54 | 
55 | input[type=range]::-moz-focus-outer {
56 |     border: 0;
57 | }


--------------------------------------------------------------------------------
/components/ui/header.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import MobileMenu from './mobile-menu'
 3 | 
 4 | export default function Header() {
 5 |   return (
 6 |     <header className="absolute w-full z-30">
 7 |       <div className="max-w-6xl mx-auto px-4 sm:px-6">
 8 |         <div className="flex items-center justify-between h-20">
 9 |           {/* Site branding */}
10 |           <div className="shrink-0 mr-4">
11 |             {/* Logo */}
12 |             <Link href="/" className="block" aria-label="Cruip">
13 |               <svg className="w-8 h-8 fill-current text-purple-600" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
14 |                 <path d="M31.952 14.751a260.51 260.51 0 00-4.359-4.407C23.932 6.734 20.16 3.182 16.171 0c1.634.017 3.21.28 4.692.751 3.487 3.114 6.846 6.398 10.163 9.737.493 1.346.811 2.776.926 4.262zm-1.388 7.883c-2.496-2.597-5.051-5.12-7.737-7.471-3.706-3.246-10.693-9.81-15.736-7.418-4.552 2.158-4.717 10.543-4.96 16.238A15.926 15.926 0 010 16C0 9.799 3.528 4.421 8.686 1.766c1.82.593 3.593 1.675 5.038 2.587 6.569 4.14 12.29 9.71 17.792 15.57-.237.94-.557 1.846-.952 2.711zm-4.505 5.81a56.161 56.161 0 00-1.007-.823c-2.574-2.054-6.087-4.805-9.394-4.044-3.022.695-4.264 4.267-4.97 7.52a15.945 15.945 0 01-3.665-1.85c.366-3.242.89-6.675 2.405-9.364 2.315-4.107 6.287-3.072 9.613-1.132 3.36 1.96 6.417 4.572 9.313 7.417a16.097 16.097 0 01-2.295 2.275z" />
15 |               </svg>
16 |             </Link>
17 |           </div>
18 | 
19 |           {/* Desktop navigation */}
20 |           <nav className="hidden md:flex md:grow">
21 |             {/* Desktop sign in links */}
22 |             <ul className="flex grow justify-end flex-wrap items-center">
23 |               <li>
24 |                 <Link
25 |                   href="/signin"
26 |                   className="font-medium text-purple-600 hover:text-gray-200 px-4 py-3 flex items-center transition duration-150 ease-in-out"
27 |                 >
28 |                   Sign in
29 |                 </Link>
30 |               </li>
31 |               <li>
32 |                 <Link href="/signup" className="btn-sm text-white bg-purple-600 hover:bg-purple-700 ml-3">
33 |                   Sign up
34 |                 </Link>
35 |               </li>
36 |             </ul>
37 |           </nav>
38 | 
39 |           <MobileMenu />
40 | 
41 |         </div>
42 |       </div>
43 |     </header>
44 |   )
45 | }
46 | 


--------------------------------------------------------------------------------
/components/ui/mobile-menu.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useState, useRef, useEffect } from 'react'
 4 | import Link from 'next/link'
 5 | 
 6 | export default function MobileMenu() {
 7 |   const [mobileNavOpen, setMobileNavOpen] = useState<boolean>(false)
 8 | 
 9 |   const trigger = useRef<HTMLButtonElement>(null)
10 |   const mobileNav = useRef<HTMLDivElement>(null)
11 | 
12 |   // close the mobile menu on click outside
13 |   useEffect(() => {
14 |     const clickHandler = ({ target }: { target: EventTarget | null }): void => {
15 |       if (!mobileNav.current || !trigger.current) return;
16 |       if (!mobileNavOpen || mobileNav.current.contains(target as Node) || trigger.current.contains(target as Node)) return;
17 |       setMobileNavOpen(false)
18 |     };
19 |     document.addEventListener('click', clickHandler)
20 |     return () => document.removeEventListener('click', clickHandler)
21 |   })
22 | 
23 |   // close the mobile menu if the esc key is pressed
24 |   useEffect(() => {
25 |     const keyHandler = ({ keyCode }: { keyCode: number }): void => {
26 |       if (!mobileNavOpen || keyCode !== 27) return;
27 |       setMobileNavOpen(false)
28 |     };
29 |     document.addEventListener('keydown', keyHandler)
30 |     return () => document.removeEventListener('keydown', keyHandler)
31 |   })
32 | 
33 |   return (
34 |     <div className="md:hidden">
35 |       {/* Hamburger button */}
36 |       <button
37 |         ref={trigger}
38 |         className={`hamburger ${mobileNavOpen && 'active'}`}
39 |         aria-controls="mobile-nav"
40 |         aria-expanded={mobileNavOpen}
41 |         onClick={() => setMobileNavOpen(!mobileNavOpen)}
42 |       >
43 |         <span className="sr-only">Menu</span>
44 |         <svg
45 |           className="w-6 h-6 fill-current text-gray-300 hover:text-gray-200 transition duration-150 ease-in-out"
46 |           viewBox="0 0 24 24"
47 |           xmlns="http://www.w3.org/2000/svg"
48 |         >
49 |           <rect y="4" width="24" height="2" rx="1" />
50 |           <rect y="11" width="24" height="2" rx="1" />
51 |           <rect y="18" width="24" height="2" rx="1" />
52 |         </svg>
53 |       </button>
54 | 
55 |       {/*Mobile navigation */}
56 |       <nav
57 |         id="mobile-nav"
58 |         ref={mobileNav}
59 |         className="absolute top-full z-20 left-0 w-full px-4 sm:px-6 overflow-hidden transition-all duration-300 ease-in-out"
60 |         style={mobileNavOpen ? { maxHeight: mobileNav.current?.scrollHeight, opacity: 1 } : { maxHeight: 0, opacity: 0.8 }}
61 |       >
62 |         <ul className="bg-gray-800 px-4 py-2">
63 |           <li>
64 |             <Link href="/signin" className="flex font-medium w-full text-purple-600 hover:text-gray-200 py-2 justify-center" onClick={() => setMobileNavOpen(false)}>
65 |               Sign in
66 |             </Link>
67 |           </li>
68 |           <li>
69 |             <Link
70 |               href="/signup"
71 |               className="font-medium w-full inline-flex items-center justify-center border border-transparent px-4 py-2 my-2 rounded-sm text-white bg-purple-600 hover:bg-purple-700 transition duration-150 ease-in-out" onClick={() => setMobileNavOpen(false)}
72 |             >
73 |               Sign up
74 |             </Link>
75 |           </li>
76 |         </ul>
77 |       </nav>
78 |     </div>
79 |   )
80 | }
81 | 


--------------------------------------------------------------------------------
/components/modal-video.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useState, useRef, Fragment } from 'react'
 4 | import type { StaticImageData } from 'next/image'
 5 | import { Dialog, Transition } from '@headlessui/react'
 6 | import Image from 'next/image'
 7 | 
 8 | interface ModalVideoProps {
 9 |   thumb: StaticImageData
10 |   thumbWidth: number
11 |   thumbHeight: number
12 |   thumbAlt: string
13 |   video: string
14 |   videoWidth: number
15 |   videoHeight: number
16 | }
17 | 
18 | export default function ModalVideo({
19 |   thumb,
20 |   thumbWidth,
21 |   thumbHeight,
22 |   thumbAlt,
23 |   video,
24 |   videoWidth,
25 |   videoHeight,
26 | }: ModalVideoProps) {
27 |   const [modalOpen, setModalOpen] = useState<boolean>(false)
28 |   const videoRef = useRef<HTMLVideoElement>(null)
29 | 
30 |   return (
31 |     <div>
32 | 
33 |       {/* Video thumbnail */}
34 |       <div>
35 |         <div className="relative flex justify-center items-center" data-aos="fade-up" data-aos-delay="200">
36 |           <Image src={thumb} width={thumbWidth} height={thumbHeight} alt={thumbAlt} />
37 |           <button className="absolute group" onClick={() => { setModalOpen(true) }} aria-label="Watch the video">
38 |             <svg className="w-16 h-16 sm:w-20 sm:h-20 hover:opacity-75 transition duration-150 ease-in-out" viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg">
39 |               <defs>
40 |                 <linearGradient x1="78.169%" y1="9.507%" x2="24.434%" y2="90.469%" id="a">
41 |                   <stop stopColor="#EBF1F5" stopOpacity=".8" offset="0%" />
42 |                   <stop stopColor="#EBF1F5" offset="100%" />
43 |                 </linearGradient>
44 |               </defs>
45 |               <circle fill="url(#a)" cx="44" cy="44" r="44" />
46 |               <path className="fill-current text-purple-600" d="M52 44a.999.999 0 00-.427-.82l-10-7A1 1 0 0040 37V51a.999.999 0 001.573.82l10-7A.995.995 0 0052 44V44c0 .001 0 .001 0 0z" />
47 |             </svg>
48 |           </button>
49 |         </div>
50 |       </div>
51 |       {/* End: Video thumbnail */}
52 | 
53 |       <Transition show={modalOpen} as={Fragment} afterEnter={() => videoRef.current?.play()}>
54 |         <Dialog initialFocus={videoRef} onClose={() => setModalOpen(false)}>
55 | 
56 |           {/* Modal backdrop */}
57 |           <Transition.Child
58 |             className="fixed inset-0 z-[99999] bg-black bg-opacity-75 transition-opacity"
59 |             enter="transition ease-out duration-200"
60 |             enterFrom="opacity-0"
61 |             enterTo="opacity-100"
62 |             leave="transition ease-out duration-100"
63 |             leaveFrom="opacity-100"
64 |             leaveTo="opacity-0"
65 |             aria-hidden="true"
66 |           />
67 |           {/* End: Modal backdrop */}
68 | 
69 |           {/* Modal dialog */}
70 |           <Transition.Child
71 |             className="fixed inset-0 z-[99999] overflow-hidden flex items-center justify-center transform px-4 sm:px-6"
72 |             enter="transition ease-out duration-200"
73 |             enterFrom="opacity-0 scale-95"
74 |             enterTo="opacity-100 scale-100"
75 |             leave="ttransition ease-out duration-200"
76 |             leaveFrom="oopacity-100 scale-100"
77 |             leaveTo="opacity-0 scale-95"
78 |           >
79 |             <div className="max-w-6xl mx-auto h-full flex items-center">
80 |               <Dialog.Panel className="w-full max-h-full aspect-video bg-black overflow-hidden">
81 |                 <video ref={videoRef} width={videoWidth} height={videoHeight} loop controls>
82 |                   <source src={video} type="video/mp4" />
83 |                   Your browser does not support the video tag.
84 |                 </video>
85 |               </Dialog.Panel>
86 |             </div>
87 |           </Transition.Child>
88 |           {/* End: Modal dialog */}
89 | 
90 |         </Dialog>
91 |       </Transition>
92 | 
93 |     </div>
94 |   )
95 | }


--------------------------------------------------------------------------------
/app/(auth)/signin/page.tsx:
--------------------------------------------------------------------------------
 1 | export const metadata = {
 2 |   title: 'Sign In - Open PRO',
 3 |   description: 'Page description',
 4 | }
 5 | 
 6 | import Link from 'next/link'
 7 | 
 8 | export default function SignIn() {
 9 |   return (
10 |     <section className="relative">
11 |       <div className="max-w-6xl mx-auto px-4 sm:px-6">
12 |         <div className="pt-32 pb-12 md:pt-40 md:pb-20">
13 | 
14 |           {/* Page header */}
15 |           <div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
16 |             <h1 className="h1">Welcome back. We exist to make entrepreneurship easier.</h1>
17 |           </div>
18 | 
19 |           {/* Form */}
20 |           <div className="max-w-sm mx-auto">
21 |             <form>
22 |               <div className="flex flex-wrap -mx-3">
23 |                 <div className="w-full px-3">
24 |                   <button className="btn px-0 text-white bg-red-600 hover:bg-red-700 w-full relative flex items-center">
25 |                     <svg className="w-4 h-4 fill-current text-white opacity-75 shrink-0 mx-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
26 |                       <path d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z" />
27 |                     </svg>
28 |                     <span className="h-6 flex items-center border-r border-white border-opacity-25 mr-4" aria-hidden="true"></span>
29 |                     <span className="flex-auto pl-16 pr-8 -ml-16">Sign in with Google</span>
30 |                   </button>
31 |                 </div>
32 |               </div>
33 |             </form>
34 |             <div className="flex items-center my-6">
35 |               <div className="border-t border-gray-700 border-dotted grow mr-3" aria-hidden="true"></div>
36 |               <div className="text-gray-400">Or, sign in with your email</div>
37 |               <div className="border-t border-gray-700 border-dotted grow ml-3" aria-hidden="true"></div>
38 |             </div>
39 |             <form>
40 |               <div className="flex flex-wrap -mx-3 mb-4">
41 |                 <div className="w-full px-3">
42 |                   <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="email">Email</label>
43 |                   <input id="email" type="email" className="form-input w-full text-gray-300" placeholder="you@yourcompany.com" required />
44 |                 </div>
45 |               </div>
46 |               <div className="flex flex-wrap -mx-3 mb-4">
47 |                 <div className="w-full px-3">
48 |                   <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="password">Password</label>
49 |                   <input id="password" type="password" className="form-input w-full text-gray-300" placeholder="Password (at least 10 characters)" required />
50 |                 </div>
51 |               </div>
52 |               <div className="flex flex-wrap -mx-3 mb-4">
53 |                 <div className="w-full px-3">
54 |                   <div className="flex justify-between">
55 |                     <label className="flex items-center">
56 |                       <input type="checkbox" className="form-checkbox" />
57 |                       <span className="text-gray-400 ml-2">Keep me signed in</span>
58 |                     </label>
59 |                     <Link href="/reset-password" className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out">Forgot Password?</Link>
60 |                   </div>
61 |                 </div>
62 |               </div>
63 |               <div className="flex flex-wrap -mx-3 mt-6">
64 |                 <div className="w-full px-3">
65 |                   <button className="btn text-white bg-purple-600 hover:bg-purple-700 w-full">Sign in</button>
66 |                 </div>
67 |               </div>
68 |             </form>
69 |             <div className="text-gray-400 text-center mt-6">
70 |               Don’t you have an account? <Link href="/signup" className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out">Sign up</Link>
71 |             </div>
72 |           </div>
73 | 
74 |         </div>
75 |       </div>
76 |     </section>
77 |   )
78 | }
79 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Free React / Next.js landing page template
 2 | 
 3 | ![Open React / Next.js template preview](https://user-images.githubusercontent.com/2683512/231426532-c71f4291-4813-401b-a569-ada47fe13efa.png)
 4 | 
 5 | **Open** is a **free React / Next.js landing page template built with Tailwind CSS** for developers/makers who want to create a quick and professional landing page for their open source projects, SaaS products, online services, and more.
 6 | 
 7 | Use it for whatever you want, and be sure to reach us out on [Twitter](https://twitter.com/Cruip_com) if you build anything cool/useful with it.
 8 | 
 9 | Created and maintained with ❤️ by [Cruip.com](https://cruip.com).
10 | 
11 | *Version 1.0.0 built with the Cruip CSS is available [here](https://github.com/cruip/open-react-template/releases/tag/1.0.0).*
12 | *Version 2.0.3 built with Tailwind CSS and React + Vite is available [here](https://github.com/cruip/open-react-template/releases/tag/2.0.3).*
13 | 
14 | ## Live demo
15 | 
16 | Check the live demo here 👉️ [https://open.cruip.com/](https://open.cruip.com/)
17 | 
18 | ## Open PRO
19 | 
20 | [![Open Pro](https://user-images.githubusercontent.com/2683512/151177673-e56ade57-c98d-4c37-b315-d313bd14bb53.png)](https://cruip.com/)
21 | 
22 | ## Design files
23 | 
24 | If you need the design files, you can download them from Figma's Community 👉 https://bit.ly/401KSUS
25 | 
26 | ## Usage
27 | 
28 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
29 | 
30 | ### Getting Started
31 | 
32 | First, run the development server:
33 | 
34 | ```bash
35 | npm run dev
36 | # or
37 | yarn dev
38 | # or
39 | pnpm dev
40 | ```
41 | 
42 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
43 | 
44 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
45 | 
46 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
47 | 
48 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
49 | 
50 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
51 | 
52 | ### Learn More
53 | 
54 | To learn more about Next.js, take a look at the following resources:
55 | 
56 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
57 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
58 | 
59 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
60 | 
61 | ### Deploy on Vercel
62 | 
63 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
64 | 
65 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
66 | 
67 | 
68 | ### Support notes
69 | This template has been developed with the App Router (`app`) and React Server Components. If you’re unfamiliar with these beta features, you can find more information about them on the Next.js beta documentation page. So, please note that any request dealing with React (e.g. extra features, customisations, et cetera) is to be considered out of the support scope.
70 | 
71 | For more information about what support covers, please see our (FAQs)[https://cruip.com/faq/].
72 | 
73 | ## Credits
74 | 
75 | - [Nucleo](https://nucleoapp.com/)
76 | 
77 | ## Terms and License
78 | 
79 | - Released under the [GPL](https://www.gnu.org/licenses/gpl-3.0.html).
80 | - Copyright 2023 [Cruip](https://cruip.com/).
81 | - Use it for personal and commercial projects, but please don’t republish, redistribute, or resell the template.
82 | - Attribution is not required, although it is really appreciated.
83 | 
84 | ## About Us
85 | 
86 | We're an Italian developer/designer duo creating high-quality design/code resources for developers, makers, and startups.
87 | 
88 | ## Stay in the loop
89 | 
90 | If you would like to know when we release new resources, you can follow us on [Twitter](https://twitter.com/Cruip_com), or you can subscribe to our monthly [newsletter](https://cruip.com/#subscribe).
91 | 


--------------------------------------------------------------------------------
/app/(auth)/signup/page.tsx:
--------------------------------------------------------------------------------
 1 | export const metadata = {
 2 |   title: 'Sign Up - Open PRO',
 3 |   description: 'Page description',
 4 | }
 5 | 
 6 | import Link from 'next/link'
 7 | 
 8 | export default function SignUp() {
 9 |   return (
10 |     <section className="relative">
11 |       <div className="max-w-6xl mx-auto px-4 sm:px-6">
12 |         <div className="pt-32 pb-12 md:pt-40 md:pb-20">
13 | 
14 |           {/* Page header */}
15 |           <div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
16 |             <h1 className="h1">Welcome. We exist to make entrepreneurship easier.</h1>
17 |           </div>
18 | 
19 |           {/* Form */}
20 |           <div className="max-w-sm mx-auto">
21 |             <form>
22 |               <div className="flex flex-wrap -mx-3">
23 |                 <div className="w-full px-3">
24 |                   <button className="btn px-0 text-white bg-red-600 hover:bg-red-700 w-full relative flex items-center">
25 |                     <svg className="w-4 h-4 fill-current text-white opacity-75 shrink-0 mx-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
26 |                       <path d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z" />
27 |                     </svg>
28 |                     <span className="h-6 flex items-center border-r border-white border-opacity-25 mr-4" aria-hidden="true"></span>
29 |                     <span className="flex-auto pl-16 pr-8 -ml-16">Sign up with Google</span>
30 |                   </button>
31 |                 </div>
32 |               </div>
33 |             </form>
34 |             <div className="flex items-center my-6">
35 |               <div className="border-t border-gray-700 border-dotted grow mr-3" aria-hidden="true"></div>
36 |               <div className="text-gray-400">Or, register with your email</div>
37 |               <div className="border-t border-gray-700 border-dotted grow ml-3" aria-hidden="true"></div>
38 |             </div>
39 |             <form>
40 |               <div className="flex flex-wrap -mx-3 mb-4">
41 |                 <div className="w-full px-3">
42 |                   <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="full-name">Full Name <span className="text-red-600">*</span></label>
43 |                   <input id="full-name" type="text" className="form-input w-full text-gray-300" placeholder="First and last name" required />
44 |                 </div>
45 |               </div>
46 |               <div className="flex flex-wrap -mx-3 mb-4">
47 |                 <div className="w-full px-3">
48 |                   <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="company-name">Company Name <span className="text-red-600">*</span></label>
49 |                   <input id="company-name" type="text" className="form-input w-full text-gray-300" placeholder="Your company or app name" required />
50 |                 </div>
51 |               </div>
52 |               <div className="flex flex-wrap -mx-3 mb-4">
53 |                 <div className="w-full px-3">
54 |                   <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="email">Work Email <span className="text-red-600">*</span></label>
55 |                   <input id="email" type="email" className="form-input w-full text-gray-300" placeholder="you@yourcompany.com" required />
56 |                 </div>
57 |               </div>
58 |               <div className="flex flex-wrap -mx-3 mb-4">
59 |                 <div className="w-full px-3">
60 |                   <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="password">Password <span className="text-red-600">*</span></label>
61 |                   <input id="password" type="password" className="form-input w-full text-gray-300" placeholder="Password (at least 10 characters)" required />
62 |                 </div>
63 |               </div>
64 |               <div className="text-sm text-gray-500 text-center">
65 |                 I agree to be contacted by Open PRO about this offer as per the Open PRO <Link href="#" className="underline text-gray-400 hover:text-gray-200 hover:no-underline transition duration-150 ease-in-out">Privacy Policy</Link>.
66 |               </div>
67 |               <div className="flex flex-wrap -mx-3 mt-6">
68 |                 <div className="w-full px-3">
69 |                   <button className="btn text-white bg-purple-600 hover:bg-purple-700 w-full">Sign up</button>
70 |                 </div>
71 |               </div>
72 |             </form>
73 |             <div className="text-gray-400 text-center mt-6">
74 |               Already using Open PRO? <Link href="/signin" className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out">Sign in</Link>
75 |             </div>
76 |           </div>
77 | 
78 |         </div>
79 |       </div>
80 |     </section>
81 |   )
82 | }
83 | 


--------------------------------------------------------------------------------
/app/css/additional-styles/theme.css:
--------------------------------------------------------------------------------
  1 | .form-input:focus,
  2 | .form-textarea:focus,
  3 | .form-multiselect:focus,
  4 | .form-select:focus,
  5 | .form-checkbox:focus,
  6 | .form-radio:focus {
  7 |     @apply ring-0;
  8 | }
  9 | 
 10 | /* Hamburger button */
 11 | .hamburger svg > *:nth-child(1),
 12 | .hamburger svg > *:nth-child(2),
 13 | .hamburger svg > *:nth-child(3) {
 14 |     transform-origin: center;
 15 |     transform: rotate(0deg);
 16 | }
 17 | 
 18 | .hamburger svg > *:nth-child(1) {
 19 |     transition: y 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.1s ease-in;
 20 | }
 21 | 
 22 | .hamburger svg > *:nth-child(2) {
 23 |     transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
 24 | }
 25 | 
 26 | .hamburger svg > *:nth-child(3) {
 27 |     transition: y 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), width 0.1s 0.25s ease-in;
 28 | }        
 29 | 
 30 | .hamburger.active svg > *:nth-child(1) {
 31 |     opacity: 0;
 32 |     y: 11;
 33 |     transform: rotate(225deg);
 34 |     transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.1s 0.12s ease-out;
 35 | }
 36 |     
 37 | .hamburger.active svg > *:nth-child(2) {
 38 |     transform: rotate(225deg);
 39 |     transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
 40 | }
 41 |     
 42 | .hamburger.active svg > *:nth-child(3) {
 43 |     y: 11;
 44 |     transform: rotate(135deg);
 45 |     transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.1s ease-out;   
 46 | }
 47 | 
 48 | /* Pulsing animation */
 49 | @keyframes pulseLoop {
 50 |     0% { opacity: 0; transform: scale(0.1) translateZ(0); }
 51 |     40% { opacity: 1; }
 52 |     60% { opacity: 1; }
 53 |     100% { opacity: 0; transform: scale(2) translateZ(0); }
 54 | }
 55 | .pulse {
 56 |     transform: scale(0.1);
 57 |     opacity: 0;
 58 |     transform-origin: center;
 59 |     animation: pulseLoop 8000ms linear infinite;                                   
 60 | }
 61 | .pulse-1 {
 62 |     animation-delay: -2000ms;
 63 | }
 64 | .pulse-2 {
 65 |     animation-delay: -4000ms;
 66 | }
 67 | .pulse-3 {
 68 |     animation-delay: -6000ms;
 69 | }
 70 | 
 71 | /* Custom AOS distance */
 72 | @media screen {
 73 |     html:not(.no-js) body [data-aos=fade-up] {
 74 |         -webkit-transform: translate3d(0, 10px, 0);
 75 |         transform: translate3d(0, 10px, 0);
 76 |     }
 77 | 
 78 |     html:not(.no-js) body [data-aos=fade-down] {
 79 |         -webkit-transform: translate3d(0, -10px, 0);
 80 |         transform: translate3d(0, -10px, 0);
 81 |     }
 82 | 
 83 |     html:not(.no-js) body [data-aos=fade-right] {
 84 |         -webkit-transform: translate3d(-10px, 0, 0);
 85 |         transform: translate3d(-10px, 0, 0);
 86 |     }
 87 | 
 88 |     html:not(.no-js) body [data-aos=fade-left] {
 89 |         -webkit-transform: translate3d(10px, 0, 0);
 90 |         transform: translate3d(10px, 0, 0);
 91 |     }
 92 | 
 93 |     html:not(.no-js) body [data-aos=fade-up-right] {
 94 |         -webkit-transform: translate3d(-10px, 10px, 0);
 95 |         transform: translate3d(-10px, 10px, 0);
 96 |     }
 97 | 
 98 |     html:not(.no-js) body [data-aos=fade-up-left] {
 99 |         -webkit-transform: translate3d(10px, 10px, 0);
100 |         transform: translate3d(10px, 10px, 0);
101 |     }
102 | 
103 |     html:not(.no-js) body [data-aos=fade-down-right] {
104 |         -webkit-transform: translate3d(-10px, -10px, 0);
105 |         transform: translate3d(-10px, -10px, 0);
106 |     }
107 | 
108 |     html:not(.no-js) body [data-aos=fade-down-left] {
109 |         -webkit-transform: translate3d(10px, -10px, 0);
110 |         transform: translate3d(10px, -10px, 0);
111 |     }
112 | 
113 |     html:not(.no-js) body [data-aos=zoom-in-up] {
114 |         -webkit-transform: translate3d(0, 10px, 0) scale(.6);
115 |         transform: translate3d(0, 10px, 0) scale(.6);
116 |     }
117 | 
118 |     html:not(.no-js) body [data-aos=zoom-in-down] {
119 |         -webkit-transform: translate3d(0, -10px, 0) scale(.6);
120 |         transform: translate3d(0, -10px, 0) scale(.6);
121 |     }
122 | 
123 |     html:not(.no-js) body [data-aos=zoom-in-right] {
124 |         -webkit-transform: translate3d(-10px, 0, 0) scale(.6);
125 |         transform: translate3d(-10px, 0, 0) scale(.6);
126 |     }
127 | 
128 |     html:not(.no-js) body [data-aos=zoom-in-left] {
129 |         -webkit-transform: translate3d(10px, 0, 0) scale(.6);
130 |         transform: translate3d(10px, 0, 0) scale(.6);
131 |     }
132 | 
133 |     html:not(.no-js) body [data-aos=zoom-out-up] {
134 |         -webkit-transform: translate3d(0, 10px, 0) scale(1.2);
135 |         transform: translate3d(0, 10px, 0) scale(1.2);
136 |     }
137 | 
138 |     html:not(.no-js) body [data-aos=zoom-out-down] {
139 |         -webkit-transform: translate3d(0, -10px, 0) scale(1.2);
140 |         transform: translate3d(0, -10px, 0) scale(1.2);
141 |     }
142 | 
143 |     html:not(.no-js) body [data-aos=zoom-out-right] {
144 |         -webkit-transform: translate3d(-10px, 0, 0) scale(1.2);
145 |         transform: translate3d(-10px, 0, 0) scale(1.2);
146 |     }
147 | 
148 |     html:not(.no-js) body [data-aos=zoom-out-left] {
149 |         -webkit-transform: translate3d(10px, 0, 0) scale(1.2);
150 |         transform: translate3d(10px, 0, 0) scale(1.2);
151 |     }
152 | }


--------------------------------------------------------------------------------
/components/testimonials.tsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image'
 2 | 
 3 | import TestimonialImage01 from '@/public/images/testimonial-01.jpg'
 4 | import TestimonialImage02 from '@/public/images/testimonial-02.jpg'
 5 | import TestimonialImage03 from '@/public/images/testimonial-03.jpg'
 6 | 
 7 | export default function Testimonials() {
 8 |   return (
 9 |     <section>
10 |       <div className="max-w-6xl mx-auto px-4 sm:px-6">
11 |         <div className="py-12 md:py-20 border-t border-gray-800">
12 | 
13 |           {/* Section header */}
14 |           <div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
15 |             <h2 className="h2 mb-4">Don't take our word for it</h2>
16 |             <p className="text-xl text-gray-400">Vitae aliquet nec ullamcorper sit amet risus nullam eget felis semper quis lectus nulla at volutpat diam ut venenatis tellus—in ornare.</p>
17 |           </div>
18 | 
19 |           {/* Testimonials */}
20 |           <div className="max-w-sm mx-auto grid gap-8 lg:grid-cols-3 lg:gap-6 items-start lg:max-w-none">
21 | 
22 |             {/* 1st testimonial */}
23 |             <div className="flex flex-col h-full p-6 bg-gray-800" data-aos="fade-up">
24 |               <div>
25 |                 <div className="relative inline-flex flex-col mb-4">
26 |                   <Image className="rounded-full" src={TestimonialImage01} width={48} height={48} alt="Testimonial 01" />
27 |                   <svg className="absolute top-0 right-0 -mr-3 w-6 h-5 fill-current text-purple-600" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg">
28 |                     <path d="M0 13.517c0-2.346.611-4.774 1.833-7.283C3.056 3.726 4.733 1.648 6.865 0L11 2.696C9.726 4.393 8.777 6.109 8.152 7.844c-.624 1.735-.936 3.589-.936 5.56v4.644H0v-4.531zm13 0c0-2.346.611-4.774 1.833-7.283 1.223-2.508 2.9-4.586 5.032-6.234L24 2.696c-1.274 1.697-2.223 3.413-2.848 5.148-.624 1.735-.936 3.589-.936 5.56v4.644H13v-4.531z" />
29 |                   </svg>
30 |                 </div>
31 |               </div>
32 |               <blockquote className="text-lg text-gray-400 grow">— Open PRO lets me quickly get the insights I care about so that I can focus on my productive work. I've had Open PRO for about 24 hours now and I honestly don't know how I functioned without it before.</blockquote>
33 |               <div className="text-gray-700 font-medium mt-6 pt-5 border-t border-gray-700">
34 |                 <cite className="text-gray-200 not-italic">Anastasia Dan</cite> - <a className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out" href="#0">UX Board</a>
35 |               </div>
36 |             </div>
37 | 
38 |             {/* 2nd testimonial */}
39 |             <div className="flex flex-col h-full p-6 bg-gray-800" data-aos="fade-up" data-aos-delay="200">
40 |               <div>
41 |                 <div className="relative inline-flex flex-col mb-4">
42 |                   <Image className="rounded-full" src={TestimonialImage02} width={48} height={48} alt="Testimonial 02" />
43 |                   <svg className="absolute top-0 right-0 -mr-3 w-6 h-5 fill-current text-purple-600" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg">
44 |                     <path d="M0 13.517c0-2.346.611-4.774 1.833-7.283C3.056 3.726 4.733 1.648 6.865 0L11 2.696C9.726 4.393 8.777 6.109 8.152 7.844c-.624 1.735-.936 3.589-.936 5.56v4.644H0v-4.531zm13 0c0-2.346.611-4.774 1.833-7.283 1.223-2.508 2.9-4.586 5.032-6.234L24 2.696c-1.274 1.697-2.223 3.413-2.848 5.148-.624 1.735-.936 3.589-.936 5.56v4.644H13v-4.531z" />
45 |                   </svg>
46 |                 </div>
47 |               </div>
48 |               <blockquote className="text-lg text-gray-400 grow">— Open PRO lets me quickly get the insights I care about so that I can focus on my productive work. I've had Open PRO for about 24 hours now and I honestly don't know how I functioned without it before.</blockquote>
49 |               <div className="text-gray-700 font-medium mt-6 pt-5 border-t border-gray-700">
50 |                 <cite className="text-gray-200 not-italic">Anastasia Dan</cite> - <a className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out" href="#0">UX Board</a>
51 |               </div>
52 |             </div>
53 | 
54 |             {/* 3rd testimonial */}
55 |             <div className="flex flex-col h-full p-6 bg-gray-800" data-aos="fade-up" data-aos-delay="400">
56 |               <div>
57 |                 <div className="relative inline-flex flex-col mb-4">
58 |                   <Image className="rounded-full" src={TestimonialImage03} width={48} height={48} alt="Testimonial 03" />
59 |                   <svg className="absolute top-0 right-0 -mr-3 w-6 h-5 fill-current text-purple-600" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg">
60 |                     <path d="M0 13.517c0-2.346.611-4.774 1.833-7.283C3.056 3.726 4.733 1.648 6.865 0L11 2.696C9.726 4.393 8.777 6.109 8.152 7.844c-.624 1.735-.936 3.589-.936 5.56v4.644H0v-4.531zm13 0c0-2.346.611-4.774 1.833-7.283 1.223-2.508 2.9-4.586 5.032-6.234L24 2.696c-1.274 1.697-2.223 3.413-2.848 5.148-.624 1.735-.936 3.589-.936 5.56v4.644H13v-4.531z" />
61 |                   </svg>
62 |                 </div>
63 |               </div>
64 |               <blockquote className="text-lg text-gray-400 grow">— Open PRO lets me quickly get the insights I care about so that I can focus on my productive work. I've had Open PRO for about 24 hours now and I honestly don't know how I functioned without it before.</blockquote>
65 |               <div className="text-gray-700 font-medium mt-6 pt-5 border-t border-gray-700">
66 |                 <cite className="text-gray-200 not-italic">Anastasia Dan</cite> - <a className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out" href="#0">UX Board</a>
67 |               </div>
68 |             </div>
69 | 
70 |           </div>
71 | 
72 |         </div>
73 |       </div>
74 |     </section>
75 |   )
76 | }
77 | 


--------------------------------------------------------------------------------
/components/features.tsx:
--------------------------------------------------------------------------------
 1 | export default function Features() {
 2 |   return (
 3 |     <section>
 4 |       <div className="max-w-6xl mx-auto px-4 sm:px-6">
 5 |         <div className="py-12 md:py-20">
 6 | 
 7 |           {/* Section header */}
 8 |           <div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
 9 |             <h2 className="h2 mb-4">The majority our customers do not understand their workflows.</h2>
10 |             <p className="text-xl text-gray-400">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
11 |           </div>
12 | 
13 |           {/* Items */}
14 |           <div className="max-w-sm mx-auto grid gap-8 md:grid-cols-2 lg:grid-cols-3 lg:gap-16 items-start md:max-w-2xl lg:max-w-none" data-aos-id-blocks>
15 | 
16 |             {/* 1st item */}
17 |             <div className="relative flex flex-col items-center" data-aos="fade-up" data-aos-anchor="[data-aos-id-blocks]">
18 |               <svg className="w-16 h-16 mb-4" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
19 |                 <rect className="fill-current text-purple-600" width="64" height="64" rx="32" />
20 |                 <path className="stroke-current text-purple-100" d="M30 39.313l-4.18 2.197L27 34.628l-5-4.874 6.91-1.004L32 22.49l3.09 6.26L42 29.754l-3 2.924" strokeLinecap="square" strokeWidth="2" fill="none" fillRule="evenodd" />
21 |                 <path className="stroke-current text-purple-300" d="M43 42h-9M43 37h-9" strokeLinecap="square" strokeWidth="2" />
22 |               </svg>
23 |               <h4 className="h4 mb-2">Instant Features</h4>
24 |               <p className="text-lg text-gray-400 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
25 |             </div>
26 | 
27 |             {/* 2nd item */}
28 |             <div className="relative flex flex-col items-center" data-aos="fade-up" data-aos-delay="100" data-aos-anchor="[data-aos-id-blocks]">
29 |               <svg className="w-16 h-16 mb-4" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
30 |                 <circle className="fill-current text-purple-600" cx="32" cy="32" r="32" />
31 |                 <path className="stroke-current text-purple-100" strokeWidth="2" strokeLinecap="square" d="M21 23h22v18H21z" fill="none" fillRule="evenodd" />
32 |                 <path className="stroke-current text-purple-300" d="M26 28h12M26 32h12M26 36h5" strokeWidth="2" strokeLinecap="square" />
33 |               </svg>
34 |               <h4 className="h4 mb-2">Instant Features</h4>
35 |               <p className="text-lg text-gray-400 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
36 |             </div>
37 | 
38 |             {/* 3rd item */}
39 |             <div className="relative flex flex-col items-center" data-aos="fade-up" data-aos-delay="200" data-aos-anchor="[data-aos-id-blocks]">
40 |               <svg className="w-16 h-16 mb-4" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
41 |                 <rect className="fill-current text-purple-600" width="64" height="64" rx="32" />
42 |                 <g transform="translate(21 21)" strokeLinecap="square" strokeWidth="2" fill="none" fillRule="evenodd">
43 |                   <ellipse className="stroke-current text-purple-300" cx="11" cy="11" rx="5.5" ry="11" />
44 |                   <path className="stroke-current text-purple-100" d="M11 0v22M0 11h22" />
45 |                   <circle className="stroke-current text-purple-100" cx="11" cy="11" r="11" />
46 |                 </g>
47 |               </svg>
48 |               <h4 className="h4 mb-2">Instant Features</h4>
49 |               <p className="text-lg text-gray-400 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
50 |             </div>
51 | 
52 |             {/* 4th item */}
53 |             <div className="relative flex flex-col items-center" data-aos="fade-up" data-aos-delay="300" data-aos-anchor="[data-aos-id-blocks]">
54 |               <svg className="w-16 h-16 mb-4" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
55 |                 <rect className="fill-current text-purple-600" width="64" height="64" rx="32" />
56 |                 <g transform="translate(22 21)" strokeLinecap="square" strokeWidth="2" fill="none" fillRule="evenodd">
57 |                   <path className="stroke-current text-purple-100" d="M17 22v-6.3a8.97 8.97 0 003-6.569A9.1 9.1 0 0011.262 0 9 9 0 002 9v1l-2 5 2 1v4a2 2 0 002 2h4a5 5 0 005-5v-5" />
58 |                   <circle className="stroke-current text-purple-300" cx="13" cy="9" r="3" />
59 |                 </g>
60 |               </svg>
61 |               <h4 className="h4 mb-2">Instant Features</h4>
62 |               <p className="text-lg text-gray-400 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
63 |             </div>
64 | 
65 |             {/* 5th item */}
66 |             <div className="relative flex flex-col items-center" data-aos="fade-up" data-aos-delay="400" data-aos-anchor="[data-aos-id-blocks]">
67 |               <svg className="w-16 h-16 mb-4" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
68 |                 <rect className="fill-current text-purple-600" width="64" height="64" rx="32" />
69 |                 <g strokeLinecap="square" strokeWidth="2" fill="none" fillRule="evenodd">
70 |                   <path className="stroke-current text-purple-100" d="M29 42h10.229a2 2 0 001.912-1.412l2.769-9A2 2 0 0042 29h-7v-4c0-2.373-1.251-3.494-2.764-3.86a1.006 1.006 0 00-1.236.979V26l-5 6" />
71 |                   <path className="stroke-current text-purple-300" d="M22 30h4v12h-4z" />
72 |                 </g>
73 |               </svg>
74 |               <h4 className="h4 mb-2">Instant Features</h4>
75 |               <p className="text-lg text-gray-400 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
76 |             </div>
77 | 
78 |             {/* 6th item */}
79 |             <div className="relative flex flex-col items-center" data-aos="fade-up" data-aos-delay="500" data-aos-anchor="[data-aos-id-blocks]">
80 |               <svg className="w-16 h-16 mb-4" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
81 |                 <rect className="fill-current text-purple-600" width="64" height="64" rx="32" />
82 |                 <g transform="translate(21 22)" strokeLinecap="square" strokeWidth="2" fill="none" fillRule="evenodd">
83 |                   <path className="stroke-current text-purple-300" d="M17 2V0M19.121 2.879l1.415-1.415M20 5h2M19.121 7.121l1.415 1.415M17 8v2M14.879 7.121l-1.415 1.415M14 5h-2M14.879 2.879l-1.415-1.415" />
84 |                   <circle className="stroke-current text-purple-300" cx="17" cy="5" r="3" />
85 |                   <path className="stroke-current text-purple-100" d="M8.86 1.18C3.8 1.988 0 5.6 0 10c0 5 4.9 9 11 9a10.55 10.55 0 003.1-.4L20 21l-.6-5.2a9.125 9.125 0 001.991-2.948" />
86 |                 </g>
87 |               </svg>
88 |               <h4 className="h4 mb-2">Instant Features</h4>
89 |               <p className="text-lg text-gray-400 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
90 |             </div>
91 | 
92 |           </div>
93 | 
94 |         </div>
95 |       </div>
96 |     </section>
97 |   )
98 | }
99 | 


--------------------------------------------------------------------------------
/components/blocks.tsx:
--------------------------------------------------------------------------------
 1 | export default function Blocks() {
 2 |   return (
 3 |     <section>
 4 |       <div className="max-w-6xl mx-auto px-4 sm:px-6">
 5 |         <div className="py-12 md:py-20 border-t border-gray-800">
 6 | 
 7 |           {/* Section header */}
 8 |           <div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
 9 |             <h2 className="h2 mb-4">The majority our customers do not understand their workflows.</h2>
10 |             <p className="text-xl text-gray-400">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
11 |           </div>
12 | 
13 |           {/* Items */}
14 |           <div className="max-w-sm mx-auto grid gap-8 md:grid-cols-2 lg:grid-cols-3 lg:gap-16 items-start md:max-w-2xl lg:max-w-none" data-aos-id-blocks>
15 | 
16 |             {/* 1st item */}
17 |             <div className="relative flex flex-col items-center" data-aos="fade-up" data-aos-anchor="[data-aos-id-blocks]">
18 |               <svg className="w-16 h-16 mb-4" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
19 |                 <rect className="fill-current text-purple-600" width="64" height="64" rx="32" />
20 |                 <path className="stroke-current text-purple-100" d="M30 39.313l-4.18 2.197L27 34.628l-5-4.874 6.91-1.004L32 22.49l3.09 6.26L42 29.754l-3 2.924" strokeLinecap="square" strokeWidth="2" fill="none" fillRule="evenodd" />
21 |                 <path className="stroke-current text-purple-300" d="M43 42h-9M43 37h-9" strokeLinecap="square" strokeWidth="2" />
22 |               </svg>
23 |               <h4 className="h4 mb-2">Instant Features</h4>
24 |               <p className="text-lg text-gray-400 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
25 |             </div>
26 | 
27 |             {/* 2nd item */}
28 |             <div className="relative flex flex-col items-center" data-aos="fade-up" data-aos-delay="100" data-aos-anchor="[data-aos-id-blocks]">
29 |               <svg className="w-16 h-16 mb-4" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
30 |                 <circle className="fill-current text-purple-600" cx="32" cy="32" r="32" />
31 |                 <path className="stroke-current text-purple-100" strokeWidth="2" strokeLinecap="square" d="M21 23h22v18H21z" fill="none" fillRule="evenodd" />
32 |                 <path className="stroke-current text-purple-300" d="M26 28h12M26 32h12M26 36h5" strokeWidth="2" strokeLinecap="square" />
33 |               </svg>
34 |               <h4 className="h4 mb-2">Instant Features</h4>
35 |               <p className="text-lg text-gray-400 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
36 |             </div>
37 | 
38 |             {/* 3rd item */}
39 |             <div className="relative flex flex-col items-center" data-aos="fade-up" data-aos-delay="200" data-aos-anchor="[data-aos-id-blocks]">
40 |               <svg className="w-16 h-16 mb-4" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
41 |                 <rect className="fill-current text-purple-600" width="64" height="64" rx="32" />
42 |                 <g transform="translate(21 21)" strokeLinecap="square" strokeWidth="2" fill="none" fillRule="evenodd">
43 |                   <ellipse className="stroke-current text-purple-300" cx="11" cy="11" rx="5.5" ry="11" />
44 |                   <path className="stroke-current text-purple-100" d="M11 0v22M0 11h22" />
45 |                   <circle className="stroke-current text-purple-100" cx="11" cy="11" r="11" />
46 |                 </g>
47 |               </svg>
48 |               <h4 className="h4 mb-2">Instant Features</h4>
49 |               <p className="text-lg text-gray-400 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
50 |             </div>
51 | 
52 |             {/* 4th item */}
53 |             <div className="relative flex flex-col items-center" data-aos="fade-up" data-aos-delay="300" data-aos-anchor="[data-aos-id-blocks]">
54 |               <svg className="w-16 h-16 mb-4" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
55 |                 <rect className="fill-current text-purple-600" width="64" height="64" rx="32" />
56 |                 <g transform="translate(22 21)" strokeLinecap="square" strokeWidth="2" fill="none" fillRule="evenodd">
57 |                   <path className="stroke-current text-purple-100" d="M17 22v-6.3a8.97 8.97 0 003-6.569A9.1 9.1 0 0011.262 0 9 9 0 002 9v1l-2 5 2 1v4a2 2 0 002 2h4a5 5 0 005-5v-5" />
58 |                   <circle className="stroke-current text-purple-300" cx="13" cy="9" r="3" />
59 |                 </g>
60 |               </svg>
61 |               <h4 className="h4 mb-2">Instant Features</h4>
62 |               <p className="text-lg text-gray-400 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
63 |             </div>
64 | 
65 |             {/* 5th item */}
66 |             <div className="relative flex flex-col items-center" data-aos="fade-up" data-aos-delay="400" data-aos-anchor="[data-aos-id-blocks]">
67 |               <svg className="w-16 h-16 mb-4" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
68 |                 <rect className="fill-current text-purple-600" width="64" height="64" rx="32" />
69 |                 <g strokeLinecap="square" strokeWidth="2" fill="none" fillRule="evenodd">
70 |                   <path className="stroke-current text-purple-100" d="M29 42h10.229a2 2 0 001.912-1.412l2.769-9A2 2 0 0042 29h-7v-4c0-2.373-1.251-3.494-2.764-3.86a1.006 1.006 0 00-1.236.979V26l-5 6" />
71 |                   <path className="stroke-current text-purple-300" d="M22 30h4v12h-4z" />
72 |                 </g>
73 |               </svg>
74 |               <h4 className="h4 mb-2">Instant Features</h4>
75 |               <p className="text-lg text-gray-400 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
76 |             </div>
77 | 
78 |             {/* 6th item */}
79 |             <div className="relative flex flex-col items-center" data-aos="fade-up" data-aos-delay="500" data-aos-anchor="[data-aos-id-blocks]">
80 |               <svg className="w-16 h-16 mb-4" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
81 |                 <rect className="fill-current text-purple-600" width="64" height="64" rx="32" />
82 |                 <g transform="translate(21 22)" strokeLinecap="square" strokeWidth="2" fill="none" fillRule="evenodd">
83 |                   <path className="stroke-current text-purple-300" d="M17 2V0M19.121 2.879l1.415-1.415M20 5h2M19.121 7.121l1.415 1.415M17 8v2M14.879 7.121l-1.415 1.415M14 5h-2M14.879 2.879l-1.415-1.415" />
84 |                   <circle className="stroke-current text-purple-300" cx="17" cy="5" r="3" />
85 |                   <path className="stroke-current text-purple-100" d="M8.86 1.18C3.8 1.988 0 5.6 0 10c0 5 4.9 9 11 9a10.55 10.55 0 003.1-.4L20 21l-.6-5.2a9.125 9.125 0 001.991-2.948" />
86 |                 </g>
87 |               </svg>
88 |               <h4 className="h4 mb-2">Instant Features</h4>
89 |               <p className="text-lg text-gray-400 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
90 |             </div>
91 | 
92 |           </div>
93 | 
94 |         </div>
95 |       </div>
96 |     </section>
97 |   )
98 | }
99 | 


--------------------------------------------------------------------------------
/components/zigzag.tsx:
--------------------------------------------------------------------------------
  1 | import Image from 'next/image'
  2 | 
  3 | import FeatImage01 from '@/public/images/features-03-image-01.png'
  4 | import FeatImage02 from '@/public/images/features-03-image-02.png'
  5 | import FeatImage03 from '@/public/images/features-03-image-03.png'
  6 | 
  7 | export default function Zigzag() {
  8 |   return (
  9 |     <section>
 10 |       <div className="max-w-6xl mx-auto px-4 sm:px-6">
 11 |         <div className="py-12 md:py-20 border-t border-gray-800">
 12 | 
 13 |           {/* Section header */}
 14 |           <div className="max-w-3xl mx-auto text-center pb-12 md:pb-16">
 15 |             <div className="inline-flex text-sm font-semibold py-1 px-3 m-2 text-green-600 bg-green-200 rounded-full mb-4">Reach goals that matter</div>
 16 |             <h1 className="h2 mb-4">One product, unlimited solutions</h1>
 17 |             <p className="text-xl text-gray-400">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit laborum — semper quis lectus nulla.</p>
 18 |           </div>
 19 | 
 20 |           {/* Items */}
 21 |           <div className="grid gap-20">
 22 | 
 23 |             {/* 1st item */}
 24 |             <div className="md:grid md:grid-cols-12 md:gap-6 items-center">
 25 |               {/* Image */}
 26 |               <div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-5 lg:col-span-6 mb-8 md:mb-0 md:order-1" data-aos="fade-up">
 27 |                 <Image className="max-w-full mx-auto md:max-w-none h-auto" src={FeatImage01} width={540} height={405} alt="Features 01" />
 28 |               </div>
 29 |               {/* Content */}
 30 |               <div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-7 lg:col-span-6" data-aos="fade-right">
 31 |                 <div className="md:pr-4 lg:pr-12 xl:pr-16">
 32 |                   <div className="font-architects-daughter text-xl text-purple-600 mb-2">More speed. Less spend</div>
 33 |                   <h3 className="h3 mb-3">Keep projects on schedule</h3>
 34 |                   <p className="text-xl text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 35 |                   <ul className="text-lg text-gray-400 -mb-2">
 36 |                     <li className="flex items-center mb-2">
 37 |                       <svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
 38 |                         <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
 39 |                       </svg>
 40 |                       <span>Duis aute irure dolor in reprehenderit</span>
 41 |                     </li>
 42 |                     <li className="flex items-center mb-2">
 43 |                       <svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
 44 |                         <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
 45 |                       </svg>
 46 |                       <span>Excepteur sint occaecat</span>
 47 |                     </li>
 48 |                     <li className="flex items-center">
 49 |                       <svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
 50 |                         <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
 51 |                       </svg>
 52 |                       <span>Amet consectetur adipiscing elit</span>
 53 |                     </li>
 54 |                   </ul>
 55 |                 </div>
 56 |               </div>
 57 |             </div>
 58 | 
 59 |             {/* 2nd item */}
 60 |             <div className="md:grid md:grid-cols-12 md:gap-6 items-center">
 61 |               {/* Image */}
 62 |               <div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-5 lg:col-span-6 mb-8 md:mb-0 rtl" data-aos="fade-up">
 63 |                 <Image className="max-w-full mx-auto md:max-w-none h-auto" src={FeatImage02} width={540} height={405} alt="Features 02" />
 64 |               </div>
 65 |               {/* Content */}
 66 |               <div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-7 lg:col-span-6" data-aos="fade-left">
 67 |                 <div className="md:pl-4 lg:pl-12 xl:pl-16">
 68 |                   <div className="font-architects-daughter text-xl text-purple-600 mb-2">More speed. Less spend</div>
 69 |                   <h3 className="h3 mb-3">Keep projects on schedule</h3>
 70 |                   <p className="text-xl text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 71 |                   <ul className="text-lg text-gray-400 -mb-2">
 72 |                     <li className="flex items-center mb-2">
 73 |                       <svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
 74 |                         <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
 75 |                       </svg>
 76 |                       <span>Duis aute irure dolor in reprehenderit</span>
 77 |                     </li>
 78 |                     <li className="flex items-center mb-2">
 79 |                       <svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
 80 |                         <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
 81 |                       </svg>
 82 |                       <span>Excepteur sint occaecat</span>
 83 |                     </li>
 84 |                     <li className="flex items-center">
 85 |                       <svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
 86 |                         <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
 87 |                       </svg>
 88 |                       <span>Amet consectetur adipiscing elit</span>
 89 |                     </li>
 90 |                   </ul>
 91 |                 </div>
 92 |               </div>
 93 |             </div>
 94 | 
 95 |             {/* 3rd item */}
 96 |             <div className="md:grid md:grid-cols-12 md:gap-6 items-center">
 97 |               {/* Image */}
 98 |               <div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-5 lg:col-span-6 mb-8 md:mb-0 md:order-1" data-aos="fade-up">
 99 |                 <Image className="max-w-full mx-auto md:max-w-none h-auto" src={FeatImage03} width={540} height={405} alt="Features 03" />
100 |               </div>
101 |               {/* Content */}
102 |               <div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-7 lg:col-span-6" data-aos="fade-right">
103 |                 <div className="md:pr-4 lg:pr-12 xl:pr-16">
104 |                   <div className="font-architects-daughter text-xl text-purple-600 mb-2">More speed. Less spend</div>
105 |                   <h3 className="h3 mb-3">Keep projects on schedule</h3>
106 |                   <p className="text-xl text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
107 |                   <ul className="text-lg text-gray-400 -mb-2">
108 |                     <li className="flex items-center mb-2">
109 |                       <svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
110 |                         <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
111 |                       </svg>
112 |                       <span>Duis aute irure dolor in reprehenderit</span>
113 |                     </li>
114 |                     <li className="flex items-center mb-2">
115 |                       <svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
116 |                         <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
117 |                       </svg>
118 |                       <span>Excepteur sint occaecat</span>
119 |                     </li>
120 |                     <li className="flex items-center">
121 |                       <svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
122 |                         <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
123 |                       </svg>
124 |                       <span>Amet consectetur adipiscing elit</span>
125 |                     </li>
126 |                   </ul>
127 |                 </div>
128 |               </div>
129 |             </div>
130 | 
131 |           </div>
132 | 
133 |         </div>
134 |       </div>
135 |     </section>
136 |   )
137 | }
138 | 


--------------------------------------------------------------------------------
/components/hero.tsx:
--------------------------------------------------------------------------------
 1 | import VideoThumb from '@/public/images/hero-image-01.jpg'
 2 | import ModalVideo from '@/components/modal-video'
 3 | 
 4 | export default function Hero() {
 5 |   return (
 6 |     <section>
 7 |       <div className="max-w-6xl mx-auto px-4 sm:px-6 relative">
 8 | 
 9 |         {/* Illustration behind hero content */}
10 |         <div className="absolute left-0 bottom-0 -ml-20 hidden lg:block pointer-events-none" aria-hidden="true" data-aos="fade-up" data-aos-delay="400">
11 |           <svg className="max-w-full" width="564" height="552" viewBox="0 0 564 552" fill="none" xmlns="http://www.w3.org/2000/svg">
12 |             <defs>
13 |               <linearGradient id="illustration-02" x1="-3.766" y1="300.204" x2="284.352" y2="577.921" gradientUnits="userSpaceOnUse">
14 |                 <stop stopColor="#5D5DFF" stopOpacity=".01" />
15 |                 <stop offset="1" stopColor="#5D5DFF" stopOpacity=".32" />
16 |               </linearGradient>
17 |             </defs>
18 |             <path fillRule="evenodd" clipRule="evenodd" d="M151.631 22.954c19.025-13.987 40.754-20.902 67.157-20.902 18.865 0 40.12 3.534 64.461 10.542 15.855 4.566 30.274 8.448 43.282 11.908-3.117-.73-6.316-1.474-9.604-2.238-13.789-3.205-29.419-6.84-46.941-11.331C153.37-18.963 125.867 40.456 75.939 148.322l-.003.006a7576.221 7576.221 0 01-7.711 16.624c-29.474 63.279-43.616 99.759-44.264 135.927-.659 36.738 12.251 72.311 47.633 131.253 35.391 58.957 60.19 86.192 91.501 100.484.962.439 1.93.865 2.905 1.279-9.73-2.472-18.561-5.625-26.916-9.633-32.753-15.71-57.88-43.982-92.714-104.315-34.834-60.333-46.755-96.23-43.984-132.449 2.732-35.713 20.082-71.213 55.526-132.603a7349.326 7349.326 0 009.317-16.2l.004-.007c29.787-51.892 53.315-92.88 84.398-115.734zm34.507 514.934a241.712 241.712 0 01-5.151-.83c-5.964-1.702-11.607-3.772-17.062-6.262-30.898-14.104-55.459-41.124-90.616-99.693-35.167-58.584-48-93.868-47.349-130.187.642-35.809 14.725-72.101 44.078-135.12 2.513-5.395 4.96-10.683 7.356-15.857l.357-.771.002-.005c24.651-53.256 44.122-95.32 71.478-119.633 18.318-16.282 40.065-24.26 67.588-24.26 15.567 0 32.985 2.554 52.67 7.6 14.706 3.77 28.076 6.935 40.144 9.75-2.797-.558-5.665-1.125-8.609-1.707h-.003l-.003-.001-.053-.01h-.001c-12.823-2.535-27.354-5.407-43.664-9.044C148.495-12.404 126.33 48.27 86.092 158.42l-.004.011-.016.042a8434.991 8434.991 0 01-6.201 16.936c-23.765 64.604-34.847 101.709-33.55 137.844C47.638 349.957 61.359 384.852 96.945 442c35.541 57.077 59.736 83.093 89.193 95.888zm16.598 2.005a338.416 338.416 0 01-8.148-.869 103.656 103.656 0 01-7.5-2.904c-28.737-12.428-53.535-39.114-88.445-95.176-35.381-56.82-49.02-91.447-50.323-127.762-1.285-35.802 9.756-72.729 33.428-137.083 1.94-5.276 3.831-10.449 5.683-15.517l.007-.017.007-.021.522-1.427c19.862-54.372 35.55-97.317 59.408-122.911C172.358 9.403 206.126 2.494 256.864 13.81c13.649 3.043 26.048 5.55 37.243 7.773-2.531-.411-5.124-.828-7.785-1.255l-.071-.011h-.003c-11.906-1.914-25.397-4.082-40.56-6.926C144.349-5.618 127.156 56.06 95.945 168.03l-.003.009a8355.73 8355.73 0 01-4.821 17.248c-18.45 65.652-26.689 103.234-23.608 139.244 3.09 36.109 18.017 71.465 53.24 126.105 33.482 51.938 56.333 76.988 81.983 89.257zm15.827 1.2a485.788 485.788 0 01-9.653-.664l-.264-.107c-27.037-11.022-51.209-36.471-86.212-90.77-35.484-55.044-49.829-88.975-52.928-125.19-3.055-35.705 5.157-73.119 23.541-138.534a8620.925 8620.925 0 004.497-16.087l.325-1.165.002-.006c15.402-55.255 27.568-98.9 48.147-125.608 16.123-20.925 37.347-30.952 66.801-30.952 9.869 0 20.667 1.127 32.5 3.347 12.636 2.37 24.106 4.27 34.467 5.944-2.277-.28-4.608-.562-6.997-.85h-.001l-.001-.001h-.001c-11.054-1.338-23.584-2.855-37.688-4.97-94.204-14.122-106.775 48.314-129.594 161.65l-.003.014-.047.235-.002.008a8400.92 8400.92 0 01-3.479 17.22c-13.513 66.44-19.115 104.361-14.4 140.163 4.727 35.898 20.289 70.48 55.506 123.345 31.385 47.111 52.956 71.08 75.484 82.978zm15.539.719a709.825 709.825 0 01-10.437-.441c-23.548-10.908-46.233-35.298-78.922-84.366-35.486-53.268-50.443-86.468-55.187-122.497-3.728-28.301-2.526-56.394 14.377-139.503 1.21-5.95 2.383-11.773 3.529-17.466 11.26-55.927 20.154-100.102 37.666-127.768 18.294-28.901 45.951-38.863 89.673-32.313 11.708 1.755 22.326 3.099 31.917 4.27-2.072-.167-4.193-.334-6.366-.505h-.002l-.018-.002c-10.221-.803-21.804-1.714-34.864-3.146-87.388-9.576-95.67 53.388-110.705 167.692l-.002.014-.047.36c-.74 5.623-1.496 11.372-2.28 17.244-8.937 66.993-12.098 105.125-5.896 140.639 6.221 35.612 22.326 69.391 57.443 120.48 29.544 42.981 49.981 65.798 70.121 77.308zm54.655.656c-2.322.006-4.68.009-7.073.009-15.823 0-30.079-.135-43.037-.519-20.923-10.699-42.32-33.928-73.018-78.587-35.393-51.49-50.874-83.93-57.12-119.691-4.907-28.091-5.274-56.21 5.907-140.03.786-5.887 1.544-11.65 2.286-17.287v-.001l.042-.32c7.418-56.4 13.278-100.948 27.923-129.427 13.148-25.57 33.385-37.482 64.556-37.482 5.049 0 10.388.312 16.027.93 13.049 1.43 24.617 2.341 34.829 3.145h.001l.114.009h.001c59.526 4.682 79.579 6.26 136.926 89.687 36.003 52.377 54.831 83.312 64.453 117.449 9.765 34.64 10.139 71.93 1.38 137.589-8.64 64.766-18.645 98.41-35.683 119.994-16.965 21.491-41.268 32.104-86.06 46.46-1.661.532-3.296 1.052-4.905 1.56a1391.5 1391.5 0 01-10.245 2.482 1345.267 1345.267 0 01-11.347 1.958 1812.762 1812.762 0 01-12.481 1.367 2129.386 2129.386 0 01-13.476.705zm27.18 1.709c50.448-1.039 82.218-5.164 109.211-18.112 33.159-15.904 58.522-44.394 93.581-105.118 35.06-60.724 47.051-96.934 44.246-133.603-2.762-36.096-20.19-71.792-55.788-133.449-56.949-98.64-86.21-106.404-173.068-129.448l-.056-.014c-14.774-3.92-31.516-8.363-50.261-13.76C159.031-25.254 125.808 32.624 65.497 137.694l-.002.003a6915.634 6915.634 0 01-9.316 16.197C20.581 215.552 3.154 251.247.392 287.344c-2.806 36.669 9.186 72.879 44.245 133.603 35.06 60.724 60.423 89.214 93.582 105.118 12.593 6.04 26.224 10.16 42.307 12.943 6.906 1.966 14.23 3.443 22.172 4.508 6.442 1.628 13.241 2.748 20.583 3.429 5.999 1.314 12.297 2.105 19.071 2.433 5.603 1.028 11.455 1.517 17.722 1.517l.314-.001c3.67.505 7.416.742 11.25.742 13.466 0 28.027-2.926 44.299-7.459zm18.196-2.551c42.427-3.518 69.755-9.295 92.704-22.832 29.646-17.487 51.462-47.164 80.495-109.498 29.027-62.318 38.148-99.046 33.653-135.513-4.425-35.901-22.303-70.703-58.23-130.556-39.939-66.535-65.307-89.912-104.239-104.3 53.844 16.863 81.528 37.31 126.939 115.968 35.443 61.39 52.793 96.891 55.525 132.603 2.772 36.219-9.149 72.116-43.983 132.449-34.834 60.333-59.962 88.605-92.714 104.315-23.296 11.175-50.3 15.706-90.15 17.364zm93.883-30.185c-20.416 14.652-45.267 21.74-84.153 27.302 36.558-3.571 61.14-9.392 81.957-21.671 29.256-17.257 50.857-46.697 79.7-108.619 28.849-61.94 37.924-98.373 33.479-134.425-4.381-35.543-22.179-70.166-57.959-129.772-45.707-76.146-72.185-95.334-122.253-109.565 36.374 12.515 60.888 34.697 100.963 99.056 36.138 58.035 54.382 91.924 60.326 127.553 6.035 36.185-.421 73.291-23.824 136.909-23.412 63.646-41.906 94.334-68.236 113.232zm-75.097 23.912c35.377-7.423 57.817-15.704 75.801-31.314 23.206-20.143 38.593-51.68 56.77-116.363 18.167-64.644 22.158-101.999 14.722-137.83-7.323-35.285-25.856-68.245-62.092-124.454-40.109-62.219-63.784-83.239-97.755-94.01 46.513 11.797 71.824 29.769 117.688 103.423 35.995 57.806 54.162 91.528 60.05 126.824 5.972 35.804-.459 72.634-23.728 135.889-22.96 62.416-41.892 93.9-67.525 112.298-18.433 13.228-40.651 20.217-73.931 25.537zm76.065-38.742c-16.398 17.18-38.639 26.625-66.953 34.691 29.631-6.852 49.359-14.869 65.378-28.773 22.583-19.603 38.327-51.956 56.156-115.394 18.071-64.301 22.052-101.4 14.688-136.882-7.258-34.975-25.716-67.78-61.814-123.777-45.857-71.136-70.036-87.963-113.146-97.515 31.663 9.156 54.508 29.065 94.518 89.127 36.23 54.385 54.981 86.404 63.553 121.278 8.703 35.411 6.992 72.898-6.313 138.315-13.314 65.463-25.8 97.696-46.067 118.93zm-59.762 30.414c25.551-9.413 45.464-19.917 59.62-37.85 17.506-22.178 27.29-54.964 36.094-120.97 8.799-65.956 8.41-103.465-1.437-138.395-4.847-17.196-12.323-34.408-23.53-54.17-10.572-18.643-24.116-39.015-41.2-63.869-39.854-57.98-61.888-76.799-91.408-84.443 39.946 7.477 63.031 23.183 108.786 91.868 36.098 54.188 54.774 86.063 63.275 120.648 8.626 35.092 6.91 72.342-6.33 137.439-13.062 64.216-25.834 97.286-45.555 117.947-13.941 14.607-31.58 23.548-58.315 31.795z" fill="url(#illustration-02)" />
19 |           </svg>
20 |         </div>
21 | 
22 |         {/* Hero content */}
23 |         <div className="relative pt-32 pb-10 md:pt-40 md:pb-16">
24 | 
25 |           {/* Section header */}
26 |           <div className="max-w-3xl mx-auto text-center pb-12 md:pb-16">
27 |             <h1 className="h1 mb-4" data-aos="fade-up">Landing template for startups</h1>
28 |             <p className="text-xl text-gray-400 mb-8" data-aos="fade-up" data-aos-delay="200">Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever.</p>
29 |             <div className="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center">
30 |               <div data-aos="fade-up" data-aos-delay="400">
31 |                 <a className="btn text-white bg-purple-600 hover:bg-purple-700 w-full mb-4 sm:w-auto sm:mb-0" href="#0">Start free trial</a>
32 |               </div>
33 |               <div data-aos="fade-up" data-aos-delay="600">
34 |                 <a className="btn text-white bg-gray-700 hover:bg-gray-800 w-full sm:w-auto sm:ml-4" href="#0">Learn more</a>
35 |               </div>
36 |             </div>
37 |           </div>
38 | 
39 |           <ModalVideo
40 |             thumb={VideoThumb}
41 |             thumbWidth={1024}
42 |             thumbHeight={576}
43 |             thumbAlt="Modal video thumbnail"
44 |             video="/videos/video.mp4"
45 |             videoWidth={1920}
46 |             videoHeight={1080} />
47 | 
48 |         </div>
49 | 
50 |       </div>
51 |     </section>
52 |   )
53 | }
54 | 


--------------------------------------------------------------------------------
/components/ui/footer.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import Link from 'next/link'
  3 | 
  4 | export default function Footer() {
  5 |   return (
  6 |     <footer>
  7 |       <div className="py-12 md:py-16">
  8 |         <div className="max-w-6xl mx-auto px-4 sm:px-6">
  9 | 
 10 |           {/* Top area: Blocks */}
 11 |           <div className="grid md:grid-cols-12 gap-8 lg:gap-20 mb-8 md:mb-12">
 12 | 
 13 |             {/* 1st block */}
 14 |             <div className="md:col-span-4 lg:col-span-5">
 15 |               <div className="mb-2">
 16 |                 {/* Logo */}
 17 |                 <Link href="/" className="inline-block" aria-label="Cruip">
 18 |                   <svg className="w-8 h-8 fill-current text-purple-600" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
 19 |                     <path d="M31.952 14.751a260.51 260.51 0 00-4.359-4.407C23.932 6.734 20.16 3.182 16.171 0c1.634.017 3.21.28 4.692.751 3.487 3.114 6.846 6.398 10.163 9.737.493 1.346.811 2.776.926 4.262zm-1.388 7.883c-2.496-2.597-5.051-5.12-7.737-7.471-3.706-3.246-10.693-9.81-15.736-7.418-4.552 2.158-4.717 10.543-4.96 16.238A15.926 15.926 0 010 16C0 9.799 3.528 4.421 8.686 1.766c1.82.593 3.593 1.675 5.038 2.587 6.569 4.14 12.29 9.71 17.792 15.57-.237.94-.557 1.846-.952 2.711zm-4.505 5.81a56.161 56.161 0 00-1.007-.823c-2.574-2.054-6.087-4.805-9.394-4.044-3.022.695-4.264 4.267-4.97 7.52a15.945 15.945 0 01-3.665-1.85c.366-3.242.89-6.675 2.405-9.364 2.315-4.107 6.287-3.072 9.613-1.132 3.36 1.96 6.417 4.572 9.313 7.417a16.097 16.097 0 01-2.295 2.275z" />
 20 |                   </svg>
 21 |                 </Link>
 22 |               </div>
 23 |               <div className="text-gray-400">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
 24 |             </div>
 25 | 
 26 |             {/* 2nd, 3rd and 4th blocks */}
 27 |             <div className="md:col-span-8 lg:col-span-7 grid sm:grid-cols-3 gap-8">
 28 | 
 29 |               {/* 2nd block */}
 30 |               <div className="text-sm">
 31 |                 <h6 className="text-gray-200 font-medium mb-1">Products</h6>
 32 |                 <ul>
 33 |                   <li className="mb-1">
 34 |                     <Link href="/" className="text-gray-400 hover:text-gray-100 transition duration-150 ease-in-out">Web Studio</Link>
 35 |                   </li>
 36 |                   <li className="mb-1">
 37 |                     <Link href="/" className="text-gray-400 hover:text-gray-100 transition duration-150 ease-in-out">DynamicBox Flex</Link>
 38 |                   </li>
 39 |                   <li className="mb-1">
 40 |                     <Link href="/" className="text-gray-400 hover:text-gray-100 transition duration-150 ease-in-out">Programming Forms</Link>
 41 |                   </li>
 42 |                 </ul>
 43 |               </div>
 44 | 
 45 |               {/* 3rd block */}
 46 |               <div className="text-sm">
 47 |                 <h6 className="text-gray-200 font-medium mb-1">Resources</h6>
 48 |                 <ul>
 49 |                   <li className="mb-1">
 50 |                     <Link href="/" className="text-gray-400 hover:text-gray-100 transition duration-150 ease-in-out">Nostrud exercitation</Link>
 51 |                   </li>
 52 |                   <li className="mb-1">
 53 |                     <Link href="/" className="text-gray-400 hover:text-gray-100 transition duration-150 ease-in-out">Visual mockups</Link>
 54 |                   </li>
 55 |                   <li className="mb-1">
 56 |                     <Link href="/" className="text-gray-400 hover:text-gray-100 transition duration-150 ease-in-out">Nostrud exercitation</Link>
 57 |                   </li>
 58 |                   <li className="mb-1">
 59 |                     <Link href="/" className="text-gray-400 hover:text-gray-100 transition duration-150 ease-in-out">Visual mockups</Link>
 60 |                   </li>
 61 |                   <li className="mb-1">
 62 |                     <Link href="/" className="text-gray-400 hover:text-gray-100 transition duration-150 ease-in-out">Nostrud exercitation</Link>
 63 |                   </li>
 64 |                 </ul>
 65 |               </div>
 66 | 
 67 |               {/* 4th block */}
 68 |               <div className="text-sm">
 69 |                 <h6 className="text-gray-200 font-medium mb-1">Company</h6>
 70 |                 <ul>
 71 |                   <li className="mb-1">
 72 |                     <Link href="/" className="text-gray-400 hover:text-gray-100 transition duration-150 ease-in-out">Consectetur adipiscing</Link>
 73 |                   </li>
 74 |                   <li className="mb-1">
 75 |                     <Link href="/" className="text-gray-400 hover:text-gray-100 transition duration-150 ease-in-out">Labore et dolore</Link>
 76 |                   </li>
 77 |                   <li className="mb-1">
 78 |                     <Link href="/" className="text-gray-400 hover:text-gray-100 transition duration-150 ease-in-out">Consectetur adipiscing</Link>
 79 |                   </li>
 80 |                   <li className="mb-1">
 81 |                     <Link href="/" className="text-gray-400 hover:text-gray-100 transition duration-150 ease-in-out">Labore et dolore</Link>
 82 |                   </li>
 83 |                   <li className="mb-1">
 84 |                     <Link href="/" className="text-gray-400 hover:text-gray-100 transition duration-150 ease-in-out">Consectetur adipiscing</Link>
 85 |                   </li>
 86 |                 </ul>
 87 |               </div>
 88 | 
 89 |             </div>
 90 | 
 91 |           </div>
 92 | 
 93 |           {/* Bottom area */}
 94 |           <div className="md:flex md:items-center md:justify-between">
 95 | 
 96 |             {/* Social links */}
 97 |             <ul className="flex mb-4 md:order-1 md:ml-4 md:mb-0">
 98 |               <li>
 99 |                 <Link href="/" className="flex justify-center items-center text-purple-600 bg-gray-800 hover:text-gray-100 hover:bg-purple-600 rounded-full transition duration-150 ease-in-out" aria-label="Twitter">
100 |                   <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
101 |                     <path d="M24 11.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H8c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8z" />
102 |                   </svg>
103 |                 </Link>
104 |               </li>
105 |               <li className="ml-4">
106 |                 <Link href="/" className="flex justify-center items-center text-purple-600 bg-gray-800 hover:text-gray-100 hover:bg-purple-600 rounded-full transition duration-150 ease-in-out" aria-label="Github">
107 |                   <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
108 |                     <path d="M16 8.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V22c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z" />
109 |                   </svg>
110 |                 </Link>
111 |               </li>
112 |               <li className="ml-4">
113 |                 <Link href="/" className="flex justify-center items-center text-purple-600 bg-gray-800 hover:text-gray-100 hover:bg-purple-600 rounded-full transition duration-150 ease-in-out" aria-label="Facebook">
114 |                   <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
115 |                     <path d="M14.023 24L14 17h-3v-3h3v-2c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V14H21l-1 3h-2.72v7h-3.257z" />
116 |                   </svg>
117 |                 </Link>
118 |               </li>
119 |               <li className="ml-4">
120 |                 <Link href="/" className="flex justify-center items-center text-purple-600 bg-gray-800 hover:text-gray-100 hover:bg-purple-600 rounded-full transition duration-150 ease-in-out" aria-label="Instagram">
121 |                   <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
122 |                     <circle cx="20.145" cy="11.892" r="1" />
123 |                     <path d="M16 20c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zm0-6c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z" />
124 |                     <path d="M20 24h-8c-2.056 0-4-1.944-4-4v-8c0-2.056 1.944-4 4-4h8c2.056 0 4 1.944 4 4v8c0 2.056-1.944 4-4 4zm-8-14c-.935 0-2 1.065-2 2v8c0 .953 1.047 2 2 2h8c.935 0 2-1.065 2-2v-8c0-.935-1.065-2-2-2h-8z" />
125 |                   </svg>
126 |                 </Link>
127 |               </li>
128 |               <li className="ml-4">
129 |                 <Link href="/" className="flex justify-center items-center text-purple-600 bg-gray-800 hover:text-gray-100 hover:bg-purple-600 rounded-full transition duration-150 ease-in-out" aria-label="Linkedin">
130 |                   <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
131 |                     <path d="M23.3 8H8.7c-.4 0-.7.3-.7.7v14.7c0 .3.3.6.7.6h14.7c.4 0 .7-.3.7-.7V8.7c-.1-.4-.4-.7-.8-.7zM12.7 21.6h-2.3V14h2.4v7.6h-.1zM11.6 13c-.8 0-1.4-.7-1.4-1.4 0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4-.1.7-.7 1.4-1.4 1.4zm10 8.6h-2.4v-3.7c0-.9 0-2-1.2-2s-1.4 1-1.4 2v3.8h-2.4V14h2.3v1c.3-.6 1.1-1.2 2.2-1.2 2.4 0 2.8 1.6 2.8 3.6v4.2h.1z" />
132 |                   </svg>
133 |                 </Link>
134 |               </li>
135 |             </ul>
136 | 
137 |             {/* Copyrights note */}
138 |             <div className="text-gray-400 text-sm mr-4">&copy; Cruip.com. All rights reserved.</div>
139 | 
140 |           </div>
141 | 
142 |         </div>
143 |       </div>
144 |     </footer>
145 |   )
146 | }
147 | 


--------------------------------------------------------------------------------
/components/newsletter.tsx:
--------------------------------------------------------------------------------
 1 | export default function Newsletter() {
 2 |   return (
 3 |     <section>
 4 |       <div className="max-w-6xl mx-auto px-4 sm:px-6">
 5 | 
 6 |         {/* CTA box */}
 7 |         <div className="relative bg-purple-600 py-10 px-8 md:py-16 md:px-12" data-aos="fade-up">
 8 | 
 9 |           {/* Background illustration */}
10 |           <div className="absolute right-0 top-0 -ml-40 pointer-events-none" aria-hidden="true">
11 |             <svg width="238" height="110" fill="none" xmlns="http://www.w3.org/2000/svg">
12 |               <defs>
13 |                 <linearGradient id="illustration-04" x1="369.483" y1="-84.633" x2="139.954" y2="-199.798" gradientUnits="userSpaceOnUse">
14 |                   <stop stopColor="#fff" stopOpacity=".01" />
15 |                   <stop offset="1" stopColor="#fff" stopOpacity=".24" />
16 |                 </linearGradient>
17 |               </defs>
18 |               <path fillRule="evenodd" clipRule="evenodd" d="M189.135 89.198c3.624 9.678 7.039 18.799 15.713 18.187 7.885-.548 19.733-2.523 33.152-5.256v2.04c-13.345 2.709-25.125 4.663-33.013 5.211-.331.023-.657.034-.975.034-9.441 0-13.176-9.972-16.792-19.627-3.571-9.536-6.946-18.545-15.389-16.96-13.086 2.455-24.348 3.539-37.385 4.794l-.024.002c-8.07.776-17.217 1.657-27.841 2.98-4.629.58-8.116 1.595-10.919 2.411l-.016.005c-6.68 1.947-10.032 2.924-14.897-6.267-3.62-6.842-8.541-7.827-14.24-8.967h-.001c-4.793-.959-10.225-2.046-15.65-6.76C40.64 52.141 15.48 20.345.66 0H3.13c14.82 20.254 39.089 50.863 49.042 59.515 5.023 4.367 9.956 5.354 14.73 6.31 5.94 1.187 11.552 2.31 15.616 9.991 3.443 6.51 5.39 7.141 9.773 6.057-3.311.19-5.726-1.455-8.768-7.374-3.533-6.876-8.064-7.803-13.8-8.976-4.642-.949-9.902-2.025-15.275-6.679C43.995 49.797 18.704 19.375 4.057 0h2.506C21.226 19.288 45.58 48.524 55.755 57.333c4.977 4.309 9.748 5.285 14.363 6.23l.005.001c5.763 1.178 11.206 2.292 15.178 10.021 3.255 6.333 5.085 6.977 9.146 5.928-3.035.107-5.304-1.569-8.148-7.27-3.45-6.913-7.822-7.829-13.359-8.988-4.49-.939-9.58-2.004-14.902-6.593C47.268 47.376 21.798 18.312 7.406 0h2.572c14.477 18.232 39.16 46.348 49.366 55.147 4.93 4.252 9.544 5.217 14.005 6.15h.002c5.583 1.17 10.856 2.273 14.737 10.053 1.853 3.713 3.336 5.515 4.959 6.027.993.312 2.15.164 3.558-.212-2.77.013-4.89-1.707-7.534-7.175-3.363-6.95-7.578-7.854-12.914-8.998h-.003c-4.34-.93-9.259-1.984-14.528-6.509C50.465 44.901 24.695 17.086 10.69 0h2.583C27.39 17.058 52.088 43.659 62.93 52.965c4.883 4.194 9.337 5.148 13.644 6.07l.002.001c5.404 1.158 10.508 2.253 14.297 10.083 1.74 3.6 3.195 5.421 4.712 5.906 1.453.463 3.288-.17 5.829-1.05l.005-.002c2.872-.995 6.804-2.356 12.263-2.776 10.687-.813 19.576-.84 28.174-.867 8.671-.027 16.548-.055 24.765-.913-6.672.214-13.232-.169-20.311-.59-8.482-.504-17.257-1.025-27.637-.582-5.471.237-9.134 1.68-12.076 2.838-5.4 2.127-8.165 2.774-11.971-5.607-3.193-7.03-7.09-7.908-12.025-9.019-4.044-.91-8.628-1.944-13.791-6.34C56.639 39.755 30.287 15.234 16.926 0h2.688c13.353 14.888 38.3 38.212 50.492 48.595 4.787 4.075 9.115 5.051 12.933 5.911 5.26 1.184 9.802 2.207 13.407 10.142 3.19 7.023 4.631 6.458 9.418 4.574l.002-.001c2.919-1.149 6.915-2.722 12.72-2.974 10.488-.448 19.311.076 27.841.583 9.399.56 17.871 1.054 26.886.14-7.662.148-15.028-.743-22.644-1.672l-.129-.016c-8.337-1.017-16.965-2.07-27.032-1.98-5.676.051-9.475 1.759-12.25 3.006h-.001l-.009.004c-2.405 1.081-4.305 1.935-6.216 1.186-1.747-.684-3.2-2.637-4.855-6.53-3.024-7.113-6.422-7.922-11.125-9.04-3.568-.849-8.01-1.906-13.06-6.172-3.452-2.915-8.08-6.644-12.982-10.59C49.18 24.025 32.319 10.441 23.107.347A22.509 22.509 0 0121.788 0h7.364c-.172.105-.354.2-.546.282C36.59 8.69 50.299 18.877 62.563 27.985l.026.02c6.966 5.173 13.544 10.06 18.276 14.038 4.635 3.899 8.487 4.842 11.885 5.674 4.679 1.145 8.721 2.134 12.048 10.233 1.33 3.238 2.466 4.944 3.575 5.37 1.047.398 2.446-.272 4.385-1.203l.004-.002c2.896-1.39 6.848-3.288 12.92-3.288h.127l.131.001c10.128.096 18.8 1.427 27.186 2.715 10.143 1.558 19.227 2.942 29.116 1.933-8.585.026-16.703-1.72-25.117-3.543l-.012-.002c-8.19-1.775-16.659-3.61-26.357-4.05-5.874-.272-9.581 1.763-12.297 3.253l-.032.018c-2.1 1.152-3.756 2.06-5.499 1.424-1.642-.604-2.926-2.45-4.427-6.376-2.775-7.256-5.555-7.979-9.764-9.074h-.002c-3.165-.824-7.103-1.85-11.977-5.914-5.877-4.9-14.04-9.772-22.683-14.929-11.904-7.1-24.212-14.445-31.192-22.409A21.936 21.936 0 0131.402 0h2.51c.151.181.309.366.475.555a41.174 41.174 0 002.058 2.161A19.713 19.713 0 0134.51 0h2.345a21.721 21.721 0 001.719 2.138 36.154 36.154 0 001.535 1.586C39.087 2.47 38.283 1.231 37.663 0h2.283c.712 1.228 1.636 2.464 2.812 3.727.39.418.797.826 1.214 1.228A24.14 24.14 0 0140.872 0h2.188c.968 1.84 2.244 3.608 3.885 5.318a26.373 26.373 0 00.912.893A31.463 31.463 0 0144.03 0h2.22c1.672 3.3 3.549 5.556 4.882 6.906 6.749 6.832 16.135 9.186 26.072 11.678l.006.002c8.887 2.228 18.076 4.533 25.178 10.355 4.299 3.524 7.382 4.447 9.858 5.188 4.261 1.276 6.609 2.32 9.26 10.426 1.233 3.767 2.108 4.761 2.625 4.931.593.191 1.683-.578 2.941-1.475l.015-.011c2.699-1.925 6.77-4.828 13.572-4 9.344 1.131 17.646 3.986 25.674 6.748 13.142 4.52 25.555 8.787 40.152 4.348 9.929-3.023 20.193-.49 30.12 1.96l.012.003 1.382.34v2.06l-1.87-.46c-5.67-1.4-11.163-2.755-16.554-3.17 4.327.818 8.598 2.19 12.803 3.545 1.856.599 3.731 1.203 5.621 1.764v2.086c-2.099-.612-4.175-1.282-6.23-1.944l-.004-.002c-5.464-1.762-10.75-3.457-16.03-4.018 4.349 1.003 8.58 2.716 12.741 4.405 3.116 1.265 6.281 2.55 9.523 3.555v2.094c-3.516-1.053-6.922-2.435-10.272-3.795h-.003c-5.35-2.173-10.514-4.267-15.793-4.936 4.45 1.177 8.694 3.283 12.864 5.358l.173.087c4.197 2.09 8.485 4.224 13.031 5.441v2.056c-4.973-1.253-9.583-3.547-14.093-5.792h-.002c-5.186-2.582-10.186-5.06-15.439-5.842 4.499 1.353 8.69 3.858 12.803 6.321h.001c5.244 3.141 10.636 6.37 16.73 7.339v2.027c-6.578-.956-12.241-4.346-17.75-7.644l-.009-.006c-7.325-4.387-14.258-8.518-22.642-6.536 6.503.685 11.778 5.075 16.916 9.363l.083.07c5.881 4.91 11.941 9.968 20.03 9.724 1.069-.031 2.194-.083 3.372-.155v2.003c-1.156.07-2.261.12-3.313.151-.207.006-.414.01-.618.01-8.534 0-14.783-5.216-20.833-10.265l-.002-.002c-4.717-3.938-9.252-7.703-14.586-8.719 4.734 1.825 8.707 5.677 12.594 9.458l.042.041c5.622 5.471 11.424 11.116 19.623 10.832 2.143-.074 4.52-.233 7.093-.469v1.986c-2.612.248-4.968.411-7.025.482-.227.008-.453.012-.677.012-8.683 0-14.662-5.817-20.449-11.449l-.002-.002c-6.138-5.97-11.934-11.607-20.396-9.544a6.362 6.362 0 01-.264.06c6.645.94 11.198 6.85 15.624 12.615l.018.024c5.046 6.575 10.262 13.37 18.631 12.993 4.052-.18 8.987-.683 14.54-1.438v2.016c-5.51.744-10.413 1.24-14.45 1.42-.262.012-.521.018-.777.018-8.945 0-14.331-7.017-19.546-13.811l-.003-.004-.006-.007c-5.346-6.966-10.397-13.547-18.803-11.626-.132.03-.261.057-.391.084l-.311.066c6.794 1.085 10.839 8.053 14.767 14.848 4.641 8.027 9.03 15.614 17.534 15.145 5.726-.312 13.322-1.305 21.986-2.76v2.023c-8.612 1.44-16.166 2.423-21.877 2.734-.291.016-.58.024-.862.024-9.167 0-13.914-8.21-18.51-16.16l-.003-.005c-3.706-6.412-7.25-12.526-12.858-13.763 5.122 2.473 8.33 8.832 11.453 15.061 4.311 8.593 8.385 16.71 16.95 16.2 6.486-.386 15.461-1.675 25.707-3.53v2.028c-10.185 1.837-19.111 3.112-25.587 3.498-.305.018-.607.028-.902.028-9.266.001-13.681-8.802-17.955-17.325l-.001-.003-.007-.012c-3.481-6.943-6.805-13.57-12.502-14.813 5.221 2.575 8.235 9.477 11.168 16.232 3.976 9.158 7.731 17.803 16.357 17.251 7.205-.465 17.596-2.081 29.429-4.364v2.035c-11.765 2.261-22.099 3.86-29.3 4.325a14.29 14.29 0 01-.939.031c-9.357 0-13.434-9.39-17.382-18.48v-.002c-3.236-7.452-6.334-14.556-12.065-15.862 5.271 2.704 8.063 10.121 10.779 17.372l.042.114zm-85.541-10.165a58.657 58.657 0 012.739-.415c4.4-.548 8.533-1.017 12.453-1.437-3.127.273-6.375.582-9.789.953-2.012.221-3.792.54-5.403.9zm20.806-4.32c-4.073.225-8.35.52-12.983.95a43.406 43.406 0 00-5.73.921 51.813 51.813 0 013.094-.438 494.47 494.47 0 0115.619-1.434zm5.224-2.265c-4.911.104-10.092.31-15.791.743a38.9 38.9 0 00-5.905.912 46.087 46.087 0 013.305-.433c6.728-.622 12.731-.974 18.391-1.222zm-3.703-11.62h-.235c-2.341 0-4.335.317-6.08.772a28.976 28.976 0 013.885-.298c10.241-.069 18.981.981 27.421 2.011.905.11 1.799.22 2.689.326l-.39-.06-.388-.059-.01-.001c-8.314-1.277-16.911-2.597-26.892-2.69zm-64.55-31.237C48.6 20.107 34.27 9.46 26.29.733a2.244 2.244 0 01-.083.002c9.365 9.76 25.058 22.401 38.058 32.872l.08.065c5.089 4.1 9.486 7.641 12.938 10.556 4.686 3.96 8.696 4.913 12.232 5.754 4.874 1.16 9.083 2.161 12.502 10.203 1.388 3.262 2.577 4.994 3.744 5.451.701.275 1.542.12 2.573-.259a3.898 3.898 0 01-.677-.19c-1.704-.655-3.113-2.592-4.708-6.477-2.942-7.158-6.185-7.952-10.673-9.05-3.433-.84-7.704-1.887-12.698-6.087-4.691-3.944-11.256-8.82-18.207-13.982zm97.895 28.533c-8.129-2.019-16.534-4.106-26.095-4.718-2.483-.159-4.567.13-6.353.632 1.228-.155 2.562-.222 4.028-.155 9.866.449 18.418 2.301 26.688 4.092l.014.003c2.655.575 5.278 1.14 7.894 1.646a444.507 444.507 0 01-6.176-1.5zm-68.92-21.098c-6.198-5.129-14.641-9.493-23.581-14.113-2.88-1.488-5.781-2.989-8.626-4.529a942.257 942.257 0 006.96 4.182c8.713 5.198 16.942 10.108 22.94 15.11 4.528 3.777 8.07 4.699 11.196 5.513l.006.001c4.462 1.161 7.985 2.078 11.128 10.295 1.204 3.147 2.266 4.852 3.249 5.213.551.204 1.244.014 2.105-.387-.023-.007-.046-.012-.069-.016-.028-.006-.056-.012-.084-.022-1.603-.574-2.847-2.408-4.293-6.33-2.69-7.301-5.32-8.008-9.3-9.076h-.002c-3.037-.816-6.815-1.83-11.628-5.84zm71.064 19.28c-8.064-2.259-16.403-4.595-25.821-5.373-2.502-.208-4.592.076-6.377.594a21.799 21.799 0 014.086-.117c9.74.623 18.236 2.733 26.45 4.773 3.145.781 6.247 1.55 9.344 2.211-2.548-.652-5.101-1.365-7.682-2.088zM69.811 21.884l-.008-.004a654.364 654.364 0 01-4.285-1.864l2.165 1.12.012.007c8.636 4.464 17.565 9.079 23.93 14.345 4.477 3.731 7.872 4.642 10.869 5.446h.001c4.252 1.142 7.611 2.044 10.659 10.317 1.152 3.126 2.163 4.807 3.09 5.14.503.18 1.149-.019 1.955-.424-1.556-.55-2.758-2.373-4.144-6.28-2.61-7.36-4.958-8.013-8.848-9.094-2.905-.807-6.52-1.812-11.267-5.747-6.443-5.316-15.434-9.203-24.129-12.962zm70.608 24.101c-2.506-.303-4.579-.04-6.337.5a19.188 19.188 0 014.124-.013c9.477.963 17.845 3.573 25.938 6.098 3.996 1.246 7.925 2.47 11.867 3.448-3.43-1.01-6.853-2.184-10.327-3.379l-.018-.006c-7.926-2.725-16.12-5.543-25.247-6.648zm23.123 8.492c-7.996-2.494-16.264-5.073-25.539-6.016-2.495-.253-4.572.02-6.342.544a20.477 20.477 0 014.092-.066c9.602.794 18.029 3.154 26.178 5.436l.019.005c3.56.997 7.067 1.974 10.576 2.79-2.98-.825-5.959-1.749-8.978-2.69l-.006-.003zm-90.373-33.35l-.014-.006-.36-.123c8.124 3.527 16.306 7.263 22.419 12.307 4.42 3.663 7.665 4.565 10.53 5.361 4.044 1.124 7.239 2.012 10.196 10.352 1.101 3.106 2.061 4.764 2.932 5.068.459.158 1.079-.06 1.832-.468-1.453-.583-2.587-2.39-3.874-6.185-2.542-7.417-4.622-8.018-8.397-9.108l-.009-.003c-2.771-.801-6.221-1.8-10.894-5.653-6.623-5.444-15.64-8.544-24.36-11.543zm45.555 25.661c1.032 3.048 1.963 4.73 2.768 5.003.417.145 1.012-.097 1.744-.529-1.355-.615-2.427-2.41-3.629-6.085-2.45-7.49-4.398-8.073-7.931-9.131h-.002c-2.648-.793-5.944-1.78-10.552-5.558-6.026-4.94-13.81-7.262-21.575-9.25 6.993 2.523 13.83 5.43 19.253 9.888 4.361 3.594 7.591 4.527 10.187 5.277h.002c3.978 1.15 6.853 1.981 9.735 10.385z" fill="url(#illustration-04)" />
19 |             </svg>
20 |           </div>
21 | 
22 |           <div className="relative flex flex-col lg:flex-row justify-between items-center">
23 | 
24 |             {/* CTA content */}
25 |             <div className="mb-6 lg:mr-16 lg:mb-0 text-center lg:text-left lg:w-1/2">
26 |               <h3 className="h3 text-white mb-2">Stay in the loop</h3>
27 |               <p className="text-purple-200 text-lg">Join our newsletter to get top news before anyone else.</p>
28 |             </div>
29 | 
30 |             {/* CTA form */}
31 |             <form className="w-full lg:w-1/2">
32 |               <div className="flex flex-col sm:flex-row justify-center max-w-xs mx-auto sm:max-w-md lg:max-w-none">
33 |                 <input type="email" className="w-full appearance-none bg-purple-700 border border-purple-500 focus:border-purple-300 rounded-sm px-4 py-3 mb-2 sm:mb-0 sm:mr-2 text-white placeholder-purple-400" placeholder="Your best email…" aria-label="Your best email…" />
34 |                 <a className="btn text-purple-600 bg-purple-100 hover:bg-white shadow" href="#0">Subscribe</a>
35 |               </div>
36 |               {/* Success message */}
37 |               {/* <p className="text-center lg:text-left lg:absolute mt-2 opacity-75 text-sm">Thanks for subscribing!</p> */}
38 |             </form>
39 | 
40 |           </div>
41 | 
42 |         </div>
43 | 
44 |       </div>
45 |     </section>
46 |   )
47 | }
48 | 


--------------------------------------------------------------------------------
/components/page-illustration.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function PageIllustration() {
 4 |   return (
 5 |     <div className="relative max-w-6xl mx-auto h-0 pointer-events-none" aria-hidden="true">
 6 |       <svg className="absolute top-0 right-0 transform translate-x-1/2 -mr-16" width="722" height="320" fill="none" xmlns="http://www.w3.org/2000/svg">
 7 |         <defs>
 8 |           <linearGradient id="illustration-01" x1="-4.14" y1="43.12" x2="303.145" y2="391.913" gradientUnits="userSpaceOnUse">
 9 |             <stop stopColor="#5D5DFF" stopOpacity=".01" />
10 |             <stop offset=".538" stopColor="#5D5DFF" stopOpacity=".32" />
11 |             <stop offset="1" stopColor="#5D5DFF" stopOpacity=".01" />
12 |           </linearGradient>
13 |         </defs>
14 |         <path d="M292.512 0h-2.485c4.1 5.637 8.143 10.76 12.185 15.446 9.096 10.552 19.043 19.174 29.583 25.644l1.077.653c10.95 6.545 23.653 11.451 37.755 14.581 10.83 2.404 22.918 4.156 36.801 5.33 1.983.167 4.003.323 6.061.467l8.683.586 13.802.908c7.255.481 14.609.992 21.813 1.59 15.862 1.32 29.664 3.387 42.19 6.323 12.94 3.037 25.656 7.543 37.793 13.392 10.864 5.262 21.212 11.088 33.257 18.156l4.89 2.881 8.261 4.882 8.936 5.294c4.433 2.63 8.802 5.225 13.05 7.75l111.75 66.854-.302 17.311-119.133-71.27-8.026-4.755c-5.739-3.402-11.479-6.804-17.226-10.201l-8.627-5.093-2.22-1.304c-9.734-5.702-20.902-12.052-32.624-17.476-12.24-5.606-25.329-9.783-38.902-12.416-12.707-2.466-26.845-4.136-43.222-5.103-5.134-.304-10.349-.577-15.499-.837l-12.699-.634c-5.501-.278-11.071-.572-16.549-.903-16.278-.983-30.242-2.79-42.691-5.52-13.922-3.054-26.434-7.865-37.189-14.297l-.216-.13c-10.674-6.415-20.743-15.096-29.926-25.804-7.789-9.08-15.45-19.67-23.372-32.305h-2.375c8.231 13.22 16.162 24.228 24.215 33.613 9.087 10.589 19.033 19.232 29.585 25.71l1.05.638c10.95 6.546 23.663 11.436 37.786 14.533 12.543 2.753 26.61 4.574 43 5.565 6.569.396 13.266.739 19.819 1.066l9.412.47c5.157.26 10.38.533 15.519.837 16.294.964 30.346 2.622 42.959 5.07 13.438 2.609 26.375 6.737 38.446 12.27 11.344 5.25 22.063 11.267 34.668 18.686 11.234 6.623 22.437 13.273 33.62 19.911l.134.079L717.605 210.4l-.118 6.611-9.378 5.2-118.373-70.814-5.613-3.333c-6.164-3.66-12.333-7.322-18.511-10.98l-9.728-5.749c-10.269-6.053-22.289-12.98-34.985-18.587-12.052-5.285-25.318-9.17-39.43-11.549-12.67-2.137-26.94-3.58-43.621-4.412a2849 2849 0 00-9.384-.446l-12.33-.569c-7.68-.36-15.464-.752-23.091-1.24-16.073-1.029-29.986-2.919-42.533-5.775-13.463-3.07-25.643-7.76-36.221-13.946l-1.1-.652c-10.681-6.42-20.782-15.045-30.025-25.638-8.423-9.651-16.628-20.952-25.086-34.547-2.86-4.598-5.712-9.285-8.535-13.974h-2.353c3.03 5.04 6.097 10.089 9.174 15.034 8.522 13.69 16.789 25.075 25.276 34.805 9.117 10.456 19.078 19.029 29.623 25.503l1.107.67c10.957 6.551 23.633 11.496 37.678 14.698 12.632 2.88 26.648 4.784 42.85 5.822 7.628.488 15.41.88 23.084 1.24l8.893.411c4.29.197 8.577.395 12.857.607l2.743.143c15.419.84 28.74 2.232 40.645 4.241 13.952 2.352 27.06 6.192 38.957 11.41 11.732 5.179 22.905 11.511 32.637 17.221l2.138 1.258a8484.147 8484.147 0 0118.821 11.139l15.013 8.911 117.373 70.217-15.197 8.425-109.893-65.739a12699.359 12699.359 0 00-33.842-20.079l-2.513-1.48c-10.108-5.938-20.911-12.023-32.56-16.979-11.955-5.048-25.326-8.759-39.741-11.026-12.693-1.997-26.58-3.346-43.705-4.248l-14.663-.763c-9.945-.525-20.054-1.099-29.906-1.866-15.822-1.231-29.613-3.321-42.162-6.387-13.681-3.341-26.103-8.316-36.925-14.783l-.238-.142c-10.726-6.447-20.889-14.965-30.212-25.321-8.603-9.56-16.927-20.658-25.447-33.931-6.08-9.475-12.083-19.349-17.921-29.011h-2.336c1.509 2.496 3.032 5.009 4.56 7.525 2.933 4.83 5.897 9.678 8.894 14.474.465.745.933 1.48 1.401 2.217.278.438.556.875.833 1.315l1.922 3.046.968 1.52c8.573 13.361 16.963 24.544 25.646 34.19 9.188 10.206 19.186 18.655 29.736 25.131l1.174.712c10.991 6.569 23.6 11.619 37.474 15.009 12.661 3.092 26.556 5.198 42.483 6.437 9.865.768 19.977 1.343 29.925 1.868l14.695.766c17.014.891 30.836 2.234 43.498 4.225 14.254 2.242 27.468 5.907 39.272 10.892 12.491 5.314 24.059 11.973 34.838 18.339 11.306 6.68 22.581 13.381 33.836 20.076l108.895 65.144-15.191 8.432-135.199-80.881-3.428-1.983c-9.651-5.569-20.371-11.579-31.743-16.306-11.852-4.927-25.245-8.594-39.809-10.901l-1.755-.272c-11.757-1.794-24.735-3.133-40.57-4.187l-9.563-.627c-11.892-.788-24.004-1.646-35.753-2.81-15.522-1.538-29.148-3.901-41.66-7.223-13.481-3.58-25.829-8.692-36.702-15.191l-.258-.155c-10.768-6.471-21.01-14.855-30.446-24.92-8.819-9.41-17.308-20.236-25.953-33.101-6.81-10.136-13.402-20.596-19.809-30.87l-3.821-6.139A784.13 784.13 0 00213.574 0h-2.377a797.304 797.304 0 014.292 6.818l3.839 6.166c6.435 10.32 13.049 20.813 19.831 30.9 8.707 12.96 17.262 23.87 26.152 33.353 9.273 9.894 19.32 18.185 29.882 24.665l1.256.761c11.03 6.594 23.55 11.777 37.214 15.406 12.614 3.351 26.344 5.732 41.976 7.281 12.999 1.288 26.422 2.201 39.508 3.059l4.682.305 3.533.238c15.49 1.079 28.215 2.449 39.802 4.28 14.392 2.276 27.633 5.899 39.354 10.771 12.615 5.243 24.474 12.113 34.925 18.167l.004.002 134.169 80.265-15.194 8.418-126.705-75.799-3.424-1.993c-9.642-5.598-20.351-11.637-31.706-16.377-11.784-4.92-25.128-8.664-39.66-11.129l-1.632-.273c-11.217-1.848-23.778-3.36-39.208-4.72l-2.278-.198c-5.128-.438-10.212-.88-15.25-1.341l-2.682-.248c-2.236-.209-4.461-.424-6.679-.644a922.679 922.679 0 01-9.956-1.044 621.162 621.162 0 01-4.88-.56l-4.086-.492c-15.234-1.908-28.673-4.582-41.088-8.177-13.282-3.846-25.55-9.105-36.465-15.627-10.916-6.535-21.343-14.825-30.979-24.662-9.015-9.203-17.69-19.72-26.52-32.151a645.536 645.536 0 01-3.61-5.142c-5.904-8.495-11.711-17.27-17.283-25.798l-4.663-7.147c-4.16-6.357-8.022-12.084-11.691-17.333h-2.443c4.089 5.816 8.415 12.229 13.13 19.453l3.563 5.466c5.831 8.932 11.941 18.178 18.228 27.198 1.046 1.5 2.093 2.99 3.144 4.468 8.888 12.517 17.629 23.112 26.722 32.393 9.373 9.567 19.481 17.695 30.065 24.181l1.317.797c11.061 6.612 23.487 11.938 36.933 15.832 12.515 3.624 26.057 6.32 41.397 8.24l1.647.192a658.952 658.952 0 0011.469 1.303c1.956.208 3.919.409 5.89.604l3.27.32 4.723.446 1.443.133c3.766.343 7.545.681 11.352 1.012l6.086.526c16.116 1.42 29.094 3.007 40.683 4.973 14.384 2.439 27.58 6.14 39.227 11.002 12.623 5.268 24.453 12.169 34.883 18.253l.003.002 125.701 75.197-15.191 8.422-118.241-70.735-4.584-2.679c-9.331-5.431-19.619-11.216-30.431-15.858-11.836-5.081-24.695-8.904-39.315-11.688l-1.55-.292c-11.408-2.121-23.837-3.9-39.899-5.712l-5.712-.642c-11.977-1.355-25.348-2.954-38.236-4.945-14.942-2.308-28.187-5.309-40.496-9.175-13.07-4.103-25.259-9.506-36.226-16.063l-.274-.164-1.352-.84-.226-.139c-.759-.466-1.517-.932-2.272-1.416-7.736-4.973-15.239-10.75-22.381-17.235a45.03 45.03 0 00-.466-.418 45.818 45.818 0 01-.619-.558l-.245-.232a184.96 184.96 0 01-3.418-3.247c-9.21-8.984-18.082-19.176-27.125-31.162l-1.507-2.007c-7.269-9.72-14.35-19.8-22.529-31.663l-2.095-3.036C191.451 18.119 184.439 8.547 177.667 0h-2.657l.351.44c6.939 8.712 14.099 18.463 22.92 31.212l4.604 6.67c7.71 11.14 14.515 20.748 21.574 30.104 9.105 12.066 18.043 22.332 27.324 31.388a182.785 182.785 0 006.033 5.607c.197.175.393.352.589.53.294.266.588.532.886.791l.924.784c6.103 5.256 12.444 10.01 18.967 14.195a154.57 154.57 0 002.946 1.835l.107.065 1.171.728c11.104 6.637 23.436 12.104 36.656 16.252 12.403 3.897 25.745 6.921 40.788 9.244 11.799 1.824 23.991 3.318 35.153 4.597l9.965 1.126c16.237 1.849 28.714 3.668 40.21 5.857 14.466 2.752 27.19 6.533 38.9 11.561 12.537 5.383 24.361 12.314 34.787 18.427l117.21 70.118-15.191 8.421L512.24 204.3l-3.584-2.109c-10.661-6.26-20.553-11.929-31.029-17.158a246.546 246.546 0 00-39.045-12.038l-1.519-.33c-10.674-2.296-22.3-4.33-37.111-6.49l-8.817-1.268c-11.414-1.652-24.095-3.579-36.516-5.887-14.656-2.725-27.709-6.054-39.904-10.176-12.886-4.357-24.999-9.899-36.003-16.476l-.252-.152c-.387-.233-.773-.475-1.159-.716l-.612-.381-1.432-.881a77.05 77.05 0 01-.713-.449 185.943 185.943 0 01-17.595-12.766l-2.244-1.846a43.697 43.697 0 01-.657-.567c-.152-.133-.304-.266-.458-.398a196.7 196.7 0 01-6.393-5.701c-9.373-8.753-18.441-18.622-27.72-30.171-8.247-10.263-16.376-21.13-23.997-31.474l-1.625-2.207c-10.181-13.846-18.17-24.081-25.906-33.187A247.583 247.583 0 00157.567 0h-2.792c4.039 4.13 7.93 8.395 11.652 12.773l1.479 1.75c6.919 8.238 14.145 17.51 23.055 29.582l1.284 1.744c8.079 10.986 16.779 22.68 25.673 33.749 9.322 11.602 18.452 21.539 27.917 30.379 9.896 9.246 20.49 17.285 31.493 23.898l.36.215c11.126 6.65 23.368 12.253 36.39 16.654 12.285 4.153 25.427 7.505 40.177 10.246 12.72 2.362 25.519 4.317 40.669 6.488l1.523.217c17.103 2.446 29.966 4.684 41.708 7.257a244.644 244.644 0 0138.692 11.929c11.568 5.779 22.862 12.355 34.371 19.142l108.742 65.054-15.19 8.421-101.26-60.575-3.468-2.05a1552.578 1552.578 0 00-6.779-3.978l-2.69-1.566-1.575-.908-2.67-1.532c-5.735-3.273-11.4-6.398-17.219-9.413l-.066-.032c-12.547-5.416-25.459-9.837-38.379-13.139l-2.233-.563c-10.238-2.551-21.443-4.901-35.655-7.477l-9.452-1.694c-1.537-.277-3.051-.552-4.545-.825l-3.732-.687-2.514-.469-3.59-.676-1.796-.344-3.274-.636-1.95-.384-3.295-.658-1.788-.366-3.524-.728c-.949-.199-1.894-.405-2.84-.608l-.591-.126c-.539-.115-1.078-.229-1.615-.347-14.382-3.144-27.244-6.797-39.322-11.163a218.82 218.82 0 01-9.406-3.645c-9.169-3.803-17.92-8.182-26.125-13.066l-.279-.162c-9.917-5.981-19.604-12.98-28.777-20.894l-1.144-.994-.654-.57c-.389-.338-.778-.676-1.163-1.02-9.55-8.551-18.812-18.102-28.316-29.201-8.47-9.886-16.85-20.337-24.714-30.283l-3.029-3.833c-9.828-12.4-17.695-21.758-25.346-30.158-7.939-8.71-16.62-17.003-25.89-24.728h-3.138c9.865 8.07 19.126 16.835 27.547 26.073l1.013 1.116c7.109 7.86 14.507 16.678 23.615 28.146l5.354 6.767c7.38 9.31 15.181 18.996 23.065 28.2 9.568 11.168 18.891 20.782 28.501 29.389.324.29.652.575.98.86l.6.522.579.51c.552.486 1.104.973 1.662 1.45l.286.24c8.422 7.173 17.248 13.598 26.321 19.144l1.441.872.463.272c8.276 4.93 17.114 9.352 26.381 13.194a220.411 220.411 0 009.496 3.683c12.134 4.391 25.079 8.065 39.575 11.235l1.099.236 3.958.844 1.705.353c1.208.251 2.418.502 3.637.749l3.247.648 2.677.527 3.178.614 3.25.617 2.998.563 4.977.917 5.067.919 8.782 1.575c15.209 2.756 26.956 5.251 37.752 8.01 12.776 3.264 25.577 7.645 38.047 13.024l1.904 1 .789.414c.531.278 1.063.557 1.591.839l1.105.598c1.069.574 2.137 1.148 3.2 1.73l1.089.604.006.003c1.053.581 2.107 1.162 3.159 1.751l1.608.91c.877.493 1.753.986 2.628 1.485l3.042 1.748 2.079 1.202c4.012 2.329 8.022 4.698 12.057 7.091l100.266 59.981-15.19 8.422-92.779-55.501c-10.863-6.503-22.453-13.383-34.263-19.76-11.843-5.511-24.426-10.458-37.446-14.719-12.293-3.312-25.504-6.48-40.387-9.682l-4.924-1.062c-11.569-2.504-23.679-5.197-35.642-8.211-14.103-3.551-26.783-7.514-38.762-12.117-12.569-4.829-24.546-10.625-35.596-17.23-11.007-6.555-21.797-14.378-31.99-23.144-9.691-8.335-19.142-17.58-28.897-28.263-8.313-9.103-16.341-18.416-23.934-27.33l-5.251-6.169c-9.047-10.589-17.348-19.903-25.346-28.435-9.762-9.395-19.915-18.108-30.223-25.931-5.842-3.907-11.708-7.64-17.952-11.493h-3.842c7.293 4.462 13.996 8.696 20.624 13.13 10.231 7.766 20.324 16.427 29.962 25.706l1.775 1.9c7.715 8.294 15.754 17.361 24.482 27.613l5.88 6.91c7.932 9.29 15.017 17.432 22.341 25.455 9.833 10.764 19.341 20.065 29.07 28.432a240.266 240.266 0 0015.696 12.406c.753.545 1.51 1.077 2.268 1.61l.378.266 1.303.923c.887.614 1.779 1.213 2.671 1.811l.142.095 1.279.865.93.603.931.6.407.263c.673.437 1.347.873 2.024 1.299l.436.268c1.113.698 2.228 1.391 3.349 2.065l.453.271c11.169 6.669 23.249 12.517 35.904 17.38 12.032 4.626 24.787 8.613 38.991 12.187 12.789 3.22 26.028 6.14 37.738 8.667l2.894.624c14.849 3.194 28.027 6.353 40.236 9.643 12.907 4.223 25.405 9.136 37.149 14.602 11.083 5.989 21.888 12.372 32.07 18.466l93.812 56.122-15.191 8.421-84.3-50.429c-10.283-6.155-20.389-12.172-30.664-17.976l-3.474-1.95c-11.758-5.82-24.11-11.14-36.755-15.829-11.699-3.754-24.048-7.317-37.696-10.878l-8.257-2.141c-10.959-2.847-22.15-5.798-33.191-8.973-13.907-3.999-26.402-8.276-38.201-13.075-11.934-4.857-23.372-10.492-34.022-16.762l-1.878-1.116c-10.885-6.542-21.554-14.117-31.716-22.519-9.807-8.105-19.447-17.042-29.472-27.323l-1.878-1.931c-7.8-8.046-15.334-16.143-24.014-25.537l-2.106-2.28c-9.989-10.819-19.25-20.356-28.345-29.185-9.967-8.87-20.342-17.2-30.88-24.79-10.291-6.67-20.91-13.102-31.01-19.154L71.17 0h-3.91l12.012 7.186c10.623 6.356 21.932 13.164 33.066 20.378 10.437 7.52 20.76 15.807 30.647 24.604 9.031 8.771 18.267 18.282 28.237 29.077l4.565 4.94c7.373 7.969 15.399 16.577 23.471 24.848 10.079 10.334 19.771 19.32 29.627 27.469 10.238 8.463 20.983 16.092 31.947 22.682l.512.307c11.127 6.651 23.132 12.612 35.68 17.72 11.863 4.828 24.424 9.129 38.401 13.143 13.393 3.846 27.415 7.479 39.784 10.683l3.168.827c13.095 3.443 24.943 6.873 36.091 10.45 12.542 4.652 24.829 9.943 36.478 15.707 11.436 6.383 22.627 13.042 34.038 19.872l83.312 49.837-15.188 8.419-83.375-49.87c-8.949-5.339-17.01-10.109-25.31-14.885l-1.167-.669a445.552 445.552 0 00-36.095-16.888c-12.157-4.498-25.091-8.851-38.44-12.94l-12.683-3.877c-3.222-.987-6.465-1.985-9.711-2.992a1326.146 1326.146 0 01-16.497-5.223c-13.752-4.464-26.065-9.053-37.641-14.029-12.329-5.297-24.177-11.33-35.222-17.93-11.016-6.575-21.952-14.167-32.423-22.488l-.885-.709-.885-.715c-8.445-6.798-16.887-14.192-25.668-22.487l-1.74-1.647-.875-.833c-6.61-6.333-13.23-12.856-19.721-19.291l-9.127-9.06c-9.831-9.756-19.681-19.025-29.305-27.578a450.321 450.321 0 00-31.508-23.698l-1.346-.838c-9.307-5.829-18.72-11.514-28.315-17.26L37.99 0h-3.896l36.507 21.838c7.908 4.73 15.682 9.398 23.36 14.11l2.923 1.805 2.914 1.81c.417.26.836.52 1.254.778.894.554 1.789 1.109 2.679 1.668a448.243 448.243 0 0131.305 23.547c9.573 8.506 19.396 17.751 29.196 27.478l9.203 9.136c6.472 6.417 13.074 12.923 19.671 19.24l1.028.976 1.024.969c8.639 8.189 16.952 15.511 25.26 22.246l1.247 1.006.674.544c.32.258.639.517.959.771 10.037 7.981 20.471 15.299 31.122 21.728l1.526.914c11.118 6.645 23.049 12.719 35.457 18.052 11.634 5 24.004 9.611 37.814 14.094 2.744.89 5.505 1.773 8.274 2.649 1.479.467 2.962.927 4.443 1.389l1.234.387c.824.259 1.649.518 2.474.774 3.406 1.057 6.809 2.104 10.189 3.139l12.309 3.763c13.313 4.078 26.21 8.418 38.296 12.889a446.07 446.07 0 0135.864 16.78c9.992 5.735 19.775 11.549 30.386 17.895l78.389 46.892-15.194 8.425-77.43-46.317a3615.384 3615.384 0 00-23.849-14.143 535.697 535.697 0 00-35.491-17.853c-11.788-4.911-24.05-9.655-37.499-14.509l-13.016-4.542c-8.326-2.912-16.772-5.887-25.069-8.901-13.567-4.932-25.698-9.833-37.086-14.982-12.204-5.519-23.993-11.665-35.041-18.267a351.216 351.216 0 01-32.639-22.173c-9.931-7.588-19.948-15.916-30.627-25.458-8.047-7.191-16.135-14.595-24.017-21.83l-5.649-5.187c-10.488-9.436-20.367-17.939-30.228-26.016a533.817 533.817 0 00-32.08-22.7l-2.994-1.831C82.682 46.58 72.182 40.299 62.823 34.704L4.807 0H.912L72.92 43.08A2667.18 2667.18 0 0195.09 56.503a531.987 531.987 0 0131.911 22.578c9.808 8.036 19.665 16.519 30.123 25.928l2.765 2.54c8.788 8.069 17.874 16.411 26.914 24.489 10.716 9.576 20.773 17.935 30.744 25.556 9.896 7.563 20.119 14.569 30.425 20.849l2.402 1.451c11.113 6.641 22.97 12.822 35.243 18.372 11.435 5.17 23.613 10.091 37.228 15.04 8.306 3.017 16.758 5.995 25.089 8.908l13.009 4.54c13.408 4.839 25.642 9.572 37.368 14.457a533.965 533.965 0 0135.304 17.759l2.985 1.755a4160.789 4160.789 0 0122.852 13.576L535.843 320l17.217-9.546.008.005 19.242-10.667-.003-.002 17.213-9.543-.004-.002 17.241-9.558-.003-.002 17.212-9.543-.001-.001 15.193-8.424.015.009 19.243-10.669-.017-.011 15.2-8.423.012.007 19.242-10.679-.011-.007 15.214-8.434.015.009 11.395-6.319.158-8.949-.032-.019.302-17.325.02.012.384-21.951-.018-.01.304-17.347.017.011.383-21.951-.005-.003.302-17.333.004.002.382-21.95-.011-.007.344-19.635L602.072 0h-3.894L719.98 72.867l-.303 17.33-102.535-61.341-7.049-4.107-7.64-4.461c-4.239-2.476-8.479-4.953-12.725-7.424l-6.674-3.872-2.309-1.327A778.468 778.468 0 00567.066 0h-4.202c5.968 3.215 12.285 6.749 19.184 10.726a4181.24 4181.24 0 0113.15 7.649l7.533 4.4c4.465 2.608 8.928 5.216 13.385 7.806l103.532 61.937-.302 17.328-110.945-66.372-19.166-11.105a2476.893 2476.893 0 00-15.007-8.622c-12.604-7.122-24.165-13.031-35.347-18.067A373.292 373.292 0 00525.486 0h-5.465a376.339 376.339 0 0118.035 7.506c11.125 5.01 22.633 10.892 35.182 17.984A2660.44 2660.44 0 01590.989 35.7l12.877 7.464 3.517 2.034 111.918 66.953-.302 17.334-119.342-71.396-12.521-7.206c-7.176-4.127-14.49-8.302-21.782-12.332-12.421-6.827-24.185-12.421-35.962-17.105-1.516-.6-3.046-1.19-4.589-1.77-10.806-4.067-22.282-7.67-34.189-10.734-9.091-2.324-18.353-4.392-27.412-6.295-3.021-.635-6.02-1.253-8.982-1.854L450.3 0h-9.853c2.507.54 5.097 1.08 7.781 1.623l1.19.24c13.106 2.628 27.11 5.54 40.699 9.015a370.4 370.4 0 015.046 1.338c11.707 3.197 22.952 6.92 33.492 11.09 11.72 4.662 23.408 10.222 35.735 16.996 6.44 3.562 12.9 7.237 19.266 10.89l14.983 8.622 120.325 71.983-.302 17.335-93.969-56.217-10.422-6.176c-4.801-2.849-9.609-5.696-14.422-8.543-1.202-.711-2.402-1.423-3.602-2.135a2375.985 2375.985 0 00-5.41-3.203l-3.604-2.12c-9.694-5.69-20.038-11.642-30.765-17.346-12.322-6.525-24.316-11.757-36.67-15.989-12.4-4.23-25.9-7.693-40.126-10.298-13.015-2.383-26.346-4.282-39.321-6.094l-2.987-.417c-16.378-2.284-29.489-4.811-41.267-7.95C384.335 9.511 373.496 5.264 363.804 0h-4.102c10.613 6.161 22.673 11.065 35.873 14.583 11.859 3.16 25.047 5.7 41.505 7.996l5.978.835c12.006 1.685 24.268 3.47 36.248 5.662 14.127 2.587 27.533 6.027 39.839 10.223 12.25 4.2 24.15 9.388 36.378 15.866 12.032 6.395 23.592 13.114 34.293 19.42l9.022 5.336c4.807 2.844 9.613 5.69 14.41 8.537l9.203 5.462 96.153 57.517-.304 17.337-91.088-54.493-1.005-.6-10.289-6.156-.864-.513c-7.208-4.278-14.418-8.556-21.639-12.828l-11.341-6.697-3.644-2.139c-9.796-5.733-20.213-11.667-30.881-17.1-12.225-6.18-24.819-11.15-37.435-14.772-12.55-3.585-26.099-6.252-41.42-8.152-10.731-1.331-21.784-2.408-32.573-3.433l-10.945-1.038c-16.544-1.586-29.916-3.67-42.083-6.562-13.402-3.188-25.541-7.93-36.101-14.107l-1.089-.646C337.306 14.371 329.064 7.818 321.325 0h-2.798c7.986 8.28 16.517 15.224 25.435 20.699l1.109.672c10.943 6.546 23.582 11.549 37.567 14.87 12.256 2.912 25.714 5.011 42.354 6.606l14.532 1.381c9.629.922 19.412 1.904 28.931 3.085 15.215 1.886 28.665 4.534 41.116 8.09 12.489 3.584 24.966 8.509 37.081 14.633 10.619 5.409 21.008 11.325 30.779 17.044l3.696 2.17c10.23 6.033 20.434 12.084 30.622 18.128l106.529 63.712-.304 17.339-110.852-66.315c-4.859-2.885-9.723-5.77-14.591-8.654l-19.185-11.345-2.584-1.516c-11.514-6.739-21.542-12.354-32.112-17.48-12.288-5.92-25.144-10.475-38.208-13.537-12.624-2.959-26.519-5.042-42.481-6.368-7.233-.602-14.611-1.115-21.889-1.597l-13.793-.907-8.66-.584a425.314 425.314 0 01-6.015-.464c-13.793-1.166-25.794-2.905-36.536-5.29-13.526-3.002-25.737-7.657-36.307-13.84l-1.039-.616c-10.685-6.422-20.774-15.094-29.988-25.776-3.723-4.317-7.449-9.01-11.222-14.14z" fill="url(#illustration-01)" />
15 |       </svg>
16 |     </div>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------