Skip to content

Commit e4b8b61

Browse files
chaseWilldenchaseWillden
committed
Add features, make more responsive
1 parent 0633c41 commit e4b8b61

File tree

5 files changed

+71
-13
lines changed

5 files changed

+71
-13
lines changed

‎src/app/page.tsx‎

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,67 @@
1+
import { Background } from "@/components/background"
12
import { Nav } from "@/components/nav"
23
import { PromptAnimation } from "@/components/prompt-animation"
34

45
export default function Home() {
56
return (
67
<div className="h-screen w-screen">
7-
<div className="w-[800px] h-[800px] rounded-full bg-blue-200 absolute z-1 -top-10 -left-10"></div>
8-
<div className="w-[800px] h-[800px] rounded-full bg-purple-400 absolute z-1 right-10 top-10"></div>
9-
<div className="w-[1000px] h-[1000px] rounded-full bg-blue-400 absolute z-1 right-20 top-56"></div>
10-
<div className="w-[80%] h-[300px] rounded-full bg-gray-400 absolute z-1 -top-20 left-[10%]"></div>
11-
<div className="w-[800px] h-[800px] rounded-full bg-teal-200 absolute z-1 -left-[10%] -bottom-[20%]"></div>
12-
<div className="fixed z-10 top-0 left-0 right-0 bottom-0 bg-white backdrop-blur-3xl bg-white/80 overflow-y-auto">
8+
<Background />
9+
<div className="fixed z-10 top-0 left-0 right-0 bottom-0 backdrop-blur-3xl bg-white/80 overflow-y-auto">
1310
<Nav />
1411

1512
<section className="flex flex-col items-center justify-center mt-16">
1613
<span className="text-gray-600">
1714
Learn by Learning & Teach by Teaching
1815
</span>
19-
<h1 className="text-[5rem] font-thin -mt-3 sm:text-[5rem] md:text-[7rem] lg:text-[8rem]">
16+
<h1 className="text-[5rem] font-thin -mt-3 sm:text-[5rem] md:text-[7rem] lg:text-[8rem] text-center">
2017
<span className="font-normal">Study</span> Drift
2118
</h1>
2219

2320
<PromptAnimation />
2421
</section>
22+
23+
<section className="mt-16 py-36">
24+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
25+
<div className="text-center mb-12">
26+
<h2 className="text-3xl font-bold text-gray-800">
27+
Why Study Drift?
28+
</h2>
29+
<p className="text-lg text-gray-600">
30+
Explore the powerful features designed to revolutionize online
31+
learning and teaching.
32+
</p>
33+
</div>
34+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
35+
<div className="p-6 bg-white rounded-lg shadow">
36+
<h3 className="text-xl font-semibold text-gray-800 mb-3">
37+
AI-Driven Course Creation
38+
</h3>
39+
<p className="text-gray-600">
40+
Automatically generate courses and quizzes using our
41+
AI-powered tools, saving educators hours of manual work.
42+
</p>
43+
</div>
44+
<div className="p-6 bg-white rounded-lg shadow">
45+
<h3 className="text-xl font-semibold text-gray-800 mb-3">
46+
Customizable Content Management
47+
</h3>
48+
<p className="text-gray-600">
49+
Easily manage lessons, modules, and resources to create a
50+
seamless learning experience for students.
51+
</p>
52+
</div>
53+
<div className="p-6 bg-white rounded-lg shadow">
54+
<h3 className="text-xl font-semibold text-gray-800 mb-3">
55+
Analytics and Reporting
56+
</h3>
57+
<p className="text-gray-600">
58+
Track student progress, identify trends, and improve your
59+
curriculum with our in-depth analytics tools.
60+
</p>
61+
</div>
62+
</div>
63+
</div>
64+
</section>
2565
</div>
2666
</div>
2767
)

‎src/components/background.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const Background = () => {
2+
return (
3+
<>
4+
<div className="w-[800px] h-[800px] rounded-full bg-blue-200 absolute z-1 -top-10 -left-10"></div>
5+
<div className="w-[800px] h-[800px] rounded-full bg-purple-400 absolute z-1 right-10 top-10"></div>
6+
<div className="w-[1000px] h-[1000px] rounded-full bg-blue-400 absolute z-1 right-20 top-56"></div>
7+
<div className="w-[80%] h-[300px] rounded-full bg-gray-400 absolute z-1 -top-20 left-[10%]"></div>
8+
<div className="w-[800px] h-[800px] rounded-full bg-teal-200 absolute z-1 -left-[10%] -bottom-[20%]"></div>
9+
</>
10+
)
11+
}

‎src/components/nav.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const Nav = () => {
3939
<button className="px-4 py-2 rounded-md hover:bg-gray-300 transition-colors hidden lg:flex md:flex sm:hidden">
4040
Sign in
4141
</button>
42-
<button className="bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded-md transition-colors">
42+
<button className="bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded-md transition-colors hidden lg:flex md:flex sm:hidden">
4343
Create Free Account
4444
</button>
4545
<button
@@ -51,7 +51,7 @@ export const Nav = () => {
5151
</div>
5252
</nav>
5353
{open && (
54-
<div className="ml-10 flex gap-8 flex-col justify-center items-center">
54+
<div className="px-8 flex gap-5 flex-col justify-center items-center">
5555
<a href="#" className="group text-black transition duration-300">
5656
K-12
5757
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
@@ -68,6 +68,12 @@ export const Nav = () => {
6868
About Us
6969
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
7070
</a>
71+
<button className="border-slate-800 hover:border-slate-700 border-2 text-black px-4 py-2 rounded-md transition-colors w-full">
72+
Sign in
73+
</button>
74+
<button className="bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded-md transition-colors w-full">
75+
Create Free Account
76+
</button>
7177
</div>
7278
)}
7379
</div>

‎src/components/prompt-animation.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const PromptAnimation = () => {
77

88
return (
99
<div className="flex flex-col items-center w-full px-8">
10-
<div className="mt-8">
10+
<div className="mt-8 w-full">
1111
<PromptSection onComplete={setPromptCompletion} />
1212
</div>
1313
<div className="mt-16 w-full lg:w-[900px] md:w-[700px] sm:w-full flex justify-center">
@@ -38,7 +38,8 @@ const Structure = ({ show }: { show: boolean }) => {
3838
]
3939

4040
return (
41-
<div className="flex flex-col gap-4">
41+
<div className="flex flex-col gap-4 mt-6">
42+
{show && <h3 className="text-xl font-normal">AI Response</h3>}
4243
{mods.map((mod, i) => (
4344
<div
4445
className={`w-full lg:w-[900px] md:w-[700px] sm:w-full py-4 bg-white rounded-md shadow flex items-center pl-4 transition duration-800 ${

‎src/components/prompt.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@ export const PromptSection = ({ onComplete }: Props) => {
5050

5151
return (
5252
<div className="mt-10 w-full flex justify-center items-center">
53-
<div className="bg-white shadow w-[90%] sm:w-[90%] md:w-[700px] lg:w-[800px] h-fit py-4 rounded-full flex items-center px-6">
53+
<div className="bg-white shadow w-[90%] sm:w-[90%] md:w-[700px] lg:w-[800px] h-fit py-4 rounded-lg sm:rounded-lg md:rounded-full lg:rounded-full flex items-center px-6 flex-1 absolute">
5454
{prompt}
55-
<div className="bg-gray-800 h-6 w-1 ml-0.5 rounded animate-pulse duration-100"></div>
55+
<div className="bg-gray-800 h-6 w-1 ml-0.5 rounded animate-pulse duration-100 hidden sm:hidden md:block lg:block"></div>
5656
</div>
5757
</div>
5858
)

0 commit comments

Comments
 (0)