-
Notifications
You must be signed in to change notification settings - Fork 0
/
zigzag.tsx
137 lines (128 loc) · 8.88 KB
/
zigzag.tsx
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
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import Image from 'next/image'
import FeatImage01 from '@/public/images/img1.png'
import FeatImage02 from '@/public/images/img2.png'
import FeatImage03 from '@/public/images/img3.png'
export default function Zigzag() {
return (
<section>
<div className="max-w-6xl mx-auto px-4 sm:px-6">
<div className="py-12 md:py-20 border-t border-gray-800">
{/* Section header */}
<div className="max-w-3xl mx-auto text-center pb-12 md:pb-16">
<div className="inline-flex text-sm font-semibold py-1 px-3 m-2 text-green-600 bg-green-200 rounded-full mb-4">Learn easier, learn better *original slogan btw - cred. Jonathan Maynard*</div>
<h1 className="h2 mb-4">Revolutionizing Learning with Knowlify</h1>
<p className="text-xl text-gray-400">Knowlify is a transformative learning tool designed to revolutionize the way people learn. Our innovative approach has the potential to make a significant impact across various industries. Currently, we are refining our platform for academic use, with plans to extend its capabilities to the professional sector.</p>
</div>
{/* Items */}
<div className="grid gap-20">
{/* 1st item */}
<div className="md:grid md:grid-cols-12 md:gap-6 items-center">
{/* Image */}
<div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-5 lg:col-span-6 mb-8 md:mb-0 md:order-1" data-aos="fade-up">
<Image className="max-w-full mx-auto md:max-w-none h-auto" src={FeatImage01} width={540} height={405} alt="Features 01" />
</div>
{/* Content */}
<div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-7 lg:col-span-6" data-aos="fade-right">
<div className="md:pr-4 lg:pr-12 xl:pr-16">
<div className="font-caveat text-3xl text-purple-600 mb-2">Visual and Auditory Learning</div>
<h3 className="h3 mb-3">Break Down Any Topic</h3>
<p className="text-xl text-gray-400 mb-4">Knowlify uses cutting edge technology and AI to help people learn. The software is able to break down any topic to a base level for users to understand. It does this both visually and auditorially.</p>
<ul className="text-lg text-gray-400 -mb-2">
<li className="flex items-center mb-2">
<svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Visually breaks down topics with diagrams, images, and text</span>
</li>
<li className="flex items-center mb-2">
<svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Provides auditory explanations for better understanding</span>
</li>
<li className="flex items-center">
<svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Interactive whiteboard for user and AI engagement</span>
</li>
</ul>
</div>
</div>
</div>
{/* 2nd item */}
<div className="md:grid md:grid-cols-12 md:gap-6 items-center">
{/* Image */}
<div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-5 lg:col-span-6 mb-8 md:mb-0 rtl" data-aos="fade-up">
<Image className="max-w-full mx-auto md:max-w-none h-auto" src={FeatImage02} width={540} height={405} alt="Features 02" />
</div>
{/* Content */}
<div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-7 lg:col-span-6" data-aos="fade-left">
<div className="md:pl-4 lg:pl-12 xl:pl-16">
<div className="font-caveat text-3xl text-purple-600 mb-2">Dynamic Presentations</div>
<h3 className="h3 mb-3">Engage with AI</h3>
<p className="text-xl text-gray-400 mb-4">Knowlify breaks down topics into presentation slides and explains the content with a virtual voice speaking to the user. Users can interact with the AI by asking questions and requesting deeper explanations.</p>
<ul className="text-lg text-gray-400 -mb-2">
<li className="flex items-center mb-2">
<svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Creates presentation slides with transcript</span>
</li>
<li className="flex items-center mb-2">
<svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Virtual voice explains the content</span>
</li>
<li className="flex items-center">
<svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>AI interacts with users and answers questions</span>
</li>
</ul>
</div>
</div>
</div>
{/* 3rd item */}
<div className="md:grid md:grid-cols-12 md:gap-6 items-center">
{/* Image */}
<div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-5 lg:col-span-6 mb-8 md:mb-0 md:order-1" data-aos="fade-up">
<Image className="max-w-full mx-auto md:max-w-none h-auto" src={FeatImage03} width={540} height={405} alt="Features 03" />
</div>
{/* Content */}
<div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-7 lg:col-span-6" data-aos="fade-right">
<div className="md:pr-4 lg:pr-12 xl:pr-16">
<div className="font-caveat text-3xl text-purple-600 mb-2">Invest in the Future of Learning</div>
<h3 className="h3 mb-3">Open to Investors</h3>
<p className="text-xl text-gray-400 mb-4">We are actively looking for investors to help us bring Knowlify to its full potential.</p>
<ul className="text-lg text-gray-400 -mb-2">
<li className="flex items-center mb-2">
<svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Developed by a dedicated team</span>
</li>
<li className="flex items-center mb-2">
<svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Innovative and learning-focused</span>
</li>
<li className="flex items-center">
<svg className="w-3 h-3 fill-current text-green-500 mr-2 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
</svg>
<span>Open to investors</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
)
}