27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/src/content/blog/oguz-blog-test.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Create Menu with Headless UI
3 | description: Learn how to build menu component with Vue.js and Headless UI
4 | author: Oguz Ergul
5 | cover: https://i.ytimg.com/vi/HIJDZxwcPUw/maxresdefault.jpg
6 | avatar: https://pbs.twimg.com/profile_images/1524303338304679937/yd_58miQ_400x400.jpg
7 | date: '22 Aug 2022'
8 | category: Engineering
9 | tags:
10 | - Vue.js
11 | - Headless UI
12 | - Tailwind CSS
13 | content:
14 | - name: Introduction
15 | slug: introduction
16 | - name: Software and tools
17 | slug: software-and-tools
18 | - name: Other resources
19 | slug: other-resources
20 | - name: Conclusion
21 | slug: conclusion
22 | ---
23 |
24 |
25 | ## Introduction
26 |
27 | Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien varius id.
28 |
29 | Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis fusce augue enim. Quis at habitant diam at. Suscipit tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie aliquet sodales id est ac volutpat.
30 |
31 | Dolor enim eu tortor urna sed duis nulla. Aliquam vestibulum, nulla odio nisl vitae. In aliquet pellentesque aenean hac vestibulum turpis mi bibendum diam. Tempor integer aliquam in vitae malesuada fringilla.
32 |
33 | Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur convallis risus. Sed condimentum enim dignissim adipiscing faucibus consequat, urna. Viverra purus et erat auctor aliquam. Risus, volutpat vulputate posuere purus sit congue convallis aliquet. Arcu id augue ut feugiat donec porttitor neque. Mauris, neque ultricies eu vestibulum, bibendum quam lorem id. Dolor lacus, eget nunc lectus in tellus, pharetra, porttitor.
34 |
35 | Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris id. Non pellentesque congue eget consectetur turpis. Sapien, dictum molestie sem tempor. Diam elit, orci, tincidunt aenean tempus. Quis velit eget ut tortor tellus. Sed vel, congue felis elit erat nam nibh orci.
36 |
37 |
38 | ```jsx {3,5} showLineNumbers
39 | import React from 'react'
40 |
41 | const MyComponent = () => {
42 | return (
43 |
44 |
My Component
45 |
My component is awesome
46 |
47 | )
48 | }
49 | ```
50 |
51 | > In a world older and more complete than ours they move finished and complete, gifted with extensions of the senses we have lost or never attained, living by voices we shall never hear.
52 |
53 | — Olivia Rhye, Product Designer
54 |
55 | ## Software and tools
56 |
57 | Pharetra morbi libero id aliquam elit massa integer tellus. Quis felis aliquam ullamcorper porttitor. Pulvinar ullamcorper sit dictumst ut eget a, elementum eu. Maecenas est morbi mattis id in ac pellentesque ac.
58 |
59 | ## Other resources
60 |
61 | Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.
62 |
63 |
64 | 1. Lectus id duis vitae porttitor enim [gravida morbi](https://duckduckgo.com).
65 | 2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.
66 | 3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.
67 |
68 |
--------------------------------------------------------------------------------
/src/data/faq.ts:
--------------------------------------------------------------------------------
1 | import type { Faq } from 'types';
2 |
3 | export const FaqList: Faq[] = [
4 | {
5 | id: 1,
6 | title: 'Is there a free trial available?',
7 | description:
8 | 'Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.'
9 | },
10 | {
11 | id: 2,
12 | title: 'Can I change my plan later?',
13 | description:
14 | 'Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.'
15 | },
16 | {
17 | id: 3,
18 | title: 'What is your cancellation policy?',
19 | description:
20 | 'Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.'
21 | },
22 | {
23 | id: 4,
24 | title: 'Can other info be added to an invoice?',
25 | description:
26 | 'Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.'
27 | },
28 | {
29 | id: 5,
30 | title: 'How does billing work?',
31 | description:
32 | 'Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.'
33 | },
34 | {
35 | id: 6,
36 | title: 'How do I change my account email?',
37 | description:
38 | 'Yes, you can try us for free for 30 days. If you want, we’ll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.'
39 | }
40 | ];
41 |
--------------------------------------------------------------------------------
/src/data/features.ts:
--------------------------------------------------------------------------------
1 | import {
2 | BarChart2,
3 | Command,
4 | Mail,
5 | MessageCircle,
6 | Smile,
7 | Zap
8 | } from 'react-feather';
9 | import type { Feature } from 'types';
10 |
11 | const Features: Feature[] = [
12 | {
13 | id: 1,
14 | title: 'Soru Cevap',
15 | description:
16 | 'Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.',
17 | icon: Mail
18 | },
19 | {
20 | id: 2,
21 | title: 'Gönüllülük',
22 | description:
23 | 'An all-in-one customer service platform that helps you balance everything your customers need to be happy.',
24 | icon: Zap
25 | },
26 | {
27 | id: 3,
28 | title: 'Açık Kaynak',
29 | description:
30 | 'An all-in-one customer service platform that helps you balance everything your customers need to be happy.',
31 | icon: BarChart2
32 | },
33 | {
34 | id: 4,
35 | title: 'Etkileşim',
36 | description:
37 | 'Measure what matters with Untitled’s easy-to-use reports. You can filter, export, and drilldown on the data in a couple clicks.',
38 | icon: Smile
39 | },
40 | {
41 | id: 5,
42 | title: 'Deneyim',
43 | description:
44 | 'Solve a problem or close a sale in real-time with chat. If no one is available, customers are seamlessly routed to email without confusion.',
45 | icon: Command
46 | },
47 | {
48 | id: 6,
49 | title: 'Feedback',
50 | description:
51 | 'Explore 100+ integrations that make your day-to-day workflow more efficient and familiar. Plus, our extensive developer tools.',
52 | icon: MessageCircle
53 | }
54 | ];
55 |
56 | export default Features;
57 |
--------------------------------------------------------------------------------
/src/data/navigation.ts:
--------------------------------------------------------------------------------
1 | import { FooterLink, Link } from 'types';
2 |
3 | export const FooterRoutes: FooterLink[] = [
4 | {
5 | id: 1,
6 | section: 'Product',
7 | routes: [
8 | {
9 | id: 1,
10 | name: 'Product',
11 | href: '#'
12 | },
13 | {
14 | id: 2,
15 | name: 'Overview',
16 | href: '#'
17 | },
18 | {
19 | id: 3,
20 | name: 'Features',
21 | href: '#'
22 | },
23 | {
24 | id: 4,
25 | name: 'Solutions',
26 | href: '#'
27 | },
28 | {
29 | id: 5,
30 | name: 'Tutorials',
31 | href: '#'
32 | },
33 | {
34 | id: 6,
35 | name: 'Pricing',
36 | href: '#'
37 | },
38 | {
39 | id: 7,
40 | name: 'Releases',
41 | href: '#'
42 | }
43 | ]
44 | },
45 | {
46 | id: 2,
47 | section: 'Company',
48 | routes: [
49 | {
50 | id: 1,
51 | name: 'About us',
52 | href: '#'
53 | },
54 | {
55 | id: 2,
56 | name: 'Careers',
57 | href: '#'
58 | },
59 | {
60 | id: 3,
61 | name: 'Press',
62 | href: '#'
63 | },
64 | {
65 | id: 4,
66 | name: 'News',
67 | href: '#'
68 | },
69 | {
70 | id: 5,
71 | name: 'Media Kit',
72 | href: '#'
73 | },
74 | {
75 | id: 6,
76 | name: 'Contact',
77 | href: '#'
78 | }
79 | ]
80 | },
81 | {
82 | id: 3,
83 | section: 'Resources',
84 | routes: [
85 | {
86 | id: 1,
87 | name: 'Blog',
88 | href: '#'
89 | },
90 | {
91 | id: 2,
92 | name: 'Newsletter',
93 | href: '#'
94 | },
95 | {
96 | id: 3,
97 | name: 'Events',
98 | href: '#'
99 | },
100 | {
101 | id: 4,
102 | name: 'Help Center',
103 | href: '#'
104 | },
105 | {
106 | id: 5,
107 | name: 'Tutorials',
108 | href: '#'
109 | },
110 | {
111 | id: 6,
112 | name: 'Support',
113 | href: '#'
114 | }
115 | ]
116 | }
117 | ];
118 |
119 | export const HeaderLinks: Link[] = [
120 | {
121 | id: 1,
122 | name: 'FRONTENDSHIP',
123 | accessibleName: 'Anasayfa',
124 | href: '#'
125 | },
126 | {
127 | id: 2,
128 | name: 'Anasayfa',
129 | href: '/'
130 | },
131 | {
132 | id: 3,
133 | name: 'Hakkımızda',
134 | href: '/about'
135 | },
136 | {
137 | id: 4,
138 | name: 'Blog',
139 | href: '/blog'
140 | }
141 | ];
142 |
--------------------------------------------------------------------------------
/src/data/quotes.ts:
--------------------------------------------------------------------------------
1 | import type { Quote } from 'types';
2 |
3 | const Quotes: Quote[] = [
4 | {
5 | id: 1,
6 | content:
7 | 'Untitled has saved us thousands of hours of work and has unlock data insights we never thought possible.',
8 | author: {
9 | name: 'Koray Okumuş',
10 | title: 'UX Designer, Circooles',
11 | avatar: '/avatars/Avatar.png'
12 | }
13 | },
14 | {
15 | id: 2,
16 | content:
17 | 'Untitled has saved us thousands of hours of work and has unlock data insights we never thought possible.',
18 | author: {
19 | name: 'Koray Okumuş',
20 | title: 'UX Designer, Circooles',
21 | avatar: '/avatars/Avatar.png'
22 | }
23 | },
24 | {
25 | id: 3,
26 | content:
27 | 'Untitled has saved us thousands of hours of work and has unlock data insights we never thought possible.',
28 | author: {
29 | name: 'Koray Okumuş',
30 | title: 'UX Designer, Circooles',
31 | avatar: '/avatars/Avatar.png'
32 | }
33 | }
34 | ];
35 |
36 | export default Quotes;
37 |
--------------------------------------------------------------------------------
/src/data/technologies.ts:
--------------------------------------------------------------------------------
1 | import type { Technology } from 'types';
2 |
3 | import {
4 | AngularIcon,
5 | DockerIcon,
6 | FigmaIcon,
7 | GithubIcon,
8 | GitIcon,
9 | HTMLIcon,
10 | JavaScriptIcon,
11 | NodeIcon,
12 | NpmIcon,
13 | ReactIcon,
14 | ReduxIcon,
15 | RemixRunIcon,
16 | TypeScriptIcon,
17 | VisualStudioIcon,
18 | VueIcon,
19 | WebpackIcon
20 | } from '@/assets/icons';
21 |
22 | const Technologies: Technology[] = [
23 | {
24 | id: 1,
25 | icon: ReactIcon,
26 | name: 'React'
27 | },
28 | {
29 | id: 2,
30 | icon: VueIcon,
31 | name: 'Vue'
32 | },
33 | {
34 | id: 3,
35 | icon: JavaScriptIcon,
36 | name: 'JavaScript'
37 | },
38 | {
39 | id: 4,
40 | icon: GithubIcon,
41 | name: 'Github'
42 | },
43 | {
44 | id: 5,
45 | icon: DockerIcon,
46 | name: 'Docker'
47 | },
48 | {
49 | id: 6,
50 | icon: GitIcon,
51 | name: 'Git'
52 | },
53 | {
54 | id: 7,
55 | icon: RemixRunIcon,
56 | name: 'Remix Run'
57 | },
58 | {
59 | id: 8,
60 | icon: HTMLIcon,
61 | name: 'HTML'
62 | },
63 | {
64 | id: 9,
65 | icon: FigmaIcon,
66 | name: 'Figma'
67 | },
68 | {
69 | id: 10,
70 | icon: AngularIcon,
71 | name: 'Angular'
72 | },
73 | {
74 | id: 11,
75 | icon: TypeScriptIcon,
76 | name: 'TypeScript'
77 | },
78 | {
79 | id: 12,
80 | icon: NodeIcon,
81 | name: 'Node'
82 | },
83 | {
84 | id: 13,
85 | icon: VisualStudioIcon,
86 | name: 'Visual Studio'
87 | },
88 | {
89 | id: 14,
90 | icon: ReduxIcon,
91 | name: 'Redux'
92 | },
93 | {
94 | id: 15,
95 | icon: NpmIcon,
96 | name: 'Npm'
97 | },
98 | {
99 | id: 16,
100 | icon: WebpackIcon,
101 | name: 'Webpack'
102 | }
103 | ];
104 |
105 | export default Technologies;
106 |
--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '@/styles/globals.css';
2 |
3 | import { Inter } from '@next/font/google';
4 | import type { AppProps } from 'next/app';
5 |
6 | import { Button, Footer, Header, Input } from '@/components';
7 |
8 | const inter = Inter({
9 | subsets: ['latin'],
10 | variable: '--font-inter'
11 | });
12 |
13 | export default function App({ Component, pageProps }: AppProps) {
14 | return (
15 |
6 |
7 |
8 | The team
9 | Meet the team behind Frontendship
10 |
11 | We’re a small team that loves to create great experiences and make
12 | meaningful connections between builders and customers. Join our
13 | remote ream!
14 |
15 |
16 |
17 |
18 |
19 |
20 |
24 | John Doe
25 | CEO
26 |
27 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. lorem.
28 |
29 |
30 |
31 |