├── .gitignore
├── README.md
├── app
├── about
│ └── page.tsx
├── blog-details
│ └── page.tsx
├── blog
│ └── page.tsx
├── contact
│ └── page.tsx
├── error
│ └── page.tsx
├── layout.tsx
├── page.tsx
├── pricing
│ └── page.tsx
├── providers.tsx
├── signin
│ └── page.tsx
└── signup
│ └── page.tsx
├── components
├── Breadcrumb.tsx
├── ScrollToTop
│ ├── ScrollUp.tsx
│ └── index.tsx
└── SectionTitle.tsx
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── favicon.ico
└── images
│ ├── 404.svg
│ ├── about
│ ├── about-image-2-dark.svg
│ ├── about-image-2.svg
│ ├── about-image-dark.svg
│ └── about-image.svg
│ ├── blog
│ ├── author-01.png
│ ├── blog-01.jpg
│ ├── blog-02.jpg
│ ├── blog-03.jpg
│ ├── blog-details-01.jpg
│ ├── blog-details-02.jpg
│ ├── post-01.jpg
│ ├── post-02.jpg
│ └── post-03.jpg
│ ├── brands
│ ├── ayroui.svg
│ ├── ecommerce-html.svg
│ ├── gumroad.svg
│ ├── hbomax.svg
│ ├── loom.svg
│ └── webflow.svg
│ ├── favicon.png
│ ├── logo
│ ├── logo-2.svg
│ └── logo.svg
│ ├── testimonials
│ ├── author-1.png
│ ├── author-2.png
│ ├── author-3.png
│ ├── team-1.png
│ ├── team-2.png
│ └── team-3.png
│ └── video
│ ├── shape.svg
│ └── video.jpg
├── sections
├── About
│ ├── AboutSection.tsx
│ └── Solutions.tsx
├── Blog
│ ├── RelatedPost.tsx
│ ├── SharePost.tsx
│ ├── SingleBlog.tsx
│ ├── TagButton.tsx
│ ├── blogData.tsx
│ └── index.tsx
├── Brands
│ ├── brandsData.tsx
│ └── index.tsx
├── Contact
│ ├── NewsLatterBox.tsx
│ └── index.tsx
├── Features
│ ├── SingleFeature.tsx
│ ├── featuresData.tsx
│ └── index.tsx
├── Footer
│ └── index.tsx
├── Header
│ ├── ThemeToggler.tsx
│ ├── index.tsx
│ └── menuData.tsx
├── Hero
│ └── index.tsx
├── Pricing
│ ├── OfferList.tsx
│ ├── PricingBox.tsx
│ └── index.tsx
├── Testimonials
│ ├── SingleTestimonial.tsx
│ └── index.tsx
└── Video
│ └── index.tsx
├── styles
└── index.css
├── tailwind.config.js
├── tsconfig.json
├── types
├── blog.ts
├── brand.ts
├── feature.ts
├── menu.ts
└── testimonial.ts
└── yarn.lock
/.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 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Flystar Saas
2 |
3 | This is a private repository for the Flystar SaaS Website, version 0.1.0. It comprises the frontend codebase for Flystar's Software as a Service (SaaS) platform, which includes a fully integrated blog section.
4 |
5 | ### Overview
6 | Flystar SaaS Website is a comprehensive solution designed to deliver a seamless experience for users interacting with Flystar's suite of services. In addition to its core SaaS functionalities, the website incorporates a dynamic blog section to keep users informed and engaged with the latest industry trends and company updates.
7 |
8 |
11 |
12 |
13 |
14 | https://github.com/Seyma44/flystar-saas-website/assets/3766249/cba5ff51-056b-4c24-acc1-b7bf387388b2
15 |
16 |
17 | Support Me
18 |
19 |
20 |
21 | ## Getting Started
22 |
23 | First, run the development server:
24 |
25 | ```bash
26 | npm run dev
27 | # or
28 | yarn dev
29 | # or
30 | pnpm dev
31 | ```
32 |
33 | ### Features
34 | - **SaaS Functionality**: Experience the full capabilities of Flystar's SaaS platform, offering intuitive tools and features to streamline workflows and enhance productivity.
35 | - **Interactive Blog**: Stay up-to-date with insightful articles and company news through the integrated blog section, providing valuable insights and resources for users.
36 | - **Next.js Framework**: Leveraging the power of Next.js, the website ensures efficient rendering, enhanced performance, and seamless navigation across various pages and components.
37 | - **Tailwind CSS Integration**: Utilizing Tailwind CSS, the website boasts a sleek and responsive design, delivering a visually appealing and user-friendly interface.
38 | - **TypeScript Support**: Benefit from enhanced code readability and maintainability with TypeScript, enabling robust type-checking and improved development workflows.
39 |
40 | ### Scripts
41 | - `dev`: Start the development server using Next.js.
42 | - `build`: Build the production-ready application.
43 | - `start`: Start the Next.js production server.
44 | - `lint`: Lint the codebase using ESLint.
45 |
46 | ### Dependencies
47 |
48 | Explore the Flystar SaaS Website repository to discover the innovative features and functionalities driving Flystar's online presence and SaaS offerings.
49 |
50 |
--------------------------------------------------------------------------------
/app/about/page.tsx:
--------------------------------------------------------------------------------
1 | import AboutSection from "@/sections/About/AboutSection";
2 | import Solutions from "@/sections/About/Solutions";
3 | import Breadcrumb from "@/components/Breadcrumb";
4 |
5 | import { Metadata } from "next";
6 |
7 | export const metadata: Metadata = {
8 | title: "About Us | Web Design and Seo SaaS",
9 | description: "This is About Page for website",
10 | };
11 |
12 | const AboutPage = () => {
13 | return (
14 | <>
15 |
18 |
19 |
20 | >
21 | );
22 | };
23 |
24 | export default AboutPage;
25 |
--------------------------------------------------------------------------------
/app/blog/page.tsx:
--------------------------------------------------------------------------------
1 | import SingleBlog from "@/sections/Blog/SingleBlog";
2 | import blogData from "@/sections/Blog/blogData";
3 | import Breadcrumb from "@/components/Breadcrumb";
4 | import { Metadata } from "next";
5 |
6 | export const metadata: Metadata = {
7 | title: "Blog Page | Web Design and Seo SaaS",
8 | description: "This is Blog Page for website",
9 | };
10 |
11 | const Blog = () => {
12 | return (
13 | <>
14 |
17 |
18 |
19 |
20 | {blogData.map((blog) => (
21 |
25 |
26 |
27 | ))}
28 |
29 |
30 |
92 |
93 |
94 | >
95 | );
96 | };
97 |
98 | export default Blog;
99 |
--------------------------------------------------------------------------------
/app/contact/page.tsx:
--------------------------------------------------------------------------------
1 | import Breadcrumb from "@/components/Breadcrumb";
2 | import Contact from "@/sections/Contact";
3 |
4 | import { Metadata } from "next";
5 |
6 | export const metadata: Metadata = {
7 | title: "Contact | Web Design and Seo SaaS",
8 | description: "This is Contact Page for website",
9 | };
10 |
11 | const ContactPage = () => {
12 | return (
13 | <>
14 |
17 |
18 | >
19 | );
20 | };
21 |
22 | export default ContactPage;
23 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Footer from "@/sections/Footer";
4 | import Header from "@/sections/Header";
5 | import ScrollToTop from "@/components/ScrollToTop";
6 | import { Inter } from "next/font/google";
7 | import "/node_modules/react-modal-video/css/modal-video.css";
8 | import "../styles/index.css";
9 |
10 | const inter = Inter({ subsets: ["latin"] });
11 |
12 | export default function RootLayout({
13 | children,
14 | }: {
15 | children: React.ReactNode;
16 | }) {
17 | return (
18 |
19 |
20 |
21 |
22 | {children}
23 |
24 |
25 |
26 |
27 |
28 | );
29 | }
30 |
31 | import { Providers } from "./providers";
32 |
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | import AboutSection from "@/sections/About/AboutSection";
2 | import Solutions from "@/sections/About/Solutions";
3 | import Blog from "@/sections/Blog";
4 | import Brands from "@/sections/Brands";
5 | import ScrollUp from "@/components/ScrollToTop/ScrollUp";
6 | import Contact from "@/sections/Contact";
7 | import Features from "@/sections/Features";
8 | import Hero from "@/sections/Hero";
9 | import Pricing from "@/sections/Pricing";
10 | import Testimonials from "@/sections/Testimonials";
11 | import Video from "@/sections/Video";
12 | import { Metadata } from "next";
13 |
14 | export const metadata: Metadata = {
15 | title: "Web Design and Seo SaaS",
16 | description: "This is Home for website",
17 | };
18 |
19 | export default function Home() {
20 | return (
21 | <>
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | >
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/app/pricing/page.tsx:
--------------------------------------------------------------------------------
1 |
2 | import Breadcrumb from "@/components/Breadcrumb";
3 | import Pricing from "@/sections/Pricing";
4 | import { Metadata } from "next";
5 |
6 | export const metadata: Metadata = {
7 | title: "Pricing | Web Design and Seo SaaS",
8 | description: "This is About Page for website",
9 | };
10 |
11 | const PricePage = () => {
12 | return (
13 | <>
14 |
17 |
18 | >
19 | );
20 | };
21 |
22 | export default PricePage;
23 |
--------------------------------------------------------------------------------
/app/providers.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ThemeProvider } from "next-themes";
4 |
5 | export function Providers({ children }: { children: React.ReactNode }) {
6 | return (
7 |
8 | {children}
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/app/signin/page.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | import { Metadata } from "next";
4 |
5 | export const metadata: Metadata = {
6 | title: "Sign In Page | Web Design and Seo SaaS",
7 | description: "This is Sign In Page for website",
8 | };
9 |
10 | const SigninPage = () => {
11 | return (
12 | <>
13 |
14 |
15 |
16 |
17 |
18 |
19 | Sign in to your account
20 |
21 |
22 | Login to your account for a faster checkout.
23 |
24 |
25 |
26 |
33 |
34 |
38 |
42 |
46 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | Sign in with Google
59 |
60 |
61 |
62 |
63 |
70 |
71 |
72 |
73 | Sign in with Github
74 |
75 |
76 |
77 |
78 | Or, sign in with your email
79 |
80 |
81 |
82 |
160 |
161 | Don’t you have an account?{" "}
162 |
163 | Sign up
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
178 |
187 |
188 |
189 |
190 |
195 |
200 |
201 |
202 |
210 |
211 |
212 |
213 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 | >
229 | );
230 | };
231 |
232 | export default SigninPage;
233 |
--------------------------------------------------------------------------------
/app/signup/page.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | import { Metadata } from "next";
4 |
5 | export const metadata: Metadata = {
6 | title: "Sign Up Page | Web Design and Seo SaaS",
7 | description: "This is Sign Up Page for website",
8 | };
9 |
10 | const SignupPage = () => {
11 | return (
12 | <>
13 |
14 |
15 |
16 |
17 |
18 |
19 | Create your account
20 |
21 |
22 | It’s totally free and super easy
23 |
24 |
25 |
26 |
33 |
34 |
38 |
42 |
46 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | Sign in with Google
59 |
60 |
61 |
62 |
63 |
70 |
71 |
72 |
73 | Sign in with Github
74 |
75 |
76 |
77 |
78 | Or, register with your email
79 |
80 |
81 |
82 |
178 |
179 | Already using Startup?{" "}
180 |
181 | Sign in
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
196 |
205 |
206 |
207 |
208 |
213 |
218 |
219 |
220 |
228 |
229 |
230 |
231 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 | >
247 | );
248 | };
249 |
250 | export default SignupPage;
251 |
--------------------------------------------------------------------------------
/components/Breadcrumb.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | const Breadcrumb = ({
4 | pageName,
5 |
6 | }: {
7 | pageName: string;
8 |
9 | }) => {
10 | return (
11 | <>
12 |
13 |
14 |
15 |
19 |
20 |
21 |
22 |
23 |
27 | Home
28 |
29 |
30 |
31 |
32 | {pageName}
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
49 |
54 |
55 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
77 |
82 |
87 |
88 |
96 |
97 |
98 |
99 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 | >
116 | );
117 | };
118 |
119 | export default Breadcrumb;
120 |
--------------------------------------------------------------------------------
/components/ScrollToTop/ScrollUp.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect } from "react";
4 |
5 | export default function ScrollUp() {
6 | useEffect(() => window.document.scrollingElement?.scrollTo(0, 0), []);
7 |
8 | return null;
9 | }
10 |
--------------------------------------------------------------------------------
/components/ScrollToTop/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export default function ScrollToTop() {
4 | const [isVisible, setIsVisible] = useState(false);
5 | const scrollToTop = () => {
6 | window.scrollTo({
7 | top: 0,
8 | behavior: "smooth",
9 | });
10 | };
11 |
12 | useEffect(() => {
13 | // Button is displayed after scrolling for 500 pixels
14 | const toggleVisibility = () => {
15 | if (window.pageYOffset > 300) {
16 | setIsVisible(true);
17 | } else {
18 | setIsVisible(false);
19 | }
20 | };
21 |
22 | window.addEventListener("scroll", toggleVisibility);
23 |
24 | return () => window.removeEventListener("scroll", toggleVisibility);
25 | }, []);
26 |
27 | return (
28 |
29 | {isVisible && (
30 |
35 |
36 |
37 | )}
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/components/SectionTitle.tsx:
--------------------------------------------------------------------------------
1 | const SectionTitle = ({
2 | title,
3 | paragraph,
4 | width = "570px",
5 | center,
6 | mb = "100px",
7 | }: {
8 | title: string;
9 | paragraph: string;
10 | width?: string;
11 | center?: boolean;
12 | mb?: string;
13 | }) => {
14 | return (
15 | <>
16 |
21 |
22 | {title}
23 |
24 |
25 | {paragraph}
26 |
27 |
28 | >
29 | );
30 | };
31 |
32 | export default SectionTitle;
33 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 |
4 | module.exports = nextConfig
5 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "flystar-saas-website",
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 | "@types/node": "20.11.19",
13 | "@types/react": "18.2.55",
14 | "@types/react-dom": "18.2.19",
15 | "autoprefixer": "10.4.17",
16 | "css-loader": "^6.10.0",
17 | "eslint": "8.33.0",
18 | "eslint-config-next": "13.1.6",
19 | "next": "14.1.0",
20 | "next-themes": "^0.2.1",
21 | "postcss": "8.4.35",
22 | "prettier": "^3.0.3",
23 | "prettier-plugin-tailwindcss": "^0.5.6",
24 | "react": "18.2.0",
25 | "react-dom": "18.2.0",
26 | "react-modal-video": "^2.0.1",
27 | "style-loader": "^3.3.4",
28 | "tailwindcss": "3.4.1",
29 | "typescript": "5.3.3"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/favicon.ico
--------------------------------------------------------------------------------
/public/images/404.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/about/about-image-2-dark.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/public/images/about/about-image-2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/public/images/blog/author-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/blog/author-01.png
--------------------------------------------------------------------------------
/public/images/blog/blog-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/blog/blog-01.jpg
--------------------------------------------------------------------------------
/public/images/blog/blog-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/blog/blog-02.jpg
--------------------------------------------------------------------------------
/public/images/blog/blog-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/blog/blog-03.jpg
--------------------------------------------------------------------------------
/public/images/blog/blog-details-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/blog/blog-details-01.jpg
--------------------------------------------------------------------------------
/public/images/blog/blog-details-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/blog/blog-details-02.jpg
--------------------------------------------------------------------------------
/public/images/blog/post-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/blog/post-01.jpg
--------------------------------------------------------------------------------
/public/images/blog/post-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/blog/post-02.jpg
--------------------------------------------------------------------------------
/public/images/blog/post-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/blog/post-03.jpg
--------------------------------------------------------------------------------
/public/images/brands/ayroui.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/public/images/brands/ecommerce-html.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/brands/gumroad.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/public/images/brands/hbomax.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/public/images/brands/loom.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/public/images/brands/webflow.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/public/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/favicon.png
--------------------------------------------------------------------------------
/public/images/logo/logo-2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
15 | Flystar
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/public/images/logo/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
15 | Flystar
16 |
17 |
18 |
--------------------------------------------------------------------------------
/public/images/testimonials/author-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/testimonials/author-1.png
--------------------------------------------------------------------------------
/public/images/testimonials/author-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/testimonials/author-2.png
--------------------------------------------------------------------------------
/public/images/testimonials/author-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/testimonials/author-3.png
--------------------------------------------------------------------------------
/public/images/testimonials/team-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/testimonials/team-1.png
--------------------------------------------------------------------------------
/public/images/testimonials/team-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/testimonials/team-2.png
--------------------------------------------------------------------------------
/public/images/testimonials/team-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/testimonials/team-3.png
--------------------------------------------------------------------------------
/public/images/video/shape.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/video/video.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Seyma44/flystar-saas-website/929ddbbe4247aa4bbf34f811281fbababb0c00da/public/images/video/video.jpg
--------------------------------------------------------------------------------
/sections/About/AboutSection.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import SectionTitle from "../../components/SectionTitle";
3 |
4 | const checkIcon = (
5 |
6 |
7 |
8 | );
9 |
10 | const AboutSection = () => {
11 | const List = ({ text }) => (
12 |
13 |
14 | {checkIcon}
15 |
16 | {text}
17 |
18 | );
19 |
20 | return (
21 |
22 |
23 |
24 |
25 |
26 |
31 |
32 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
71 |
72 |
73 |
74 |
75 | );
76 | };
77 |
78 | export default AboutSection;
79 |
--------------------------------------------------------------------------------
/sections/About/Solutions.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 |
3 | const Solutions = () => {
4 | return (
5 |
6 |
7 |
8 |
27 |
28 |
29 |
30 |
31 | Code smarter and rank higher
32 |
33 |
34 | Leverage SEO features in your SaaS development journey. Build your coding website with SEO-Optimized tools and frameworks.
35 |
36 |
37 |
38 |
39 | Streamline SEO implementation
40 |
41 |
42 | Elevate your coding website with our SaaS solution.Enhance your coding website with Built-in SEO functionality
43 |
44 |
45 |
46 |
47 | Empower your development process
48 |
49 |
50 | Integrate powerful SEO capabilities into your SaaS platform.Seamlessly integrate SEO into your SaaS website
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | );
59 | };
60 |
61 | export default Solutions;
62 |
--------------------------------------------------------------------------------
/sections/Blog/RelatedPost.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import Link from "next/link";
3 |
4 | const RelatedPost = ({
5 | image,
6 | slug,
7 | title,
8 | date,
9 | }: {
10 | image: string;
11 | slug: string;
12 | title: string;
13 | date: string;
14 | }) => {
15 | return (
16 |
17 |
22 |
23 |
24 |
28 | {title}
29 |
30 |
31 |
{date}
32 |
33 |
34 | );
35 | };
36 |
37 | export default RelatedPost;
38 |
--------------------------------------------------------------------------------
/sections/Blog/SharePost.tsx:
--------------------------------------------------------------------------------
1 | const SharePost = () => {
2 | return (
3 | <>
4 |
9 |
15 |
16 |
17 |
18 |
23 |
29 |
30 |
31 |
32 |
37 |
38 |
39 |
40 |
41 | >
42 | );
43 | };
44 |
45 | export default SharePost;
46 |
--------------------------------------------------------------------------------
/sections/Blog/SingleBlog.tsx:
--------------------------------------------------------------------------------
1 | import { Blog } from "@/types/blog";
2 | import Image from "next/image";
3 | import Link from "next/link";
4 |
5 | const SingleBlog = ({ blog }: { blog: Blog }) => {
6 | const { title, image, paragraph, author, tags, publishDate } = blog;
7 | return (
8 | <>
9 |
13 |
17 |
18 | {tags[0]}
19 |
20 |
21 |
22 |
23 |
24 |
28 | {title}
29 |
30 |
31 |
32 | {paragraph}
33 |
34 |
35 |
36 |
41 |
42 |
43 | By {author.name}
44 |
45 |
{author.designation}
46 |
47 |
48 |
49 |
50 | Date
51 |
52 |
{publishDate}
53 |
54 |
55 |
56 |
57 | >
58 | );
59 | };
60 |
61 | export default SingleBlog;
62 |
--------------------------------------------------------------------------------
/sections/Blog/TagButton.tsx:
--------------------------------------------------------------------------------
1 | const TagButton = ({ href = "#0", text }: { href?: string; text: string }) => {
2 | return (
3 |
7 | {text}
8 |
9 | );
10 | };
11 |
12 | export default TagButton;
13 |
--------------------------------------------------------------------------------
/sections/Blog/blogData.tsx:
--------------------------------------------------------------------------------
1 | import { Blog } from "@/types/blog";
2 |
3 | const blogData: Blog[] = [
4 | {
5 | id: 1,
6 | title: "The best UI components for modern websites",
7 | paragraph:
8 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dictum neque, laoreet dolor.",
9 | image: "/images/blog/blog-01.jpg",
10 | author: {
11 | name: "Suzi Jenk",
12 | image: "/images/blog/author-01.png",
13 | designation: "Content Writer",
14 | },
15 | tags: ["design"],
16 | publishDate: "19 Feb 2024",
17 | },
18 | {
19 | id: 2,
20 | title: "11 simple ways to enhance your web coding skills",
21 | paragraph:
22 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dictum neque, laoreet dolor.",
23 | image: "/images/blog/blog-02.jpg",
24 | author: {
25 | name: "Suzi Jenk",
26 | image: "/images/blog/author-01.png",
27 | designation: "Content Writer",
28 | },
29 | tags: ["Website"],
30 | publishDate: "01 Feb 2024",
31 | },
32 | {
33 | id: 3,
34 | title: "17 Tips to swiftly enhance your SEO keyword strategy",
35 | paragraph:
36 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dictum neque, laoreet dolor.",
37 | image: "/images/blog/blog-03.jpg",
38 | author: {
39 | name: "Suzi Jenk",
40 | image: "/images/blog/author-01.png",
41 | designation: "Content Writer",
42 | },
43 | tags: ["seo"],
44 | publishDate: "28 Jan 2024",
45 | },
46 | ];
47 | export default blogData;
48 |
--------------------------------------------------------------------------------
/sections/Blog/index.tsx:
--------------------------------------------------------------------------------
1 | import SectionTitle from "../../components/SectionTitle";
2 | import SingleBlog from "./SingleBlog";
3 | import blogData from "./blogData";
4 |
5 | const Blog = () => {
6 | return (
7 |
11 |
12 |
17 |
18 |
19 | {blogData.map((blog) => (
20 |
21 |
22 |
23 | ))}
24 |
25 |
26 |
27 | );
28 | };
29 |
30 | export default Blog;
31 |
--------------------------------------------------------------------------------
/sections/Brands/brandsData.tsx:
--------------------------------------------------------------------------------
1 | import { Brand } from "@/types/brand";
2 |
3 | const brandsData: Brand[] = [
4 | {
5 | id: 1,
6 | name: "Gumroad",
7 | href: "#",
8 | image: "/images/brands/gumroad.svg",
9 | },
10 | {
11 | id: 2,
12 | name: "Hbomax",
13 | href: "#",
14 | image: "/images/brands/hbomax.svg",
15 | },
16 | {
17 | id: 3,
18 | name: "Loom",
19 | href: "#",
20 | image: "/images/brands/loom.svg",
21 | },
22 | {
23 | id: 4,
24 | name: "Ayro UI",
25 | href: "#",
26 | image: "/images/brands/ayroui.svg",
27 | },
28 | {
29 | id: 5,
30 | name: "Webflow",
31 | href: "#",
32 | image: "/images/brands/webflow.svg",
33 | },
34 | ];
35 |
36 | export default brandsData;
37 |
--------------------------------------------------------------------------------
/sections/Brands/index.tsx:
--------------------------------------------------------------------------------
1 | import { Brand } from "@/types/brand";
2 | import Image from "next/image";
3 | import brandsData from "./brandsData";
4 |
5 | const Brands = () => {
6 | return (
7 |
8 |
9 |
10 |
11 |
15 | {brandsData.map((brand) => (
16 |
17 | ))}
18 |
19 |
20 |
21 |
22 |
23 | );
24 | };
25 |
26 | export default Brands;
27 |
28 | const SingleBrand = ({ brand }: { brand: Brand }) => {
29 | const { href, image, name } = brand;
30 |
31 | return (
32 |
42 | );
43 | };
44 |
--------------------------------------------------------------------------------
/sections/Contact/NewsLatterBox.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useTheme } from "next-themes";
4 |
5 | const NewsLatterBox = () => {
6 | const { theme } = useTheme();
7 |
8 | return (
9 |
13 |
14 | Subscribe to receive future updates
15 |
16 |
17 | Lorem ipsum dolor sited Sed ullam corper consectur adipiscing Mae ornare
18 | massa quis lectus.
19 |
20 |
42 |
43 |
44 |
45 |
52 |
57 |
58 |
66 |
70 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
88 |
93 |
94 |
102 |
106 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
124 |
129 |
130 |
138 |
142 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
160 |
161 |
166 |
171 |
176 |
181 |
182 |
183 |
191 |
195 |
200 |
201 |
209 |
213 |
218 |
219 |
227 |
231 |
236 |
237 |
245 |
249 |
254 |
255 |
256 |
257 |
258 |
259 |
260 | );
261 | };
262 |
263 | export default NewsLatterBox;
264 |
--------------------------------------------------------------------------------
/sections/Contact/index.tsx:
--------------------------------------------------------------------------------
1 | import NewsLatterBox from "./NewsLatterBox";
2 |
3 | const Contact = () => {
4 | return (
5 |
83 | );
84 | };
85 |
86 | export default Contact;
87 |
--------------------------------------------------------------------------------
/sections/Features/SingleFeature.tsx:
--------------------------------------------------------------------------------
1 | import { Feature } from "@/types/feature";
2 |
3 | const SingleFeature = ({ feature }: { feature: Feature }) => {
4 | const { icon, title, paragraph } = feature;
5 | return (
6 |
7 |
8 |
9 | {icon}
10 |
11 |
12 | {title}
13 |
14 |
15 | {paragraph}
16 |
17 |
18 |
19 | );
20 | };
21 |
22 | export default SingleFeature;
23 |
--------------------------------------------------------------------------------
/sections/Features/featuresData.tsx:
--------------------------------------------------------------------------------
1 | import { Feature } from "@/types/feature";
2 |
3 | const featuresData: Feature[] = [
4 | {
5 | id: 1,
6 | icon: (
7 |
8 |
12 |
13 |
14 | ),
15 | title: "Advanced Analytics Dashboard",
16 | paragraph:
17 | "Tuae nam ex similique incidunt expedita exerci tationem laudantium. Repellendus quisquam numquam perferendis earum sapiente non tempore? Fugit repellat ut maiores.",
18 | },
19 | {
20 | id: 1,
21 | icon: (
22 |
23 |
27 |
28 |
29 | ),
30 | title: "Customizable Templates",
31 | paragraph:
32 | "Experience the power of innovative solutions designed to streamline your workflow and enhance productivity. Unlock new possibilities with our advanced features tailored to meet your unique needs.",
33 | },
34 | {
35 | id: 1,
36 | icon: (
37 |
38 |
42 |
43 |
44 | ),
45 | title: "SEO Optimization Tools",
46 | paragraph:
47 | "Experience the power of innovative solutions designed to streamline your workflow and enhance productivity. Unlock new possibilities with our advanced features tailored to meet your unique needs. ",
48 | },
49 | {
50 | id: 1,
51 | icon: (
52 |
53 |
57 |
58 |
59 | ),
60 | title: "Lead Generation Capabilities",
61 | paragraph:
62 | "Experience the power of innovative solutions designed to streamline your workflow and enhance productivity. Unlock new possibilities with our advanced features tailored to meet your unique needs. ",
63 | },
64 | {
65 | id: 1,
66 | icon: (
67 |
68 |
72 |
73 |
74 | ),
75 | title: "Mobile Responsive Design",
76 | paragraph:
77 | "Experience the power of innovative solutions designed to streamline your workflow and enhance productivity. Unlock new possibilities with our advanced features tailored to meet your unique needs. ",
78 | },
79 | {
80 | id: 1,
81 | icon: (
82 |
83 |
87 |
88 |
89 |
90 | ),
91 | title: "Integrated Social Media Management",
92 | paragraph:
93 | "Experience the power of innovative solutions designed to streamline your workflow and enhance productivity. Unlock new possibilities with our advanced features tailored to meet your unique needs.",
94 | },
95 | ];
96 | export default featuresData;
97 |
--------------------------------------------------------------------------------
/sections/Features/index.tsx:
--------------------------------------------------------------------------------
1 | import SectionTitle from "../../components/SectionTitle";
2 | import SingleFeature from "./SingleFeature";
3 | import featuresData from "./featuresData";
4 |
5 | const Features = () => {
6 | return (
7 | <>
8 |
9 |
10 |
15 |
16 |
17 | {featuresData.map((feature) => (
18 |
19 | ))}
20 |
21 |
22 |
23 | >
24 | );
25 | };
26 |
27 | export default Features;
28 |
--------------------------------------------------------------------------------
/sections/Header/ThemeToggler.tsx:
--------------------------------------------------------------------------------
1 | import { useTheme } from "next-themes";
2 |
3 | const ThemeToggler = () => {
4 | const { theme, setTheme } = useTheme();
5 | return (
6 | setTheme(theme === "dark" ? "light" : "dark")}
8 | className="flex items-center justify-center text-black rounded-full cursor-pointer bg-gray-2 dark:bg-dark-bg h-9 w-9 dark:text-white md:h-14 md:w-14"
9 | >
10 |
15 |
21 |
22 |
28 |
29 |
30 |
31 |
38 |
39 |
40 | );
41 | };
42 |
43 | export default ThemeToggler;
44 |
--------------------------------------------------------------------------------
/sections/Header/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Image from "next/image";
3 | import Link from "next/link";
4 | import { usePathname } from "next/navigation";
5 | import { useEffect, useState } from "react";
6 | import ThemeToggler from "./ThemeToggler";
7 | import menuData from "./menuData";
8 |
9 | const Header = () => {
10 | // Navbar toggle
11 | const [navbarOpen, setNavbarOpen] = useState(false);
12 | const navbarToggleHandler = () => {
13 | setNavbarOpen(!navbarOpen);
14 | };
15 |
16 | // Sticky Navbar
17 | const [sticky, setSticky] = useState(false);
18 | const handleStickyNavbar = () => {
19 | if (window.scrollY >= 80) {
20 | setSticky(true);
21 | } else {
22 | setSticky(false);
23 | }
24 | };
25 | useEffect(() => {
26 | window.addEventListener("scroll", handleStickyNavbar);
27 | });
28 |
29 | // submenu handler
30 | const [openIndex, setOpenIndex] = useState(-1);
31 | const handleSubmenu = (index) => {
32 | if (openIndex === index) {
33 | setOpenIndex(-1);
34 | } else {
35 | setOpenIndex(index);
36 | }
37 | };
38 |
39 | const usePathName = usePathname();
40 |
41 | return (
42 | <>
43 |
50 |
51 |
52 |
53 |
59 |
66 |
73 |
74 |
75 |
76 |
77 |
83 |
88 |
93 |
98 |
99 |
107 |
108 | {menuData.map((menuItem, index) => (
109 |
110 | {menuItem.path ? (
111 |
119 | {menuItem.title}
120 |
121 | ) : (
122 | <>
123 | handleSubmenu(index)}
125 | className="flex cursor-pointer items-center justify-between py-2 text-base text-dark group-hover:text-primary dark:text-white/70 dark:group-hover:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6"
126 | >
127 | {menuItem.title}
128 |
129 |
130 |
136 |
137 |
138 |
139 |
144 | {menuItem.submenu.map((submenuItem, index) => (
145 |
150 | {submenuItem.title}
151 |
152 | ))}
153 |
154 | >
155 | )}
156 |
157 | ))}
158 |
159 |
160 |
161 |
162 |
166 | Sign In
167 |
168 |
172 | Sign Up
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 | >
183 | );
184 | };
185 |
186 | export default Header;
187 |
--------------------------------------------------------------------------------
/sections/Header/menuData.tsx:
--------------------------------------------------------------------------------
1 | import { Menu } from "@/types/menu";
2 |
3 | const menuData: Menu[] = [
4 | {
5 | id: 1,
6 | title: "Home",
7 | path: "/",
8 | newTab: false,
9 | },
10 | {
11 | id: 2,
12 | title: "About",
13 | path: "/about",
14 | newTab: false,
15 | },
16 | {
17 | id: 3,
18 | title: "Pricing",
19 | path: "/pricing",
20 | newTab: false,
21 | },
22 | {
23 | id: 4,
24 | title: "Blog",
25 | path: "/blog",
26 | newTab: false,
27 | },
28 | {
29 | id: 5,
30 | title: "Contact",
31 | path: "/contact",
32 | newTab: false,
33 | },
34 | {
35 | id: 6,
36 | title: "Forums",
37 | newTab: false,
38 | submenu: [
39 | {
40 | id: 61,
41 | title: "Collob",
42 | path: "/",
43 | newTab: false,
44 | },
45 | {
46 | id: 62,
47 | title: "Design",
48 | path: "/",
49 | newTab: false,
50 | },
51 | {
52 | id: 63,
53 | title: "Webco",
54 | path: "/",
55 | newTab: false,
56 | },
57 | ],
58 | },
59 | ];
60 | export default menuData;
61 |
--------------------------------------------------------------------------------
/sections/Hero/index.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | const Hero = () => {
4 | return (
5 | <>
6 |
10 |
11 |
12 |
13 |
17 |
18 | Cutting-Edge SEO Marketing and Website Design Solutions
19 |
20 |
21 | Fly and elevate your online presence with our comprehensive SaaS platform,
22 | designed to drive exceptional results. Our streamlined SEO marketing and
23 | website design solutions empower you to optimize your digital strategy effortlessly.
24 |
25 |
26 |
30 | See Plans
31 |
32 |
36 | Explore Demos
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
51 |
55 |
59 |
60 |
64 |
65 |
69 |
73 |
77 |
81 |
85 |
90 |
96 |
102 |
108 |
114 |
115 |
123 |
124 |
125 |
126 |
127 |
135 |
136 |
137 |
138 |
146 |
147 |
148 |
149 |
157 |
158 |
159 |
160 |
168 |
169 |
170 |
171 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
194 |
198 |
202 |
206 |
210 |
218 |
219 |
220 |
228 |
229 |
230 |
231 |
239 |
240 |
241 |
242 |
250 |
251 |
252 |
253 |
261 |
262 |
263 |
264 |
272 |
273 |
274 |
275 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 | >
291 | );
292 | };
293 |
294 | export default Hero;
295 |
--------------------------------------------------------------------------------
/sections/Pricing/OfferList.tsx:
--------------------------------------------------------------------------------
1 | const checkIcon = (
2 |
3 |
4 |
5 | );
6 |
7 | const crossIcon = (
8 |
9 |
10 |
11 | );
12 |
13 | const OfferList = ({
14 | text,
15 | status,
16 | }: {
17 | text: string;
18 | status: "active" | "inactive";
19 | }) => {
20 | return (
21 |
22 |
23 | {status === "active" ? checkIcon : crossIcon}
24 |
25 |
{text}
26 |
27 | );
28 | };
29 |
30 | export default OfferList;
31 |
--------------------------------------------------------------------------------
/sections/Pricing/PricingBox.tsx:
--------------------------------------------------------------------------------
1 | const PricingBox = (props: {
2 | price: string;
3 | duration: string;
4 | packageName: string;
5 | subtitle: string;
6 | children: React.ReactNode;
7 | }) => {
8 | const { price, duration, packageName, subtitle, children } = props;
9 |
10 | return (
11 |
12 |
16 |
17 |
18 | ${price}
19 | /{duration}
20 |
21 |
22 | {packageName}
23 |
24 |
25 |
{subtitle}
26 |
27 |
28 | Start Free Trial
29 |
30 |
31 |
{children}
32 |
33 |
40 |
45 |
50 |
51 |
59 |
60 |
61 |
62 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | );
79 | };
80 |
81 | export default PricingBox;
82 |
--------------------------------------------------------------------------------
/sections/Pricing/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useState } from "react";
3 | import SectionTitle from "../../components/SectionTitle";
4 | import OfferList from "./OfferList";
5 | import PricingBox from "./PricingBox";
6 |
7 | const Pricing = () => {
8 | const [isMonthly, setIsMonthly] = useState(true);
9 |
10 | return (
11 |
12 |
13 |
19 |
20 |
21 |
25 |
setIsMonthly(true)}
27 | className={`${
28 | isMonthly
29 | ? "pointer-events-none text-primary"
30 | : "text-dark dark:text-white"
31 | } mr-4 cursor-pointer text-base font-semibold`}
32 | >
33 | Monthly
34 |
35 |
setIsMonthly(!isMonthly)}
37 | className="flex cursor-pointer items-center"
38 | >
39 |
49 |
50 |
setIsMonthly(false)}
52 | className={`${
53 | isMonthly
54 | ? "text-dark dark:text-white"
55 | : "pointer-events-none text-primary"
56 | } ml-4 cursor-pointer text-base font-semibold`}
57 | >
58 | Yearly
59 |
60 |
61 |
62 |
63 |
64 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
114 |
124 |
134 |
135 |
143 |
144 |
145 |
146 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 | );
162 | };
163 |
164 | export default Pricing;
165 |
--------------------------------------------------------------------------------
/sections/Testimonials/SingleTestimonial.tsx:
--------------------------------------------------------------------------------
1 | import { Testimonial } from "@/types/testimonial";
2 | import Image from "next/image";
3 | const starIcon = (
4 |
5 |
6 |
7 | );
8 |
9 | const SingleTestimonial = ({ testimonial }: { testimonial: Testimonial }) => {
10 | const { star, name, image, content, designation } = testimonial;
11 |
12 | let ratingIcons = [];
13 | for (let index = 0; index < star; index++) {
14 | ratingIcons.push(
15 |
16 | {starIcon}
17 | ,
18 | );
19 | }
20 |
21 | return (
22 |
23 |
27 |
{ratingIcons}
28 |
29 | “{content}
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | {name}
38 |
39 |
{designation}
40 |
41 |
42 |
43 |
44 | );
45 | };
46 |
47 | export default SingleTestimonial;
48 |
--------------------------------------------------------------------------------
/sections/Testimonials/index.tsx:
--------------------------------------------------------------------------------
1 | import { Testimonial } from "@/types/testimonial";
2 | import SectionTitle from "../../components/SectionTitle";
3 | import SingleTestimonial from "./SingleTestimonial";
4 |
5 | const testimonialData: Testimonial[] = [
6 | {
7 | id: 1,
8 | name: "Sertan Dani",
9 | designation: "Designer at Gumroad",
10 | content:
11 | "The platform's intuitive design, cleanliness, and minimal distractions are unparalleled. If you're building a community, look no further.",
12 | image: "/images/testimonials/team-1.png",
13 | star: 5,
14 | },
15 | {
16 | id: 2,
17 | name: "Fera Lopus",
18 | designation: "Founder of loom",
19 | content:
20 | "The platform's intuitive design, cleanliness, and minimal distractions are unparalleled. If you're building a community, look no further",
21 | image: "/images/testimonials/team-2.png",
22 | star: 5,
23 | },
24 | {
25 | id: 3,
26 | name: "Zahe Conteq",
27 | designation: "Developer at Webflow",
28 | content:
29 | "The platform's intuitive design, cleanliness, and minimal distractions are unparalleled. If you're building a community, look no further",
30 | image: "/images/testimonials/team-3.png",
31 | star: 5,
32 | },
33 | ];
34 |
35 | const Testimonials = () => {
36 | return (
37 |
38 |
39 |
44 |
45 |
46 | {testimonialData.map((testimonial) => (
47 |
48 | ))}
49 |
50 |
51 |
52 |
59 |
69 |
79 |
80 |
88 |
89 |
90 |
91 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
113 |
114 |
118 |
122 |
126 |
130 |
131 |
132 |
140 |
141 |
142 |
143 |
151 |
152 |
153 |
154 |
162 |
163 |
164 |
165 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 | );
181 | };
182 |
183 | export default Testimonials;
184 |
--------------------------------------------------------------------------------
/sections/Video/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Image from "next/image";
4 | import { useState } from "react";
5 | import SectionTitle from "../../components/SectionTitle";
6 |
7 | import ModalVideo from "react-modal-video";
8 |
9 | const Video = () => {
10 | const [isOpen, setOpen] = useState(false);
11 |
12 | return (
13 |
14 |
15 |
24 |
25 |
26 |
27 |
31 |
32 |
33 |
34 |
setOpen(true)}
37 | className="flex h-[70px] w-[70px] items-center justify-center rounded-10 bg-white bg-opacity-75 text-primary transition hover:bg-opacity-100"
38 | >
39 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | setOpen(false)}
62 | />
63 |
64 |
65 |
66 | );
67 | };
68 |
69 | export default Video;
70 |
--------------------------------------------------------------------------------
/styles/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=M+PLUS+Code+Latin:wght@100..700&family=Oswald:wght@200..700&display=swap');
2 | @tailwind base;
3 | @tailwind components;
4 | @tailwind utilities;
5 |
6 | *{
7 | font-family: "Lato", sans-serif;
8 | }
9 |
10 | @layer base {
11 | body {
12 | font-family: "Lato", sans-serif;
13 | }
14 | }
15 |
16 | @layer components {
17 | input[type="checkbox"]:checked ~ label span svg {
18 | @apply inline-flex;
19 | }
20 |
21 | .sticky .header-logo {
22 | @apply py-5 lg:py-2;
23 | }
24 |
25 | .sticky .menu-scroll.active {
26 | @apply opacity-70;
27 | }
28 |
29 | input#togglePlan:checked ~ .dot {
30 | @apply translate-x-full;
31 | }
32 |
33 | input#checkboxLabel:checked ~ .box span {
34 | @apply opacity-100;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/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 | "./sections/**/*.{js,ts,jsx,tsx}",
8 | ],
9 | darkMode: "class",
10 | theme: {
11 | container: {
12 | center: true,
13 | padding: "1rem",
14 | },
15 |
16 | screens: {
17 | xs: "450px",
18 | // => @media (min-width: 450px) { ... }
19 |
20 | sm: "575px",
21 | // => @media (min-width: 576px) { ... }
22 |
23 | md: "768px",
24 | // => @media (min-width: 768px) { ... }
25 |
26 | lg: "992px",
27 | // => @media (min-width: 992px) { ... }
28 |
29 | xl: "1200px",
30 | // => @media (min-width: 1200px) { ... }
31 |
32 | "2xl": "1400px",
33 | // => @media (min-width: 1400px) { ... }
34 | },
35 | extend: {
36 | colors: {
37 | current: "currentColor",
38 | transparent: "transparent",
39 | white: "#FFFFFF",
40 | black: "#081e17",
41 | dark: "#182c25",
42 | primary: "#2c4c3b",
43 | yellow: "#FBB040",
44 | "body-color": "#b2b2b2",
45 | "body-color-dark": "#809189",
46 | "gray-dark": "#001810",
47 | "gray-light": "#F0F2F9",
48 | stroke: "#E3E8EF",
49 | "stroke-dark": "#11211f",
50 | "bg-color-dark": "#091612",
51 | },
52 |
53 | boxShadow: {
54 | signUp: "0px 5px 10px rgba(4, 10, 34, 0.2)",
55 | one: "0px 2px 3px rgba(7, 7, 77, 0.05)",
56 | two: "0px 5px 10px rgba(6, 8, 15, 0.1)",
57 | three: "0px 5px 15px rgba(6, 8, 15, 0.05)",
58 | sticky: "inset 0 -1px 0 0 rgba(0, 0, 0, 0.1)",
59 | "sticky-dark": "inset 0 -1px 0 0 rgba(255, 255, 255, 0.1)",
60 | "feature-2": "0px 10px 40px rgba(48, 86, 211, 0.12)",
61 | submit: "0px 5px 20px rgba(4, 10, 34, 0.1)",
62 | "submit-dark": "0px 5px 20px rgba(4, 10, 34, 0.1)",
63 | btn: "0px 1px 2px rgba(4, 10, 34, 0.15)",
64 | "btn-hover": "0px 1px 2px rgba(0, 0, 0, 0.15)",
65 | "btn-light": "0px 1px 2px rgba(0, 0, 0, 0.1)",
66 | },
67 | dropShadow: {
68 | three: "0px 5px 15px rgba(6, 8, 15, 0.05)",
69 | },
70 | },
71 | },
72 | plugins: [],
73 | };
74 |
--------------------------------------------------------------------------------
/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": "bundler",
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 |
--------------------------------------------------------------------------------
/types/blog.ts:
--------------------------------------------------------------------------------
1 | type Author = {
2 | name: string;
3 | image: string;
4 | designation: string;
5 | };
6 |
7 | export type Blog = {
8 | id: number;
9 | title: string;
10 | paragraph: string;
11 | image: string;
12 | author: Author;
13 | tags: string[];
14 | publishDate: string;
15 | };
16 |
--------------------------------------------------------------------------------
/types/brand.ts:
--------------------------------------------------------------------------------
1 | export type Brand = {
2 | id: number;
3 | name: string;
4 | href: string;
5 | image: string;
6 | };
7 |
--------------------------------------------------------------------------------
/types/feature.ts:
--------------------------------------------------------------------------------
1 | export type Feature = {
2 | id: number;
3 | icon: JSX.Element;
4 | title: string;
5 | paragraph: string;
6 | };
7 |
--------------------------------------------------------------------------------
/types/menu.ts:
--------------------------------------------------------------------------------
1 | export type Menu = {
2 | id: number;
3 | title: string;
4 | path?: string;
5 | newTab: boolean;
6 | submenu?: Menu[];
7 | };
8 |
--------------------------------------------------------------------------------
/types/testimonial.ts:
--------------------------------------------------------------------------------
1 | export type Testimonial = {
2 | id: number;
3 | name: string;
4 | designation: string;
5 | content: string;
6 | image: string;
7 | star: number;
8 | };
9 |
--------------------------------------------------------------------------------