├── .eslintrc.json ├── .gitignore ├── .vscode └── settings.json ├── README.md ├── app ├── (landing-page) │ ├── _components │ │ ├── eighth-section.tsx │ │ ├── fifth-section.tsx │ │ ├── first-section.tsx │ │ ├── fourth-section.tsx │ │ ├── ninth-section.tsx │ │ ├── second-section.tsx │ │ ├── seventh-section.tsx │ │ ├── sixth-section.tsx │ │ ├── slider │ │ │ ├── _components │ │ │ │ ├── slider-one.tsx │ │ │ │ ├── slider-second.tsx │ │ │ │ ├── slider-third.tsx │ │ │ │ └── slider.d.ts │ │ │ └── sliders.tsx │ │ ├── tenth-section.tsx │ │ └── third-section.tsx │ └── page.tsx ├── api │ └── contact │ │ └── route.ts ├── bird-ai │ ├── _components │ │ ├── faqs.tsx │ │ ├── first-section.tsx │ │ ├── fourth-section.tsx │ │ ├── second-section.tsx │ │ ├── testimonials.tsx │ │ └── third-section.tsx │ └── page.tsx ├── contact │ ├── _components │ │ └── first-section.tsx │ └── page.tsx ├── engineering │ ├── _components │ │ ├── explore.tsx │ │ ├── features.tsx │ │ ├── fifth-section.tsx │ │ ├── first-section.tsx │ │ ├── fourth-section.tsx │ │ ├── quote.tsx │ │ ├── second-section.tsx │ │ ├── slider.tsx │ │ └── third-section.tsx │ └── page.tsx ├── enterprise │ ├── _components │ │ ├── bottom-card-blue.tsx │ │ ├── eighth-section.tsx │ │ ├── fifth-section.tsx │ │ ├── first-section.tsx │ │ ├── fourth-section.tsx │ │ ├── ninth-section.tsx │ │ ├── quote.tsx │ │ ├── second-section.tsx │ │ ├── seventh-section.tsx │ │ ├── sixth-section.tsx │ │ ├── testimonials.tsx │ │ └── third-section.tsx │ └── page.tsx ├── favicon.ico ├── free │ └── page.tsx ├── globals.css ├── layout.tsx ├── pricing │ ├── _components │ │ └── first-section.tsx │ └── page.tsx ├── sales │ ├── _components │ │ ├── explore.tsx │ │ ├── features.tsx │ │ ├── fifth-section.tsx │ │ ├── first-section.tsx │ │ ├── fourth-section.tsx │ │ ├── quote.tsx │ │ ├── second-section.tsx │ │ ├── slider.tsx │ │ └── third-section.tsx │ └── page.tsx ├── screen-recorder │ ├── _components │ │ ├── faqs.tsx │ │ ├── feedback-section.tsx │ │ ├── first-section.tsx │ │ ├── fourth-section.tsx │ │ ├── phone-section.tsx │ │ ├── second-section.tsx │ │ └── third-section.tsx │ └── page.tsx ├── sign-in │ ├── _components │ │ └── first-section.tsx │ └── page.tsx └── team-alignment │ ├── _components │ ├── explore.tsx │ ├── features.tsx │ ├── fifth-section.tsx │ ├── first-section.tsx │ ├── fourth-section.tsx │ ├── quote.tsx │ ├── second-section.tsx │ ├── slider.tsx │ └── third-section.tsx │ └── page.tsx ├── components.json ├── components └── ui │ ├── accordion.tsx │ ├── bottom-card.tsx │ ├── bottom-section.tsx │ ├── button.tsx │ ├── checkbox.tsx │ ├── footer.tsx │ ├── form.tsx │ ├── input.tsx │ ├── label.tsx │ ├── navbar │ ├── _components │ │ ├── action-buttons.tsx │ │ ├── content-menu.tsx │ │ ├── drop-down-menu.tsx │ │ ├── logo.tsx │ │ └── menu.tsx │ └── navbar.tsx │ ├── select.tsx │ ├── textarea.tsx │ ├── toast.tsx │ ├── toaster.tsx │ └── use-toast.ts ├── lib └── utils.ts ├── next.config.js ├── package.json ├── postcss.config.js ├── public ├── images │ ├── sales.svg │ ├── undraw-1.svg │ ├── undraw-2.svg │ └── undraw-3.svg ├── logos │ ├── bird-logo.png │ ├── logoipsum-211.svg │ ├── logoipsum-222.svg │ ├── logoipsum-223.svg │ ├── logoipsum-224.svg │ ├── logoipsum-225.svg │ ├── logoipsum-226.svg │ ├── logoipsum-243.svg │ ├── logoipsum-245.svg │ ├── logoipsum-258.svg │ ├── logoipsum-262.svg │ ├── logoipsum-264.svg │ ├── logoipsum-265.svg │ ├── logoipsum-270.svg │ ├── logoipsum-273.svg │ ├── logoipsum-274.svg │ ├── logoipsum-285.svg │ ├── logoipsum-289.svg │ ├── logoipsum-292.svg │ ├── logoipsum-293.svg │ ├── logoipsum-294.svg │ ├── logoipsum-295.svg │ ├── logoipsum-296.svg │ ├── logoipsum-297.svg │ ├── logoipsum-298.svg │ ├── logoipsum-299.svg │ ├── logoipsum-300.svg │ ├── logoipsum-311.svg │ ├── logoipsum-317.svg │ ├── logoipsum-323.svg │ ├── logoipsum-325.svg │ ├── logoipsum-327.svg │ ├── logoipsum-329.svg │ └── twitter-logo.png ├── next.svg ├── vercel.svg └── videos │ └── hero-1.mp4 ├── tailwind.config.js ├── tailwind.config.ts └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.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 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.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 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 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). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | 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. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /app/(landing-page)/_components/fifth-section.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/ui/button"; 2 | 3 | const FifthSection = () => { 4 | return ( 5 |
6 |
15 |
26 | Keep your content safe 27 | 28 |
29 |
42 | 43 | Enterprise-grade 44 | security to keep your data 45 | and your customer's data private and secure. 46 | We offer SSO, SCIM as 47 | well as custom data retention policies and privacy settings. 48 | 49 |
50 | 51 |
52 | 69 | 70 | 71 | 72 |
73 | 74 |
75 |
); 76 | } 77 | 78 | export default FifthSection; -------------------------------------------------------------------------------- /app/(landing-page)/_components/first-section.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/ui/button"; 2 | import Link from "next/link"; 3 | 4 | const FirstSection = () => { 5 | return ( 6 | 7 |
8 |
9 |
20 | One video is worth a thousand words 21 | 22 |
23 | 24 |

36 | 37 | Easily record and share 38 | AI-powered video messages 39 | with your teammates and 40 | customers to supercharge productivity 41 | 42 |

43 | 44 |
45 | 48 | 74 | 75 | 76 |
77 | 78 |
79 | 95 | 96 |
97 | 98 |
99 | 100 |
101 | 102 | ); 103 | } 104 | 105 | export default FirstSection; -------------------------------------------------------------------------------- /app/(landing-page)/_components/ninth-section.tsx: -------------------------------------------------------------------------------- 1 | import { ExternalLink } from "lucide-react"; 2 | 3 | const NinthSection = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 | Bird for Enterprise 11 |
12 |
13 | Bird for Enterprise helps teams securely manage and organize async 14 | video communication at scale 15 |
16 | 17 |
18 |
37 |
38 | 39 |
Learn more
40 |
41 |
42 |
43 |
44 | 45 | 61 |
62 |
63 |
64 | ); 65 | }; 66 | 67 | export default NinthSection; 68 | -------------------------------------------------------------------------------- /app/(landing-page)/_components/slider/_components/slider-one.tsx: -------------------------------------------------------------------------------- 1 | 2 | 'use client' 3 | 4 | import Slider from 'react-infinite-logo-slider'; 5 | 6 | import Image from 'next/image'; 7 | 8 | const SliderOne = () => { 9 | return (
10 | 14 | 15 | logo 16 | 17 | 18 | logo 19 | 20 | 21 | logo 22 | 23 | 24 | logo 25 | 26 | 27 | logo 28 | 29 | 30 | logo 31 | 32 | 33 | logo 34 | 35 | 36 | logo 37 | 38 | 39 | logo 40 | 41 | 42 | logo 43 | 44 | 45 | logo 46 | 47 | 48 | logo 49 | 50 | 51 | logo 52 | 53 | 54 | logo 55 | 56 | 57 | logo 58 | 59 | 60 | 61 |
); 62 | } 63 | 64 | export default SliderOne; -------------------------------------------------------------------------------- /app/(landing-page)/_components/slider/_components/slider-second.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import Slider from 'react-infinite-logo-slider'; 4 | 5 | import Image from 'next/image'; 6 | 7 | 8 | const SliderTwo = () => { 9 | return ( 10 | 11 |
12 | 17 | 18 | logo 19 | 20 | 21 | logo 22 | 23 | 24 | 25 | logo 26 | 27 | 28 | logo 29 | 30 | 31 | logo 32 | 33 | 34 | logo 35 | 36 | 37 | logo 38 | 39 | 40 | logo 41 | 42 | 43 | logo 44 | 45 | 46 | 47 | logo 48 | 49 | 50 | logo 51 | 52 | 53 | logo 54 | 55 | 56 | logo 57 | 58 | 59 | logo 60 | 61 | 62 |
); 63 | } 64 | 65 | export default SliderTwo; -------------------------------------------------------------------------------- /app/(landing-page)/_components/slider/_components/slider-third.tsx: -------------------------------------------------------------------------------- 1 | 2 | 'use client' 3 | 4 | import Slider from 'react-infinite-logo-slider'; 5 | 6 | import Image from 'next/image'; 7 | 8 | 9 | const SliderThree = () => { 10 | return (
11 | 12 | 13 | 23 | 24 | logo 25 | 26 | 27 | logo 28 | 29 | 30 | logo 31 | 32 | 33 | logo 34 | 35 | 36 | logo 37 | 38 | 39 | logo 40 | 41 | 42 | logo 43 | 44 | 45 | logo 46 | 47 | 48 | logo 49 | 50 | 51 | logo 52 | 53 | 54 | logo 55 | 56 | 57 | logo 58 | 59 | 60 | logo 61 | 62 | 63 | logo 64 | 65 | 66 | logo 67 | 68 | 69 |
); 70 | } 71 | 72 | export default SliderThree; -------------------------------------------------------------------------------- /app/(landing-page)/_components/slider/_components/slider.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'react-infinite-logo-slider' -------------------------------------------------------------------------------- /app/(landing-page)/_components/slider/sliders.tsx: -------------------------------------------------------------------------------- 1 | import SliderOne from "./_components/slider-one"; 2 | import SliderTwo from "./_components/slider-second"; 3 | import SliderThree from "./_components/slider-third"; 4 | const Sliders = () => { 5 | return ( 6 |
7 |
21 | More Than 21 Million People Across 120,000 Companies Choose Bird 22 | 23 |
24 | 25 |
26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 |
); 34 | } 35 | 36 | export default Sliders; -------------------------------------------------------------------------------- /app/(landing-page)/page.tsx: -------------------------------------------------------------------------------- 1 | import Navbar from "@/components/ui/navbar/navbar"; 2 | import FirstSection from "./_components/first-section"; 3 | import Sliders from "./_components/slider/sliders"; 4 | import SecondSection from "./_components/second-section"; 5 | import ThirdSection from "./_components/third-section"; 6 | import FourthSection from "./_components/fourth-section"; 7 | import FifthSection from "./_components/fifth-section"; 8 | import SixthSection from "./_components/sixth-section"; 9 | import SeventhSection from "./_components/seventh-section"; 10 | import EighthSection from "./_components/eighth-section"; 11 | import NinthSection from "./_components/ninth-section"; 12 | import TenthSection from "./_components/tenth-section"; 13 | import BottomCard from "@/components/ui/bottom-card"; 14 | import BottomSection from "@/components/ui/bottom-section"; 15 | import Footer from "@/components/ui/footer"; 16 | 17 | const LandingPage = () => { 18 | return (
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
); 35 | } 36 | 37 | export default LandingPage; -------------------------------------------------------------------------------- /app/api/contact/route.ts: -------------------------------------------------------------------------------- 1 | import { NextResponse } from "next/server"; 2 | 3 | import nodemailer from "nodemailer"; 4 | 5 | export async function POST(req: Request) { 6 | if (req.method === "POST") { 7 | 8 | try { 9 | 10 | const { 11 | first_name, 12 | last_name, 13 | email, 14 | job_title, 15 | company_name, 16 | help, 17 | company_size, 18 | info, 19 | } = await req.json(); 20 | 21 | 22 | const transporter = nodemailer.createTransport({ 23 | host: "smtp.gmail.com", 24 | port: 465, 25 | secure: true, 26 | auth: { 27 | user: "tasicigor123@gmail.com", 28 | pass: "bwnnpzipkkvnnedx", 29 | }, 30 | }); 31 | 32 | const mailOptions = { 33 | from: email, 34 | to: "tasicigor123@gmail.com", 35 | subject: "Contact Form Submission", 36 | html: ` 37 |

Contact Form

38 |

First Name: ${first_name}

39 |

Last Name: ${last_name}

40 |

Email: ${email}

41 |

Job Title: ${job_title}

42 |

Company Name: ${company_name}

43 |

Help: ${help}

44 |

Company Size: ${company_size}

45 |

Info: ${info}

46 | `, 47 | }; 48 | 49 | 50 | await transporter.sendMail(mailOptions); 51 | 52 | return NextResponse.json("email has been sent"); 53 | } catch (error) { 54 | return NextResponse.json("email has not been sent"); 55 | } 56 | } else { 57 | return NextResponse.json('method not allowed'); 58 | } 59 | 60 | } 61 | -------------------------------------------------------------------------------- /app/bird-ai/_components/faqs.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Accordion, 3 | AccordionContent, 4 | AccordionItem, 5 | AccordionTrigger 6 | } from '@/components/ui/accordion' 7 | 8 | const FAQS = () => { 9 | return ( 10 |
11 |
12 | FAQS 13 |
14 | 18 | 20 | How do I purchase Bird ? 21 | 22 | It is possible to purchase bird. Click here to learn more. 23 | 24 | 25 | 26 | 28 | How do I purchase Bird ? 29 | 30 | It is possible to purchase bird. Click here to learn more. 31 | 32 | 33 | 34 | 36 | How do I purchase Bird ? 37 | 38 | It is possible to purchase bird. Click here to learn more. 39 | 40 | 41 | 42 | 44 | How do I purchase Bird ? 45 | 46 | It is possible to purchase bird. Click here to learn more. 47 | 48 | 49 | 50 | 52 | How do I purchase Bird ? 53 | 54 | It is possible to purchase bird. Click here to learn more. 55 | 56 | 57 | 58 |
); 59 | } 60 | 61 | export default FAQS; -------------------------------------------------------------------------------- /app/bird-ai/_components/first-section.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useEffect } from "react"; 4 | 5 | const FirstSection = () => { 6 | return ( 7 |
8 |
9 |
10 | Introducing Bird AI 11 |
12 |

25 | Record better presentations, faster feedback, and smoother hand-offs 26 | with Bird Ai. So you can be more productive, wherever you work. 27 |

28 | 29 |
30 |
31 |
50 |
51 |
Get Bird AI
52 |
53 |
54 |
55 |
56 | 57 |
58 | 71 |
72 |
73 |
74 | ); 75 | }; 76 | 77 | export default FirstSection; 78 | -------------------------------------------------------------------------------- /app/bird-ai/_components/fourth-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | const FourthSection = () => { 4 | return ( 5 |
6 |
7 |
14 | image 21 |
22 | 23 |
24 |
25 |
26 | Filler word removal 27 |
28 |
29 | From Google Workspace to Slack, Bird videos seamlessly integrate 30 | with hundreds of tools you use every day. 31 |
32 |
33 |
34 |
35 | 36 |
37 |
38 |
39 |
40 |
41 | Silence removal 42 |
43 | 44 |
45 | From Google Workspace to Slack, Bird videos seamlessly integrate 46 | with hundreds of tools you use every day. 47 |
48 |
49 |
50 |
51 | 52 |
53 | image 60 | 61 |
62 |
63 |
64 | ); 65 | }; 66 | 67 | export default FourthSection; 68 | -------------------------------------------------------------------------------- /app/bird-ai/_components/third-section.tsx: -------------------------------------------------------------------------------- 1 | const ThirdSection = () => { 2 | return ( 3 |
4 |
5 |
18 | Make your first take your best take 19 |
20 | 21 |
22 |
23 |
40 |
41 |
Get Bird AI
42 |
43 | 44 |
45 | 46 |
47 | 48 |
49 | 50 |
51 |
); 52 | } 53 | 54 | export default ThirdSection; -------------------------------------------------------------------------------- /app/bird-ai/page.tsx: -------------------------------------------------------------------------------- 1 | import Navbar from "@/components/ui/navbar/navbar"; 2 | import FirstSection from "./_components/first-section"; 3 | import SecondSection from "./_components/second-section"; 4 | import ThirdSection from "./_components/third-section"; 5 | import FourthSection from "./_components/fourth-section"; 6 | import FAQS from "./_components/faqs"; 7 | import Testimonials from "./_components/testimonials"; 8 | import BottomCard from "@/components/ui/bottom-card"; 9 | import BottomSection from "@/components/ui/bottom-section"; 10 | import Footer from "@/components/ui/footer"; 11 | 12 | const BirdAi = () => { 13 | return ( 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
); 26 | } 27 | 28 | export default BirdAi; -------------------------------------------------------------------------------- /app/contact/page.tsx: -------------------------------------------------------------------------------- 1 | import Navbar from "@/components/ui/navbar/navbar"; 2 | import ContactForm from "./_components/first-section"; 3 | 4 | const Contact = () => { 5 | return (
6 | 7 | 8 |
); 9 | } 10 | 11 | export default Contact; -------------------------------------------------------------------------------- /app/engineering/_components/features.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Lock, 3 | MessageCircle, 4 | MousePointerSquare, 5 | PencilLine, 6 | } from "lucide-react"; 7 | 8 | const Features = () => { 9 | return ( 10 |
11 |
12 | Features 13 |
14 |
15 | 16 | 17 |
18 |
19 |
20 | 21 |
22 |
Calls - to - action
23 |
24 |
25 | Add links to design files and other resources for viewers to 26 | reference 27 |
28 |
29 | 30 | 31 |
32 |
33 |
34 | 35 |
36 |
Drawing Tools
37 |
38 |
39 | Emphasize mouse clicks and draw on your screen as you record 40 |
41 |
42 | 43 | 44 |
45 |
46 |
47 | 48 |
49 |
Rich reactions
50 |
51 |
52 | Add links to design files and other resources for viewers to 53 | reference 54 |
55 |
56 | 57 | 58 |
59 |
60 |
61 | 62 |
63 |
Content security
64 |
65 |
66 | Restrict viewing by email address and add password protection. 67 |
68 |
69 | 70 | 71 |
72 |
73 | ); 74 | }; 75 | 76 | export default Features; 77 | -------------------------------------------------------------------------------- /app/engineering/_components/fifth-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | const FifthSection = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 | image 23 |
24 | 25 |
26 |
27 |
28 | Get your message across 29 |
30 |
31 | Bird helps you develop and build close connections to your 32 | team so you can do your best work together. 33 |
34 |
35 | 36 |
37 |
38 | Share ideas in high resolution 39 |
40 |
41 | Speak to your vision while sharing your design as you record 42 | your screen, camera, or both with Bird. 43 | 44 |
45 | 46 |
47 | 48 |
49 |
50 | Add context to your concept 51 |
52 |
53 | Use video to document the thinking behind your ideas 54 | and loop in the right people at the right time, with the right context. 55 | 56 |
57 | 58 |
59 | 60 | 61 |
62 |
63 |
64 |
65 |
66 |
67 | ); 68 | }; 69 | 70 | export default FifthSection; 71 | -------------------------------------------------------------------------------- /app/engineering/_components/first-section.tsx: -------------------------------------------------------------------------------- 1 | import { Check, Download } from "lucide-react"; 2 | 3 | const FirstSection = () => { 4 | return ( 5 |
6 |
7 |
8 | Bird for Team Alignment 9 |
10 |
11 | Move fast and stay connected 12 |
13 |

25 | Use Bird to record asynchronous videos that help your team stay 26 | aligned and move faster. 27 |

28 | 29 |
30 |
31 |
53 |
54 | 55 |
Get bird for free
56 |
57 |
58 |
59 |
60 | 61 |
62 | 78 |
79 | 80 |
81 | Why Teams Align with Bird 82 | 83 |
84 | 85 |
86 |
87 | 88 | 89 |
90 |
91 | 92 |
93 |
To record presentations
94 |
95 | 96 |
97 |
98 | 99 |
100 |
To deliver better feedback
101 |
102 | 103 |
104 |
105 | 106 |
107 |
To share knowledge
108 |
109 | 110 |
111 | 112 |
113 |
114 |
115 | ); 116 | }; 117 | 118 | export default FirstSection; 119 | -------------------------------------------------------------------------------- /app/engineering/_components/fourth-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | const FourthSection = () => { 4 | return ( 5 |
6 |
7 |
8 | Accelerate the flow of information 9 | 10 |
11 |

12 | Deliver detailed information up to 2x faster than it takes to present it. 13 | 14 |

15 | 16 |
17 | image 32 | 33 |
34 | 35 |
36 | 37 |
); 38 | } 39 | 40 | export default FourthSection; -------------------------------------------------------------------------------- /app/engineering/_components/quote.tsx: -------------------------------------------------------------------------------- 1 | 2 | import Image from "next/image"; 3 | 4 | const Quote = () => { 5 | return ( 6 |
7 |
17 |
18 | logo 27 |
28 |
29 | "Bird allows me to connect more personally with people 30 | without having to do 75 different one-on-one calls, which is just 31 | impossible at scale." 32 |
33 | 34 |
35 | 36 |
37 |
Alex Berman
38 |
Chief Marketing Officer
39 |
40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 |
); 48 | } 49 | 50 | export default Quote; -------------------------------------------------------------------------------- /app/engineering/_components/slider.tsx: -------------------------------------------------------------------------------- 1 | import SliderOne from "@/app/(landing-page)/_components/slider/_components/slider-one"; 2 | 3 | import { Download } from "lucide-react"; 4 | 5 | const Slider = () => { 6 | return ( 7 |
8 |
9 | More than 21 million people across 120,000 companies choose Bird 10 |
11 | 12 |
13 |
35 |
36 | 37 |
Get Bird for free
38 |
39 |
40 |
41 | 42 | 43 |
44 | ); 45 | }; 46 | 47 | export default Slider; 48 | -------------------------------------------------------------------------------- /app/engineering/_components/third-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | 4 | const ThirdSection = () => { 5 | return ( 6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Get your message across 14 |
15 |
16 | Keep everyone on track and in the loop using streamlined 17 | communication that scales. 18 |
19 |
20 | 21 |
22 |
23 | Share ideas in high resolution 24 |
25 |
26 | Speak to your vision while sharing your design as you record 27 | your screen, camera or both with Bird. 28 |
29 |
30 | 31 |
32 |
33 | Add context to your concept 34 |
35 |
36 | Use video to document the thinking behind your ideas and loop 37 | in the right people at the right time, with the right context. 38 |
39 |
40 | 41 |
42 |
43 | Send your video with a link 44 |
45 |
46 | Use Bird's instantly-generated links to share your video in 47 | Slack, Figma, Sketch, and anywhere else your team works. 48 |
49 |
50 |
51 |
52 |
53 | 54 | image 66 | 67 | 68 | 69 |
70 |
71 |
72 |
73 | ); 74 | }; 75 | 76 | export default ThirdSection; 77 | -------------------------------------------------------------------------------- /app/engineering/page.tsx: -------------------------------------------------------------------------------- 1 | import Navbar from "@/components/ui/navbar/navbar"; 2 | import FirstSection from "./_components/first-section"; 3 | import SecondSection from "./_components/second-section"; 4 | import ThirdSection from "./_components/third-section"; 5 | import FourthSection from "./_components/fourth-section"; 6 | import Features from "./_components/features"; 7 | import FifthSection from "./_components/fifth-section"; 8 | import Quote from "./_components/quote"; 9 | import Explore from "./_components/explore"; 10 | import Slider from "./_components/slider"; 11 | import TenthSection from "../(landing-page)/_components/tenth-section"; 12 | import BottomCard from "@/components/ui/bottom-card"; 13 | import BottomSection from "@/components/ui/bottom-section"; 14 | import Footer from "@/components/ui/footer"; 15 | 16 | const TeamAlignment = () => { 17 | return ( 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
40 | 41 | ); 42 | } 43 | 44 | export default TeamAlignment; -------------------------------------------------------------------------------- /app/enterprise/_components/bottom-card-blue.tsx: -------------------------------------------------------------------------------- 1 | import { Download } from "lucide-react"; 2 | 3 | const BottomCardBlue = () => { 4 | return ( 5 |
6 |
7 |
8 | Bird works wherever you do. 9 |
10 |
11 |
32 |
33 | 34 |
Get bird for free
35 |
36 |
37 |
38 |
39 |
40 | ); 41 | }; 42 | 43 | export default BottomCardBlue; 44 | -------------------------------------------------------------------------------- /app/enterprise/_components/eighth-section.tsx: -------------------------------------------------------------------------------- 1 | import { Link, PlayCircle, Zap } from "lucide-react"; 2 | 3 | const EighthSection = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Bird meets your teams where they're at 13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 |
21 |
22 | 23 |
24 |
Team Updates
25 |
26 |
27 | Send a pitch video screen capture to showcase a product or service 28 | and keep yourself 29 | front and center with a picture-in-picture presentation format. 30 | 31 |
32 |
33 | 34 |
35 |
36 |
37 | 38 |
39 |
Team Updates
40 |
41 |
42 | Send a pitch video screen capture to showcase a product or service 43 | and keep yourself 44 | front and center with a picture-in-picture presentation format. 45 | 46 |
47 |
48 | 49 |
50 |
51 |
52 | 53 |
54 |
Team Updates
55 |
56 |
57 | Send a pitch video screen capture to showcase a product or service 58 | and keep yourself 59 | front and center with a picture-in-picture presentation format. 60 | 61 |
62 |
63 | 64 |
65 |
66 |
67 |
68 | ); 69 | }; 70 | 71 | export default EighthSection; 72 | -------------------------------------------------------------------------------- /app/enterprise/_components/fifth-section.tsx: -------------------------------------------------------------------------------- 1 | import { Check } from "lucide-react"; 2 | 3 | const FifthSection = () => { 4 | return ( 5 |
6 |
16 |
27 | Enterprise-grade data protection 28 |
29 | 30 |

31 | Bird protects any and all data on our platform, so you can communicate 32 | with confidence. 33 |

34 |
35 | 36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 | Secured with encrypted data and industry-standard security frameworks 44 |
45 |
46 | 47 |
48 |
49 | 50 |
51 |
52 | Secured with encrypted data and industry-standard security frameworks 53 |
54 |
55 | 56 |
57 | 58 |
59 |
60 |
61 | 62 |
63 |
64 | Secured with encrypted data and industry-standard security frameworks 65 |
66 |
67 | 68 |
69 |
70 | 71 |
72 |
73 | Secured with encrypted data and industry-standard security frameworks 74 |
75 |
76 | 77 |
78 | 79 |
80 |
81 | ); 82 | }; 83 | 84 | export default FifthSection; 85 | -------------------------------------------------------------------------------- /app/enterprise/_components/first-section.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { MessageCircle } from "lucide-react"; 3 | 4 | const FirstSection = () => { 5 | return ( 6 |
7 |
15 |
25 | Companies work smarter with Bird 26 |
27 |

36 | Bird's enterprise-grade platform lets 37 | organizations securely communicate using async video. 38 |

39 | 40 |
53 | 54 |
Contact Sales
55 |
56 | 57 |
58 | 71 |
72 | 73 |
74 |
); 75 | } 76 | 77 | export default FirstSection; -------------------------------------------------------------------------------- /app/enterprise/_components/fourth-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | const FourthSection = () => { 4 | return ( 5 |
6 |
7 |
8 | Drive community and engagement at scale 9 |
10 |
11 | image 21 | 22 | image 33 | 34 | image 45 | 46 |
47 |
48 | 49 |
61 |
62 |
63 | Scale knowledge with video 64 |
65 |
66 | Connect pockets of institutional knowledge by making 67 | video messages searchable and discoverable. 68 |
69 |
70 | 71 |
72 |
73 | Create a culture of sharing 74 |
75 |
76 | Video messaging encourages your team to share early and often 77 | so projects are visible and driven to completion quicker. 78 |
79 |
80 | 81 |
82 |
83 | Build community at scale 84 |
85 |
86 | Magnify people's voices so the whole company 87 | can feel connected and heard beyond the boundaries of their team. 88 | 89 |
90 |
91 |
92 |
); 93 | } 94 | 95 | export default FourthSection; -------------------------------------------------------------------------------- /app/enterprise/_components/quote.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | const Quote = () => { 4 | return ( 5 |
6 | <> 7 |
21 |
22 | logo 31 |
32 |
33 | "Bird allows me to connect more personally with people 34 | without having to do 75 different one-on-one calls, which is just 35 | impossible at scale." 36 |
37 | 38 |
39 |
40 | image 52 |
53 |
54 |
Alex Berman
55 |
Chief Marketing Officer
56 |
57 |
58 |
59 | 60 |
); 61 | } 62 | 63 | export default Quote; -------------------------------------------------------------------------------- /app/enterprise/_components/second-section.tsx: -------------------------------------------------------------------------------- 1 | import SliderOne from "@/app/(landing-page)/_components/slider/_components/slider-one"; 2 | import SliderTwo from "@/app/(landing-page)/_components/slider/_components/slider-second"; 3 | 4 | const SecondSection = () => { 5 | return ( 6 | 7 |
8 |
9 |
22 | Thousands of leading enterprise teams use Bird 23 |
24 |
25 | 26 | 27 |
28 |
29 |
); 30 | } 31 | 32 | export default SecondSection; -------------------------------------------------------------------------------- /app/enterprise/_components/seventh-section.tsx: -------------------------------------------------------------------------------- 1 | import { ArrowDown, ArrowUp } from 'lucide-react'; 2 | import Image from 'next/image'; 3 | 4 | const SeventhSection = () => { 5 | return ( 6 |
15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 |
23 |
24 | 50% 25 |
26 | 27 |
28 | 29 |
30 | fewer meetings 31 |
32 | 33 | logo 42 | 43 |
44 | 45 |
46 | 47 | 48 |
49 |
50 | 51 |
52 |
53 | 50% 54 |
55 | 56 |
57 | 58 |
59 | Increase in productivity 60 |
61 | 62 | logo 71 | 72 |
73 | 74 |
75 | 76 | 77 |
78 |
79 | 80 |
81 |
82 | 24% 83 |
84 | 85 |
86 | 87 |
88 | Cost savings 89 | 90 |
91 | 92 | logo 101 | 102 |
103 |
104 |
); 105 | } 106 | 107 | export default SeventhSection; -------------------------------------------------------------------------------- /app/enterprise/_components/sixth-section.tsx: -------------------------------------------------------------------------------- 1 | const SixthSection = () => { 2 | return ( 3 |
4 |
5 |
6 | Use Bird for all types of communication 7 |
8 | 9 |

10 | Bird protects any and all data on our platform, so you can communicate 11 | with confidence. 12 |

13 | 14 | 27 |
28 | 29 |
36 |
51 | Announce Projects Sales Videos Projects Videos Marketing Videos 52 | Culture Important Messages Talks and Presentations Plan Brainstorm 53 | Explanations Explore New Ideas Journal Entries React to News and 54 | Events Share Knowledge Share Ideas Collab 55 | 56 |
57 | 58 | 72 | 73 | 74 |
75 |
76 | ); 77 | }; 78 | 79 | export default SixthSection; 80 | -------------------------------------------------------------------------------- /app/enterprise/_components/third-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | const ThirdSection = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Communicate faster with async video 13 |
14 |
15 | Async video helps organizations communicate faster & build culture 16 |
17 |
18 |
19 | 20 |
21 | image 33 | 34 |
35 |
36 | 37 |
38 |
39 |
40 | Save time 41 |
42 |
43 | Teams can communicate more efficiently without typing long emails, 44 | scheduling meetings, or trying to work across time zones. 45 | 46 |
47 |
48 | 49 |
50 |
51 | Communicate clearly 52 |
53 |
54 | Async video captures context, tone, and personality in detail. 55 | Distributed teams can preserve the true meaning of their message. 56 | 57 |
58 |
59 | 60 |
61 |
62 | Deepen culture 63 |
64 |
65 | Make it effortless for anyone in your organization to share ideas, 66 | introduce themselves, 67 | and build community with fellow teammates using async video. 68 | 69 |
70 |
71 | 72 |
73 |
74 |
75 |
76 | ); 77 | }; 78 | 79 | export default ThirdSection; 80 | -------------------------------------------------------------------------------- /app/enterprise/page.tsx: -------------------------------------------------------------------------------- 1 | import Navbar from "@/components/ui/navbar/navbar"; 2 | import FirstSection from "./_components/first-section"; 3 | import SecondSection from "./_components/second-section"; 4 | import ThirdSection from "./_components/third-section"; 5 | import FourthSection from "./_components/fourth-section"; 6 | import Quote from "./_components/quote"; 7 | import FifthSection from "./_components/fifth-section"; 8 | import SixthSection from "./_components/sixth-section"; 9 | import SeventhSection from "./_components/seventh-section"; 10 | import EighthSection from "./_components/eighth-section"; 11 | import NinthSection from "./_components/ninth-section"; 12 | import TenthSection from "./_components/testimonials"; 13 | import BottomCard from "@/components/ui/bottom-card"; 14 | import BottomSection from "@/components/ui/bottom-section"; 15 | import Footer from "@/components/ui/footer"; 16 | import BottomCardBlue from "./_components/bottom-card-blue"; 17 | 18 | 19 | const Enterprise = () => { 20 | return ( 21 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
); 46 | } 47 | 48 | export default Enterprise; -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iggy-tech/loom-clone-video/140e21b60e0944f3978f5e8bb373bda7ce91a590/app/favicon.ico -------------------------------------------------------------------------------- /app/free/page.tsx: -------------------------------------------------------------------------------- 1 | 2 | import Link from "next/link"; 3 | import Image from "next/image"; 4 | 5 | const Free = () => { 6 | return ( 7 |
8 |
11 |
12 | 13 | 14 | 15 | logo 22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 |
30 | Record your first Bird in Seconds 31 |
32 |
33 |
34 | logo 44 |
45 | Sign in with Google 46 |
47 | 48 |
49 | 50 |
51 |
52 |
OR
53 |
54 |
55 | 56 |
57 |
Work Email
58 | 76 | 77 | 78 |
79 | 80 |
92 | Continue 93 |
94 | 95 |
96 | By signing up, you ackowledge that you have read 97 | and agree to Bird's Terms of Service and Privacy Policy. 98 |
99 | 100 |
101 | 102 |
103 | 104 |
105 | 106 |
107 | 108 | 109 | 110 |
); 111 | } 112 | 113 | export default Free; -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | html, 4 | body, 5 | :root { 6 | height: 100%; 7 | overflow-x: hidden 8 | } 9 | 10 | 11 | @tailwind base; 12 | @tailwind components; 13 | @tailwind utilities; 14 | 15 | @layer base { 16 | :root { 17 | --background: 0 0% 100%; 18 | --foreground: 222.2 84% 4.9%; 19 | 20 | --card: 0 0% 100%; 21 | --card-foreground: 222.2 84% 4.9%; 22 | 23 | --popover: 0 0% 100%; 24 | --popover-foreground: 222.2 84% 4.9%; 25 | 26 | --primary: 222.2 47.4% 11.2%; 27 | --primary-foreground: 210 40% 98%; 28 | 29 | --secondary: 210 40% 96.1%; 30 | --secondary-foreground: 222.2 47.4% 11.2%; 31 | 32 | --muted: 210 40% 96.1%; 33 | --muted-foreground: 215.4 16.3% 46.9%; 34 | 35 | --accent: 210 40% 96.1%; 36 | --accent-foreground: 222.2 47.4% 11.2%; 37 | 38 | --destructive: 0 84.2% 60.2%; 39 | --destructive-foreground: 210 40% 98%; 40 | 41 | --border: 214.3 31.8% 91.4%; 42 | --input: 214.3 31.8% 91.4%; 43 | --ring: 222.2 84% 4.9%; 44 | 45 | --radius: 0.5rem; 46 | } 47 | 48 | .dark { 49 | --background: 222.2 84% 4.9%; 50 | --foreground: 210 40% 98%; 51 | 52 | --card: 222.2 84% 4.9%; 53 | --card-foreground: 210 40% 98%; 54 | 55 | --popover: 222.2 84% 4.9%; 56 | --popover-foreground: 210 40% 98%; 57 | 58 | --primary: 210 40% 98%; 59 | --primary-foreground: 222.2 47.4% 11.2%; 60 | 61 | --secondary: 217.2 32.6% 17.5%; 62 | --secondary-foreground: 210 40% 98%; 63 | 64 | --muted: 217.2 32.6% 17.5%; 65 | --muted-foreground: 215 20.2% 65.1%; 66 | 67 | --accent: 217.2 32.6% 17.5%; 68 | --accent-foreground: 210 40% 98%; 69 | 70 | --destructive: 0 62.8% 30.6%; 71 | --destructive-foreground: 210 40% 98%; 72 | 73 | --border: 217.2 32.6% 17.5%; 74 | --input: 217.2 32.6% 17.5%; 75 | --ring: 212.7 26.8% 83.9%; 76 | } 77 | } 78 | 79 | @layer base { 80 | * { 81 | @apply border-border; 82 | } 83 | body { 84 | @apply bg-background text-foreground; 85 | } 86 | } -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next' 2 | import { Outfit } from 'next/font/google' 3 | import './globals.css' 4 | 5 | const font = Outfit({ subsets: ['latin'] }) 6 | 7 | export const metadata: Metadata = { 8 | title: 'Create Next App', 9 | description: 'Generated by create next app', 10 | } 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: { 15 | children: React.ReactNode 16 | }) { 17 | return ( 18 | 19 | {children} 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /app/pricing/page.tsx: -------------------------------------------------------------------------------- 1 | import Navbar from "@/components/ui/navbar/navbar"; 2 | import FirstSection from "./_components/first-section"; 3 | import SecondSection from "../(landing-page)/_components/second-section"; 4 | import Testimonials from "../bird-ai/_components/testimonials"; 5 | import BottomCard from "@/components/ui/bottom-card"; 6 | import BottomSection from "@/components/ui/bottom-section"; 7 | import Footer from "@/components/ui/footer"; 8 | 9 | const Pricing = () => { 10 | return ( 11 |
12 | 13 | 14 | 15 | 16 | 17 |
); 20 | } 21 | 22 | export default Pricing; -------------------------------------------------------------------------------- /app/sales/_components/features.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Lock, 3 | MessageCircle, 4 | MousePointerSquare, 5 | PencilLine, 6 | } from "lucide-react"; 7 | 8 | const Features = () => { 9 | return ( 10 |
11 |
12 | Features 13 |
14 |
15 | 16 | 17 |
18 |
19 |
20 | 21 |
22 |
Calls - to - action
23 |
24 |
25 | Add links to design files and other resources for viewers to 26 | reference 27 |
28 |
29 | 30 | 31 |
32 |
33 |
34 | 35 |
36 |
Drawing Tools
37 |
38 |
39 | Emphasize mouse clicks and draw on your screen as you record 40 |
41 |
42 | 43 | 44 |
45 |
46 |
47 | 48 |
49 |
Rich reactions
50 |
51 |
52 | Add links to design files and other resources for viewers to 53 | reference 54 |
55 |
56 | 57 | 58 |
59 |
60 |
61 | 62 |
63 |
Content security
64 |
65 |
66 | Restrict viewing by email address and add password protection. 67 |
68 |
69 | 70 | 71 |
72 |
73 | ); 74 | }; 75 | 76 | export default Features; 77 | -------------------------------------------------------------------------------- /app/sales/_components/fifth-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | const FifthSection = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 | image 23 |
24 | 25 |
26 |
27 |
28 | Get your message across 29 |
30 |
31 | Bird helps you develop and build close connections to your 32 | team so you can do your best work together. 33 |
34 |
35 | 36 |
37 |
38 | Share ideas in high resolution 39 |
40 |
41 | Speak to your vision while sharing your design as you record 42 | your screen, camera, or both with Bird. 43 | 44 |
45 | 46 |
47 | 48 |
49 |
50 | Add context to your concept 51 |
52 |
53 | Use video to document the thinking behind your ideas 54 | and loop in the right people at the right time, with the right context. 55 | 56 |
57 | 58 |
59 | 60 | 61 |
62 |
63 |
64 |
65 |
66 |
67 | ); 68 | }; 69 | 70 | export default FifthSection; 71 | -------------------------------------------------------------------------------- /app/sales/_components/first-section.tsx: -------------------------------------------------------------------------------- 1 | import { Check, Download } from "lucide-react"; 2 | 3 | const FirstSection = () => { 4 | return ( 5 |
6 |
7 |
8 | Bird for Team Alignment 9 |
10 |
11 | Move fast and stay connected 12 |
13 |

25 | Use Bird to record asynchronous videos that help your team stay 26 | aligned and move faster. 27 |

28 | 29 |
30 |
31 |
53 |
54 | 55 |
Get bird for free
56 |
57 |
58 |
59 |
60 | 61 |
62 | 78 |
79 | 80 |
81 | Why Teams Align with Bird 82 | 83 |
84 | 85 |
86 |
87 | 88 | 89 |
90 |
91 | 92 |
93 |
To record presentations
94 |
95 | 96 |
97 |
98 | 99 |
100 |
To deliver better feedback
101 |
102 | 103 |
104 |
105 | 106 |
107 |
To share knowledge
108 |
109 | 110 |
111 | 112 |
113 |
114 |
115 | ); 116 | }; 117 | 118 | export default FirstSection; 119 | -------------------------------------------------------------------------------- /app/sales/_components/fourth-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | const FourthSection = () => { 4 | return ( 5 |
6 |
7 |
8 | Accelerate the flow of information 9 | 10 |
11 |

12 | Deliver detailed information up to 2x faster than it takes to present it. 13 | 14 |

15 | 16 |
17 | image 32 | 33 |
34 | 35 |
36 | 37 |
); 38 | } 39 | 40 | export default FourthSection; -------------------------------------------------------------------------------- /app/sales/_components/quote.tsx: -------------------------------------------------------------------------------- 1 | 2 | import Image from "next/image"; 3 | 4 | const Quote = () => { 5 | return ( 6 |
7 |
17 |
18 | logo 27 |
28 |
29 | "Bird allows me to connect more personally with people 30 | without having to do 75 different one-on-one calls, which is just 31 | impossible at scale." 32 |
33 | 34 |
35 | 36 |
37 |
Alex Berman
38 |
Chief Marketing Officer
39 |
40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 |
); 48 | } 49 | 50 | export default Quote; -------------------------------------------------------------------------------- /app/sales/_components/slider.tsx: -------------------------------------------------------------------------------- 1 | import SliderOne from "@/app/(landing-page)/_components/slider/_components/slider-one"; 2 | 3 | import { Download } from "lucide-react"; 4 | 5 | const Slider = () => { 6 | return ( 7 |
8 |
9 | More than 21 million people across 120,000 companies choose Bird 10 |
11 | 12 |
13 |
35 |
36 | 37 |
Get Bird for free
38 |
39 |
40 |
41 | 42 | 43 |
44 | ); 45 | }; 46 | 47 | export default Slider; 48 | -------------------------------------------------------------------------------- /app/sales/_components/third-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | 4 | const ThirdSection = () => { 5 | return ( 6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Get your message across 14 |
15 |
16 | Keep everyone on track and in the loop using streamlined 17 | communication that scales. 18 |
19 |
20 | 21 |
22 |
23 | Share ideas in high resolution 24 |
25 |
26 | Speak to your vision while sharing your design as you record 27 | your screen, camera or both with Bird. 28 |
29 |
30 | 31 |
32 |
33 | Add context to your concept 34 |
35 |
36 | Use video to document the thinking behind your ideas and loop 37 | in the right people at the right time, with the right context. 38 |
39 |
40 | 41 |
42 |
43 | Send your video with a link 44 |
45 |
46 | Use Bird's instantly-generated links to share your video in 47 | Slack, Figma, Sketch, and anywhere else your team works. 48 |
49 |
50 |
51 |
52 |
53 | 54 | image 66 | 67 | 68 | 69 |
70 |
71 |
72 |
73 | ); 74 | }; 75 | 76 | export default ThirdSection; 77 | -------------------------------------------------------------------------------- /app/sales/page.tsx: -------------------------------------------------------------------------------- 1 | import Navbar from "@/components/ui/navbar/navbar"; 2 | import FirstSection from "./_components/first-section"; 3 | import SecondSection from "./_components/second-section"; 4 | import ThirdSection from "./_components/third-section"; 5 | import FourthSection from "./_components/fourth-section"; 6 | import Features from "./_components/features"; 7 | import FifthSection from "./_components/fifth-section"; 8 | import Quote from "./_components/quote"; 9 | import Explore from "./_components/explore"; 10 | import Slider from "./_components/slider"; 11 | import TenthSection from "../(landing-page)/_components/tenth-section"; 12 | import BottomCard from "@/components/ui/bottom-card"; 13 | import BottomSection from "@/components/ui/bottom-section"; 14 | import Footer from "@/components/ui/footer"; 15 | 16 | const TeamAlignment = () => { 17 | return ( 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
40 | 41 | ); 42 | } 43 | 44 | export default TeamAlignment; -------------------------------------------------------------------------------- /app/screen-recorder/_components/faqs.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Accordion, 3 | AccordionContent, 4 | AccordionItem, 5 | AccordionTrigger 6 | } from '@/components/ui/accordion' 7 | 8 | const FAQS = () => { 9 | return ( 10 |
11 |
12 | Screen Recorder FAQS 13 |
14 | 18 | 20 | How do I purchase Bird ? 21 | 22 | It is possible to purchase bird. Click here to learn more. 23 | 24 | 25 | 26 | 28 | How do I purchase Bird ? 29 | 30 | It is possible to purchase bird. Click here to learn more. 31 | 32 | 33 | 34 | 36 | How do I purchase Bird ? 37 | 38 | It is possible to purchase bird. Click here to learn more. 39 | 40 | 41 | 42 | 44 | How do I purchase Bird ? 45 | 46 | It is possible to purchase bird. Click here to learn more. 47 | 48 | 49 | 50 | 52 | How do I purchase Bird ? 53 | 54 | It is possible to purchase bird. Click here to learn more. 55 | 56 | 57 | 58 |
); 59 | } 60 | 61 | export default FAQS; -------------------------------------------------------------------------------- /app/screen-recorder/_components/feedback-section.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { emojisplosions } from 'emojisplosion' 4 | 5 | const FeedbackSection = () => { 6 | 7 | const handleEmojiClick = () => { 8 | const { cancel } = emojisplosions({ 9 | emojis: ["👍"] 10 | }) 11 | setTimeout(cancel, 500) 12 | } 13 | 14 | const handleEmojiClick2 = () => { 15 | const { cancel } = emojisplosions({ 16 | emojis: ["😁"] 17 | }) 18 | setTimeout(cancel, 500) 19 | } 20 | 21 | const handleEmojiClick3 = () => { 22 | const { cancel } = emojisplosions({ 23 | emojis: ["😍"] 24 | }) 25 | setTimeout(cancel, 500) 26 | } 27 | 28 | const handleEmojiClick4 = () => { 29 | const { cancel } = emojisplosions({ 30 | emojis: ["🤩"] 31 | }) 32 | setTimeout(cancel, 500) 33 | } 34 | const handleEmojiClick5 = () => { 35 | const { cancel } = emojisplosions({ 36 | emojis: ["🚀"] 37 | }) 38 | setTimeout(cancel, 500) 39 | } 40 | 41 | const handleEmojiClick6 = () => { 42 | const { cancel } = emojisplosions({ 43 | emojis: ["😡"] 44 | }) 45 | setTimeout(cancel, 500) 46 | } 47 | 48 | 49 | return ( 50 |
51 |
52 |
53 |
54 | Provide Fun Feedback 55 |
56 |
57 | Offer feedback on a project using a quick video commentary or create a 58 | one-on-one session for personal attention and encouragement from anywhere. 59 |
60 |
61 | 62 |
63 |
64 |
65 | 👍 66 |
67 |
68 | 69 |
70 |
71 | 😁 72 |
73 |
74 | 75 |
76 |
77 | 😍 78 |
79 |
80 | 81 |
82 |
83 | 🤩 84 |
85 |
86 | 87 |
88 |
89 | 🚀 90 |
91 |
92 | 93 |
94 |
95 | 😡 96 |
97 |
98 |
99 |
100 |
); 101 | } 102 | 103 | export default FeedbackSection; -------------------------------------------------------------------------------- /app/screen-recorder/_components/first-section.tsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { Button } from "@/components/ui/button"; 4 | import { Chrome, Download } from "lucide-react"; 5 | 6 | const FirstSection = () => { 7 | return ( 8 |
9 |
10 |
19 | The Bird Free Screen Recorder 20 |
21 |

30 | Create, edit, notate, and share videos with anyone 31 | using the best screen recorder available. Bird lets 32 | anyone create and share virtually any message quickly and professionally. 33 | 34 |

35 | 36 |
37 | 57 | 58 | 81 |
82 | 83 |
84 | 97 |
98 | 99 |
100 |
); 101 | } 102 | 103 | export default FirstSection; -------------------------------------------------------------------------------- /app/screen-recorder/_components/phone-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | import { Button } from "@/components/ui/button"; 4 | 5 | const PhoneSection = () => { 6 | return ( 7 |
8 |
9 | 10 | image 23 |
24 |
25 | Bird for iOS and Android 26 |
27 |
28 | Bird is available for iOS devices (iOS version 15+), 29 | and Android devices (8.0 Oreo and above). On both devices, 30 | you can easily record your screen and voice. 31 | Simply download the Bird screen recorder app for your device. 32 |
33 | 34 | 55 | 56 |
57 | 58 | 59 |
60 | 61 |
); 62 | } 63 | 64 | export default PhoneSection; -------------------------------------------------------------------------------- /app/screen-recorder/_components/third-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | const ThirdSection = () => { 4 | return ( 5 |
6 |
7 | Capture edit and share 8 |
9 | 10 |
11 |
12 |
13 |
14 | image 21 |
22 | 23 |
24 |
25 |
26 |
27 | Filler word removal 28 |
29 |
30 | From Google Workspace to Slack, Bird videos seamlessly 31 | integrate with hundreds of tools you use every day. 32 |
33 |
34 |
35 |
36 |
37 | 38 |
39 |
40 |
41 |
42 |
43 | Silence removal 44 |
45 | 46 |
47 | From Google Workspace to Slack, Bird videos seamlessly 48 | integrate with hundreds of tools you use every day. 49 |
50 |
51 |
52 |
53 | 54 |
55 | image 62 |
63 |
64 |
65 |
66 |
67 | ); 68 | }; 69 | 70 | export default ThirdSection; 71 | -------------------------------------------------------------------------------- /app/screen-recorder/page.tsx: -------------------------------------------------------------------------------- 1 | import Navbar from "@/components/ui/navbar/navbar"; 2 | import FirstSection from "./_components/first-section"; 3 | import SecondSection from "./_components/second-section"; 4 | import ThirdSection from "./_components/third-section"; 5 | import FeedbackSection from "./_components/feedback-section"; 6 | import Slider from "../team-alignment/_components/slider"; 7 | 8 | import Testimonials from "../bird-ai/_components/testimonials"; 9 | import FourthSection from "./_components/fourth-section"; 10 | import FAQS from "./_components/faqs"; 11 | import PhoneSection from "./_components/phone-section"; 12 | import BottomCard from "@/components/ui/bottom-card"; 13 | import BottomSection from "@/components/ui/bottom-section"; 14 | import Footer from "@/components/ui/footer"; 15 | 16 | const ScreenRecorder = () => { 17 | return ( 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
); 34 | } 35 | 36 | export default ScreenRecorder; -------------------------------------------------------------------------------- /app/sign-in/page.tsx: -------------------------------------------------------------------------------- 1 | import Navbar from "@/components/ui/navbar/navbar"; 2 | import FirstSection from "./_components/first-section"; 3 | 4 | const SignIn = () => { 5 | return ( 6 |
7 | 8 | 9 |
); 10 | } 11 | 12 | export default SignIn; -------------------------------------------------------------------------------- /app/team-alignment/_components/features.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Lock, 3 | MessageCircle, 4 | MousePointerSquare, 5 | PencilLine, 6 | } from "lucide-react"; 7 | 8 | const Features = () => { 9 | return ( 10 |
11 |
12 | Features 13 |
14 |
15 | 16 | 17 |
18 |
19 |
20 | 21 |
22 |
Calls - to - action
23 |
24 |
25 | Add links to design files and other resources for viewers to 26 | reference 27 |
28 |
29 | 30 | 31 |
32 |
33 |
34 | 35 |
36 |
Drawing Tools
37 |
38 |
39 | Emphasize mouse clicks and draw on your screen as you record 40 |
41 |
42 | 43 | 44 |
45 |
46 |
47 | 48 |
49 |
Rich reactions
50 |
51 |
52 | Add links to design files and other resources for viewers to 53 | reference 54 |
55 |
56 | 57 | 58 |
59 |
60 |
61 | 62 |
63 |
Content security
64 |
65 |
66 | Restrict viewing by email address and add password protection. 67 |
68 |
69 | 70 | 71 |
72 |
73 | ); 74 | }; 75 | 76 | export default Features; 77 | -------------------------------------------------------------------------------- /app/team-alignment/_components/fifth-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | const FifthSection = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 | image 23 |
24 | 25 |
26 |
27 |
28 | Get your message across 29 |
30 |
31 | Bird helps you develop and build close connections to your 32 | team so you can do your best work together. 33 |
34 |
35 | 36 |
37 |
38 | Share ideas in high resolution 39 |
40 |
41 | Speak to your vision while sharing your design as you record 42 | your screen, camera, or both with Bird. 43 | 44 |
45 | 46 |
47 | 48 |
49 |
50 | Add context to your concept 51 |
52 |
53 | Use video to document the thinking behind your ideas 54 | and loop in the right people at the right time, with the right context. 55 | 56 |
57 | 58 |
59 | 60 | 61 |
62 |
63 |
64 |
65 |
66 |
67 | ); 68 | }; 69 | 70 | export default FifthSection; 71 | -------------------------------------------------------------------------------- /app/team-alignment/_components/fourth-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | const FourthSection = () => { 4 | return ( 5 |
6 |
7 |
8 | Accelerate the flow of information 9 | 10 |
11 |

12 | Deliver detailed information up to 2x faster than it takes to present it. 13 | 14 |

15 | 16 |
17 | image 32 | 33 |
34 | 35 |
36 | 37 |
); 38 | } 39 | 40 | export default FourthSection; -------------------------------------------------------------------------------- /app/team-alignment/_components/quote.tsx: -------------------------------------------------------------------------------- 1 | 2 | import Image from "next/image"; 3 | 4 | const Quote = () => { 5 | return ( 6 |
7 |
17 |
18 | logo 27 |
28 |
29 | "Bird allows me to connect more personally with people 30 | without having to do 75 different one-on-one calls, which is just 31 | impossible at scale." 32 |
33 | 34 |
35 | 36 |
37 |
Alex Berman
38 |
Chief Marketing Officer
39 |
40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 |
); 48 | } 49 | 50 | export default Quote; -------------------------------------------------------------------------------- /app/team-alignment/_components/slider.tsx: -------------------------------------------------------------------------------- 1 | import SliderOne from "@/app/(landing-page)/_components/slider/_components/slider-one"; 2 | 3 | import { Download } from "lucide-react"; 4 | 5 | const Slider = () => { 6 | return ( 7 |
8 |
9 | More than 21 million people across 120,000 companies choose Bird 10 |
11 | 12 |
13 |
35 |
36 | 37 |
Get Bird for free
38 |
39 |
40 |
41 | 42 | 43 |
44 | ); 45 | }; 46 | 47 | export default Slider; 48 | -------------------------------------------------------------------------------- /app/team-alignment/_components/third-section.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | 4 | const ThirdSection = () => { 5 | return ( 6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Get your message across 14 |
15 |
16 | Keep everyone on track and in the loop using streamlined 17 | communication that scales. 18 |
19 |
20 | 21 |
22 |
23 | Share ideas in high resolution 24 |
25 |
26 | Speak to your vision while sharing your design as you record 27 | your screen, camera or both with Bird. 28 |
29 |
30 | 31 |
32 |
33 | Add context to your concept 34 |
35 |
36 | Use video to document the thinking behind your ideas and loop 37 | in the right people at the right time, with the right context. 38 |
39 |
40 | 41 |
42 |
43 | Send your video with a link 44 |
45 |
46 | Use Bird's instantly-generated links to share your video in 47 | Slack, Figma, Sketch, and anywhere else your team works. 48 |
49 |
50 |
51 |
52 |
53 | 54 | image 66 | 67 | 68 | 69 |
70 |
71 |
72 |
73 | ); 74 | }; 75 | 76 | export default ThirdSection; 77 | -------------------------------------------------------------------------------- /app/team-alignment/page.tsx: -------------------------------------------------------------------------------- 1 | import Navbar from "@/components/ui/navbar/navbar"; 2 | import FirstSection from "./_components/first-section"; 3 | import SecondSection from "./_components/second-section"; 4 | import ThirdSection from "./_components/third-section"; 5 | import FourthSection from "./_components/fourth-section"; 6 | import Features from "./_components/features"; 7 | import FifthSection from "./_components/fifth-section"; 8 | import Quote from "./_components/quote"; 9 | import Explore from "./_components/explore"; 10 | import Slider from "./_components/slider"; 11 | import TenthSection from "../(landing-page)/_components/tenth-section"; 12 | import BottomCard from "@/components/ui/bottom-card"; 13 | import BottomSection from "@/components/ui/bottom-section"; 14 | import Footer from "@/components/ui/footer"; 15 | 16 | const TeamAlignment = () => { 17 | return ( 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
40 | 41 | ); 42 | } 43 | 44 | export default TeamAlignment; -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "app/globals.css", 9 | "baseColor": "slate", 10 | "cssVariables": true 11 | }, 12 | "aliases": { 13 | "components": "@/components", 14 | "utils": "@/lib/utils" 15 | } 16 | } -------------------------------------------------------------------------------- /components/ui/accordion.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as AccordionPrimitive from "@radix-ui/react-accordion" 5 | import { ChevronDown } from "lucide-react" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const Accordion = AccordionPrimitive.Root 10 | 11 | const AccordionItem = React.forwardRef< 12 | React.ElementRef, 13 | React.ComponentPropsWithoutRef 14 | >(({ className, ...props }, ref) => ( 15 | 20 | )) 21 | AccordionItem.displayName = "AccordionItem" 22 | 23 | const AccordionTrigger = React.forwardRef< 24 | React.ElementRef, 25 | React.ComponentPropsWithoutRef 26 | >(({ className, children, ...props }, ref) => ( 27 | 28 | svg]:rotate-180", 32 | className 33 | )} 34 | {...props} 35 | > 36 | {children} 37 | 38 | 39 | 40 | )) 41 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName 42 | 43 | const AccordionContent = React.forwardRef< 44 | React.ElementRef, 45 | React.ComponentPropsWithoutRef 46 | >(({ className, children, ...props }, ref) => ( 47 | 52 |
{children}
53 | 54 | )) 55 | 56 | AccordionContent.displayName = AccordionPrimitive.Content.displayName 57 | 58 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } 59 | -------------------------------------------------------------------------------- /components/ui/bottom-card.tsx: -------------------------------------------------------------------------------- 1 | import { Download } from "lucide-react"; 2 | 3 | const BottomCard = () => { 4 | return ( 5 |
6 |
7 |
8 | Bird works wherever you do. 9 |
10 |
11 |
32 |
33 | 34 |
Get bird for free
35 |
36 |
37 |
38 |
39 |
40 | ); 41 | }; 42 | 43 | export default BottomCard; 44 | -------------------------------------------------------------------------------- /components/ui/bottom-section.tsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | const BottomSection = () => { 4 | return (
5 |
6 |
7 |
8 |
PRODUCT
9 |
10 | 11 |
Home
12 |
Product
13 |
What's New
14 |
Pricing
15 |
Premium
16 | 17 |
18 |
19 | 20 |
21 |
USE CASES
22 |
23 | 24 |
Company
25 |
Leadership
26 | 27 |
Customers
28 |
Diversity
29 | 30 |
31 | 32 |
33 | 34 | 35 |
36 |
FOR BUSINESS
37 |
38 | 39 |
Project Management
40 |
Goal Management
41 | 42 |
Increase Productivity
43 |
Work Management
44 |
Project Planning
45 | 46 |
47 | 48 |
49 | 50 |
51 |
DOWNLOADS
52 |
53 | 54 |
Help
55 |
Forum
56 | 57 |
Support
58 |
Work Management
59 |
Project Planning
60 | 61 |
62 | 63 |
64 | 65 |
66 |
RESOURCES
67 |
68 | 69 |
Help
70 |
Forum
71 | 72 |
Support
73 |
Work Management
74 |
Project Planning
75 | 76 |
77 | 78 |
79 | 80 |
81 |
Company
82 |
83 | 84 |
Help
85 |
Forum
86 | 87 |
Support
88 |
Work Management
89 |
Project Planning
90 | 91 |
92 | 93 |
94 | 95 | 96 | 97 | 98 | 99 |
100 | 101 |
102 |
); 103 | } 104 | 105 | export default BottomSection; -------------------------------------------------------------------------------- /components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", 9 | { 10 | variants: { 11 | variant: { 12 | default: "bg-primary text-primary-foreground ", 13 | destructive: 14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90", 15 | outline: 16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground", 17 | secondary: 18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80", 19 | ghost: "hover:bg-accent hover:text-accent-foreground", 20 | link: "text-primary underline-offset-4 hover:underline", 21 | }, 22 | size: { 23 | default: "h-10 px-4 py-2", 24 | sm: "h-9 rounded-md px-3", 25 | lg: "h-11 rounded-md px-8", 26 | icon: "h-10 w-10", 27 | }, 28 | }, 29 | defaultVariants: { 30 | variant: "default", 31 | size: "default", 32 | }, 33 | } 34 | ) 35 | 36 | export interface ButtonProps 37 | extends React.ButtonHTMLAttributes, 38 | VariantProps { 39 | asChild?: boolean 40 | } 41 | 42 | const Button = React.forwardRef( 43 | ({ className, variant, size, asChild = false, ...props }, ref) => { 44 | const Comp = asChild ? Slot : "button" 45 | return ( 46 | 51 | ) 52 | } 53 | ) 54 | Button.displayName = "Button" 55 | 56 | export { Button, buttonVariants } 57 | -------------------------------------------------------------------------------- /components/ui/checkbox.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox" 5 | import { Check } from "lucide-react" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const Checkbox = React.forwardRef< 10 | React.ElementRef, 11 | React.ComponentPropsWithoutRef 12 | >(({ className, ...props }, ref) => ( 13 | 21 | 24 | 25 | 26 | 27 | )) 28 | Checkbox.displayName = CheckboxPrimitive.Root.displayName 29 | 30 | export { Checkbox } 31 | -------------------------------------------------------------------------------- /components/ui/footer.tsx: -------------------------------------------------------------------------------- 1 | import { Facebook, Globe, Instagram, Linkedin, Twitter, Youtube } from "lucide-react"; 2 | 3 | const Footer = () => { 4 | return ( 5 | 6 |
7 |
8 |
9 |
10 | ©2024 Bird, Inc. All rights reserved. 11 |
12 |
13 | 14 |
15 |
16 | Terms and Conditions 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 | export default Footer; -------------------------------------------------------------------------------- /components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface InputProps 6 | extends React.InputHTMLAttributes {} 7 | 8 | const Input = React.forwardRef( 9 | ({ className, type, ...props }, ref) => { 10 | return ( 11 | 20 | ) 21 | } 22 | ) 23 | Input.displayName = "Input" 24 | 25 | export { Input } 26 | -------------------------------------------------------------------------------- /components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | import { cva, type VariantProps } from "class-variance-authority" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const labelVariants = cva( 10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" 11 | ) 12 | 13 | const Label = React.forwardRef< 14 | React.ElementRef, 15 | React.ComponentPropsWithoutRef & 16 | VariantProps 17 | >(({ className, ...props }, ref) => ( 18 | 23 | )) 24 | Label.displayName = LabelPrimitive.Root.displayName 25 | 26 | export { Label } 27 | -------------------------------------------------------------------------------- /components/ui/navbar/_components/action-buttons.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React, { useState } from "react"; 4 | 5 | import { Button } from "@/components/ui/button"; 6 | 7 | import { X, AlignJustify } from "lucide-react"; 8 | import Link from "next/link"; 9 | import DropdownMenu from "./drop-down-menu"; 10 | 11 | const ActionButtons = () => { 12 | 13 | const [isDropdownVisible, setDropdownVisible] = useState(false); 14 | 15 | const toggleDropdown = () => { 16 | setDropdownVisible(!isDropdownVisible); 17 | } 18 | 19 | const closeDropdown = () => { 20 | setDropdownVisible(false); 21 | } 22 | 23 | 24 | 25 | return ( 26 |
36 |
37 | 46 |
Pricing
47 | 48 | 49 | 58 |
Sign In
59 | 60 | 61 | 62 |
63 | 64 |
65 | 66 | 67 | 87 | 88 | 89 | 109 | 110 | 111 |
112 | 113 | {isDropdownVisible && ( 114 |
122 | 123 |
124 | )} 125 | {!isDropdownVisible && ( 126 |
129 | 130 | 131 |
132 | )} 133 | 134 | {isDropdownVisible && } 135 | 136 | 137 |
138 | ); 139 | }; 140 | 141 | export default ActionButtons; 142 | -------------------------------------------------------------------------------- /components/ui/navbar/_components/content-menu.tsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import Link from 'next/link'; 4 | 5 | 6 | interface ContentMenuProps { 7 | options: { label: string; emoji: React.ReactElement; href: string }[]; 8 | } 9 | 10 | 11 | const ContentMenu : React.FC = ({options}) => { 12 | return ( 13 | 14 |
29 |
    30 | {options.map((option, index) => ( 31 | 32 |
    33 |
    34 |
    {option.emoji}
    35 |
    {option.label}
    36 | 37 |
    38 | 39 |
    40 | 41 | 42 | ))} 43 |
44 |
); 45 | } 46 | 47 | export default ContentMenu; -------------------------------------------------------------------------------- /components/ui/navbar/_components/logo.tsx: -------------------------------------------------------------------------------- 1 | 2 | import Image from "next/image"; 3 | import Link from "next/link"; 4 | 5 | const Logo = () => { 6 | return ( 7 |
8 | 9 | logo 16 | 17 | 18 | 19 |
); 20 | } 21 | 22 | export default Logo; -------------------------------------------------------------------------------- /components/ui/navbar/navbar.tsx: -------------------------------------------------------------------------------- 1 | import ActionButtons from "./_components/action-buttons"; 2 | import Logo from "./_components/logo"; 3 | import { NavigationMenuBar } from "./_components/menu"; 4 | 5 | const Navbar = () => { 6 | return ( 7 |
21 |
26 |
27 | 28 |
29 |
30 | 31 |
32 | 33 | 34 | 35 | 36 |
37 | 38 |
39 | ); 40 | }; 41 | 42 | export default Navbar; 43 | -------------------------------------------------------------------------------- /components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface TextareaProps 6 | extends React.TextareaHTMLAttributes {} 7 | 8 | const Textarea = React.forwardRef( 9 | ({ className, ...props }, ref) => { 10 | return ( 11 |