Skip to content

Commit d7f4438

Browse files
chaseWilldenchaseWillden
committed
update more
1 parent 0077b0a commit d7f4438

File tree

6 files changed

+126
-78
lines changed

6 files changed

+126
-78
lines changed

‎package-lock.json‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,19 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@heroicons/react": "^2.1.5",
13+
"next": "14.2.15",
1214
"react": "^18",
13-
"react-dom": "^18",
14-
"next": "14.2.15"
15+
"react-dom": "^18"
1516
},
1617
"devDependencies": {
17-
"typescript": "^5",
1818
"@types/node": "^20",
1919
"@types/react": "^18",
2020
"@types/react-dom": "^18",
21+
"eslint": "^8",
22+
"eslint-config-next": "14.2.15",
2123
"postcss": "^8",
2224
"tailwindcss": "^3.4.1",
23-
"eslint": "^8",
24-
"eslint-config-next": "14.2.15"
25+
"typescript": "^5"
2526
}
2627
}

‎src/app/page.tsx‎

Lines changed: 3 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { Nav } from "@/components/nav"
12
import { PromptAnimation } from "@/components/prompt-animation"
2-
import Image from "next/image"
33

44
export default function Home() {
55
return (
@@ -10,48 +10,13 @@ export default function Home() {
1010
<div className="w-[80%] h-[300px] rounded-full bg-gray-400 absolute z-1 -top-20 left-[10%]"></div>
1111
<div className="w-[800px] h-[800px] rounded-full bg-teal-200 absolute z-1 -left-[10%] -bottom-[20%]"></div>
1212
<div className="fixed z-10 top-0 left-0 right-0 bottom-0 bg-white backdrop-blur-3xl bg-white/80 overflow-y-auto">
13-
<nav className="flex items-center justify-between p-4 mt-4 mx-8">
14-
<div className="flex items-center justify-between">
15-
<Image
16-
src="/logo-trimmed.svg"
17-
alt="Study Drift Logo"
18-
width={60}
19-
height={60}
20-
/>
21-
<div className="ml-10 flex gap-8">
22-
<a href="#" className="group text-black transition duration-300">
23-
K-12
24-
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
25-
</a>
26-
<a href="#" className="group text-black transition duration-300">
27-
Higher Ed
28-
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
29-
</a>
30-
<a href="#" className="group text-black transition duration-300">
31-
Corporate
32-
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
33-
</a>
34-
<a href="#" className="group text-black transition duration-300">
35-
About Us
36-
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
37-
</a>
38-
</div>
39-
</div>
40-
<div className="flex items-center gap-3">
41-
<button className="px-4 py-2 rounded-md hover:bg-gray-300 transition-colors">
42-
Sign in
43-
</button>
44-
<button className="bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded-md transition-colors">
45-
Create Free Account
46-
</button>
47-
</div>
48-
</nav>
13+
<Nav />
4914

5015
<section className="flex flex-col items-center justify-center mt-16">
5116
<span className="text-gray-600">
5217
Learn by Learning & Teach by Teaching
5318
</span>
54-
<h1 className="text-[7rem] font-thin -mt-3">
19+
<h1 className="text-[5rem] font-thin -mt-3 sm:text-[5rem] md:text-[7rem] lg:text-[8rem]">
5520
<span className="font-normal">Study</span> Drift
5621
</h1>
5722

‎src/components/nav.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
"use client"
2+
import { Bars3Icon } from "@heroicons/react/24/solid"
3+
import Image from "next/image"
4+
import { useState } from "react"
5+
6+
export const Nav = () => {
7+
const [open, setOpen] = useState(false)
8+
9+
return (
10+
<div className="flex flex-col">
11+
<nav className="flex items-center justify-between p-4 mt-4 mx-8">
12+
<div className="flex items-center justify-between">
13+
<Image
14+
src="/logo-trimmed.svg"
15+
alt="Study Drift Logo"
16+
width={60}
17+
height={60}
18+
/>
19+
<div className="ml-10 flex gap-8 hidden lg:flex md:flex sm:hidden">
20+
<a href="#" className="group text-black transition duration-300">
21+
K-12
22+
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
23+
</a>
24+
<a href="#" className="group text-black transition duration-300">
25+
Higher Ed
26+
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
27+
</a>
28+
<a href="#" className="group text-black transition duration-300">
29+
Corporate
30+
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
31+
</a>
32+
<a href="#" className="group text-black transition duration-300">
33+
About Us
34+
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
35+
</a>
36+
</div>
37+
</div>
38+
<div className="flex items-center gap-3">
39+
<button className="px-4 py-2 rounded-md hover:bg-gray-300 transition-colors hidden lg:flex md:flex sm:hidden">
40+
Sign in
41+
</button>
42+
<button className="bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded-md transition-colors">
43+
Create Free Account
44+
</button>
45+
<button
46+
className="lg:hidden md:hidden sm:flex items-center justify-center flex ml-3 rounded-md hover:bg-gray-300 transition-colors px-4 py-2"
47+
onClick={() => setOpen(!open)}
48+
>
49+
<Bars3Icon className="w-6 h-6" />
50+
</button>
51+
</div>
52+
</nav>
53+
{open && (
54+
<div className="ml-10 flex gap-8 flex-col justify-center items-center">
55+
<a href="#" className="group text-black transition duration-300">
56+
K-12
57+
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
58+
</a>
59+
<a href="#" className="group text-black transition duration-300">
60+
Higher Ed
61+
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
62+
</a>
63+
<a href="#" className="group text-black transition duration-300">
64+
Corporate
65+
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
66+
</a>
67+
<a href="#" className="group text-black transition duration-300">
68+
About Us
69+
<span className="block max-w-0 group-hover:max-w-full transition-all duration-200 h-0.5 bg-sky-600"></span>
70+
</a>
71+
</div>
72+
)}
73+
</div>
74+
)
75+
}

‎src/components/prompt-animation.tsx‎

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,52 +6,49 @@ export const PromptAnimation = () => {
66
const [promptCompletion, setPromptCompletion] = useState("")
77

88
return (
9-
<div className="flex flex-col items-center w-full">
9+
<div className="flex flex-col items-center w-full px-8">
1010
<div className="mt-8">
1111
<PromptSection onComplete={setPromptCompletion} />
1212
</div>
13-
<div className="h-72 mt-16">
13+
<div className="mt-16 w-full lg:w-[900px] md:w-[700px] sm:w-full flex justify-center">
1414
<Structure show={promptCompletion === "structure"} />
1515
</div>
1616
</div>
1717
)
1818
}
1919

2020
const Structure = ({ show }: { show: boolean }) => {
21+
const mods = [
22+
{
23+
name: "Overview of JavaScript, its history, and its role in web development.",
24+
delay: "delay-0",
25+
},
26+
{
27+
name: "Development Tools",
28+
delay: "delay-500",
29+
},
30+
{
31+
name: "Environment Setup Quiz",
32+
delay: "delay-1000",
33+
},
34+
{
35+
name: "Installing a code editor and setting up a browser for development.",
36+
delay: "delay-[1500ms]",
37+
},
38+
]
39+
2140
return (
2241
<div className="flex flex-col gap-4">
23-
<div
24-
className={`w-[900px] h-12 bg-white rounded-md shadow flex items-center pl-4 transition-all duration-900 ${
25-
show ? "opacity-70 mt-0 shadow-lg" : "opacity-0 mt-10"
26-
}`}
27-
>
28-
<span className="text-lg">
29-
Overview of JavaScript, its history, and its role in web development.
30-
</span>
31-
</div>
32-
<div
33-
className={`w-[900px] h-12 bg-white rounded-md shadow flex items-center pl-4 transition-all duration-800 delay-500 ${
34-
show ? "opacity-70 mt-0 shadow-lg" : "opacity-0 mt-10"
35-
}`}
36-
>
37-
<span className="text-lg">Development Tools</span>
38-
</div>
39-
<div
40-
className={`w-[900px] h-12 bg-white rounded-md shadow flex items-center pl-4 transition-all duration-800 delay-1000 ${
41-
show ? "opacity-70 mt-0 shadow-lg" : "opacity-0 mt-10"
42-
}`}
43-
>
44-
<span className="text-lg">Environment Setup Quiz</span>
45-
</div>
46-
<div
47-
className={`w-[900px] h-12 bg-white rounded-md shadow flex items-center pl-4 transition-all duration-800 delay-[1500ms] ${
48-
show ? "opacity-70 mt-0 shadow-lg" : "opacity-0 mt-10"
49-
}`}
50-
>
51-
<span className="text-lg">
52-
Installing a code editor and setting up a browser for development.
53-
</span>
54-
</div>
42+
{mods.map((mod, i) => (
43+
<div
44+
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 ${
45+
mod.delay
46+
} ${show ? "opacity-70 mt-0 shadow-lg" : "opacity-0 translate-y-3"}`}
47+
key={i}
48+
>
49+
<span className="text-lg">{mod.name}</span>
50+
</div>
51+
))}
5552

5653
<div
5754
className={`mt-8 flex flex-col items-center transition-opacity duration-500 delay-[2000ms] ${

‎src/components/prompt.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ 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-[800px] sm:w-[600px] 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-full flex items-center px-6">
5454
{prompt}
5555
<div className="bg-gray-800 h-6 w-1 ml-0.5 rounded animate-pulse duration-100"></div>
5656
</div>

0 commit comments

Comments
 (0)