Skip to content

Commit d760741

Browse files
safipatelsafipatel
committed
fixed sidebar logo bug
1 parent cdd726a commit d760741

File tree

13 files changed

+160
-52
lines changed

13 files changed

+160
-52
lines changed

‎app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
--chart-5: 340 75% 55%;
6666
--sidebar-background: 240 5.9% 10%;
6767
--sidebar-foreground: 240 4.8% 95.9%;
68-
--sidebar-primary: 224.3 76.3% 48%;
68+
--sidebar-primary: 252.8 71.4% 20.6%;
6969
--sidebar-primary-foreground: 0 0% 100%;
7070
--sidebar-accent: 240 5% 40%;
7171
--sidebar-accent-foreground: 240 4.8% 95.9%;

‎app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export default async function RootLayout({
7474
<SidebarInset
7575
// className="md:peer-data-[variant=inset]:mr-7 md:peer-data-[variant=inset]:mt-10 md:peer-data-[variant=inset]:shadow-lg md:peer-data-[variant=inset]:border-accent md:peer-data-[variant=inset]:border"
7676
// bg-[linear-gradient(0deg,_#FFEFD2,_#67c5ff_38%,background)]
77-
className="z-10 bg-[linear-gradient(0deg,_rgba(234,225,245,0.6),_rgba(228,228,245,0.6)_38%,_#FFFFFF)] dark:bg-[linear-gradient(0deg,_#443461,_#130F5A_38%,_#1F1F1F)] md:peer-data-[variant=inset]:mr-7 md:peer-data-[variant=inset]:mt-10 md:peer-data-[variant=inset]:shadow-md"
77+
className="z-10 bg-[linear-gradient(0deg,_rgba(234,225,245,0.6),_rgba(228,228,245,0.6)_50%,_#faf9fd)] dark:bg-[linear-gradient(0deg,_#443461,_#130F5A_38%,_#1F1F1F)] md:peer-data-[variant=inset]:mr-7 md:peer-data-[variant=inset]:mt-10 md:peer-data-[variant=inset]:shadow-md"
7878
>
7979
<header className="z-10 flex h-16 shrink-0 items-center gap-2">
8080
<div className="flex items-center gap-1 px-4">

‎app/page.tsx‎

Lines changed: 46 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import Balloon, { PurpleBalloon } from "@/shared/components/background/Balloon";
1+
import Balloon, {
2+
GreenBalloon,
3+
PurpleBalloon,
4+
} from "@/shared/components/background/Balloon";
5+
import CloudLeft from "@/shared/components/background/CloudLeft";
6+
import CloudRight from "@/shared/components/background/CloudRight";
27
import Star from "@/shared/components/background/Star";
38
import StarSwoop from "@/shared/components/background/StarSwoop";
49
import { Button } from "@/shared/components/ui/button";
@@ -7,43 +12,49 @@ import Link from "next/link";
712

813
export default function Home() {
914
return (
10-
<div className="relative flex w-full flex-1 items-center justify-center overflow-clip text-center">
11-
<div className="absolute left-[50px] h-[1080px] w-[1920px]">
12-
<StarSwoop className="invisible absolute right-[25%] top-[-17%] z-10 rotate-[15deg] scale-[0.3] dark:visible" />
13-
<Star className="invisible absolute left-[3%] top-[20%] z-10 scale-[0.4] dark:visible" />
14-
<Balloon className="absolute bottom-[30%] left-[-2%] z-10 size-[10em]" />
15-
<PurpleBalloon className="absolute bottom-[200px] right-[40px] z-10 size-[15em]" />
16-
</div>
17-
18-
<div className="relative z-20 flex content-center justify-center break-words">
19-
<div className="relative flex h-[50vh] min-h-fit min-w-[55vw] max-w-[80%] flex-col items-center justify-around rounded-xl bg-foreground/20 p-5">
20-
<div className="mb-3 flex flex-col gap-2">
21-
<h1 className="mb-3 text-5xl font-bold tracking-tight lg:text-8xl">
22-
Learn and grow
23-
</h1>
24-
<h2 className="text-2xl font-medium tracking-tight lg:text-4xl">
25-
with your personalized classroom agent
26-
</h2>
27-
</div>
28-
<div className="flex w-2/5 min-w-[50vw] flex-col items-center gap-10">
29-
<h3 className="text-lg italic lg:text-xl">
30-
A collaborative space for students and teachers to interact with
31-
the future of LLM-enhanced education.
32-
</h3>
33-
<Button
34-
effect="hoverUnderlineWhiteExpand"
35-
icon={ArrowRightCircle}
36-
iconPlacement="right"
37-
className="h-12 w-full min-w-fit max-w-[20vw] bg-[#200092] text-white shadow-[0px_0px_45px_1px_#6083FF] hover:bg-[#200092]/90"
38-
>
39-
<Link href="classrooms" className="text-lg">
40-
Start your journey today
41-
</Link>
42-
</Button>
15+
<>
16+
<CloudLeft className="z-9 absolute bottom-[0%] left-[0%] origin-bottom-left scale-[0.15] " />
17+
<CloudRight className="z-9 absolute bottom-[0%] right-[0%] origin-bottom-right scale-[0.15] " />
18+
{/* <CloudLeft className="z-9 absolute scale-x-[-1] bottom-[0%] left-[0%] origin-bottom-left scale-[0.15] overflow-visible group-data-[state=collapsed]:left-[0px]" /> */}
19+
<div className="relative flex w-full flex-1 items-center justify-center overflow-clip text-center">
20+
<div className="absolute left-[50px] h-[1080px] w-[1920px] overflow-visible">
21+
<StarSwoop className="absolute right-[25%] top-[-17%] z-10 rotate-[15deg] scale-[0.3] dark:visible" />
22+
<Star className="invisible absolute left-[3%] top-[20%] z-10 scale-[0.4] dark:visible" />
23+
<Balloon className="absolute bottom-[30%] left-[-2%] z-10 size-[10em]" />
24+
<PurpleBalloon className="absolute bottom-[25%] right-[25%] z-10 size-[9em]" />
25+
<GreenBalloon className="absolute bottom-[22%] left-[35%] z-10 size-[3em]" />
26+
{/* <CloudLeft className="absolute static -translate-x-3 bottom-[20%] z-9 left-[-5%] origin-bottom-left scale-[0.15] overflow-visible group-data-[state=collapsed]:left-[0px]" /> */}
27+
</div>
28+
<div className="relative z-20 flex content-center justify-center break-words">
29+
<div className="relative flex h-[50vh] min-h-fit min-w-[55vw] max-w-[80%] flex-col items-center justify-around rounded-xl bg-foreground/20 p-5">
30+
<div className="mb-3 flex flex-col gap-2">
31+
<h1 className="mb-3 text-5xl font-bold tracking-tight lg:text-8xl">
32+
Learn and grow
33+
</h1>
34+
<h2 className="text-2xl font-medium tracking-tight lg:text-4xl">
35+
with your personalized classroom agent
36+
</h2>
37+
</div>
38+
<div className="flex w-2/5 min-w-[50vw] flex-col items-center gap-10">
39+
<h3 className="text-lg italic lg:text-xl">
40+
A collaborative space for students and teachers to interact with
41+
the future of LLM-enhanced education.
42+
</h3>
43+
<Button
44+
effect="hoverUnderlineWhiteExpand"
45+
icon={ArrowRightCircle}
46+
iconPlacement="right"
47+
className="h-12 w-full min-w-fit max-w-[20vw] bg-[#200092] text-white shadow-[0px_0px_45px_1px_#6083FF] hover:bg-[#200092]/90"
48+
>
49+
<Link href="classrooms" className="text-lg">
50+
Start your journey today
51+
</Link>
52+
</Button>
53+
</div>
4354
</div>
4455
</div>
4556
</div>
46-
</div>
57+
</>
4758
);
4859

4960
{

‎public/file.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/globe.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/next.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/vercel.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/window.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎shared/components/background/Balloon.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@ const Balloon = ({
1515
<stop offset={0.55} stopColor="#7a4d20" />
1616
</>
1717
),
18+
gradId = "blue",
1819
}: {
1920
className: string;
2021
linGradA?: React.ReactNode;
2122
linGradB?: React.ReactNode;
23+
gradId?: string;
2224
}) => (
2325
<svg
2426
data-name="Layer 2"
@@ -28,7 +30,7 @@ const Balloon = ({
2830
>
2931
<defs>
3032
<linearGradient
31-
id="a"
33+
id={`a_${gradId}`}
3234
x1={22.29}
3335
y1={67.91}
3436
x2={271.97}
@@ -38,7 +40,7 @@ const Balloon = ({
3840
{linGradA}
3941
</linearGradient>
4042
<linearGradient
41-
id="b"
43+
id={`b_${gradId}`}
4244
x1={129.78}
4345
y1={361.92}
4446
x2={194.22}
@@ -52,13 +54,13 @@ const Balloon = ({
5254
<path
5355
d="M162 0C72.53 0 0 62.73 0 140.13c0 1.02 0 2.05.04 3.08v.03C1 181.2 19.4 215.44 48.6 240.2c.17.14.34.29.51.43.74.62 1.49 1.24 2.25 1.85.57.46 1.14.91 1.72 1.37.2.15.41.32.61.47.28.22.56.43.84.66 57.4 44.78 74.24 69.06 74.24 69.06h.04l5.96 32.2h56.46l5.24-32.64c2.4-3.41 19.8-26.87 71.55-67.51a.24.24 0 0 1 .08-.06c.72-.57 1.45-1.14 2.18-1.71 2.32-1.8 4.53-3.62 6.66-5.45q.675-.585 1.32-1.17c27.41-24.42 44.62-57.46 45.69-93.96v-.07c.03-1.17.05-2.36.05-3.54C324 62.73 251.47 0 162 0m24.97 341.24h-48.04l-5.04-27.2-.18-.99h57.79l-.16.99z"
5456
style={{
55-
fill: "url(#a)",
57+
fill: `url(#a_${gradId})`,
5658
}}
5759
/>
5860
<path
5961
d="M135.62 341.24h52.77c3.94 0 6.74 3.82 5.56 7.58l-9.35 29.7a5.83 5.83 0 0 1-5.56 4.08h-33a5.82 5.82 0 0 1-5.5-3.9L130.12 349c-1.33-3.79 1.48-7.76 5.5-7.76"
6062
style={{
61-
fill: "url(#b)",
63+
fill: `url(#b_${gradId})`,
6264
}}
6365
/>
6466
</g>
@@ -80,6 +82,7 @@ export const PurpleBalloon = ({ className }: { className: string }) => (
8082
<stop offset=".55" stopColor="#7a4d20" />
8183
</>
8284
}
85+
gradId="purple"
8386
className={className}
8487
/>
8588
);
@@ -98,6 +101,7 @@ export const GreenBalloon = ({ className }: { className: string }) => (
98101
<stop offset=".55" stopColor="#7a4d20" />
99102
</>
100103
}
104+
gradId="green"
101105
className={className}
102106
/>
103107
);

‎shared/components/background/CloudLeft.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { cn } from "@/shared/lib/utils";
2+
import * as React from "react";
3+
4+
const CloudLeft = ({ className }: { className: string }) => (
5+
<svg
6+
data-name="Layer 3"
7+
xmlns="http://www.w3.org/2000/svg"
8+
viewBox="0 0 823.48 369.38"
9+
className={cn(className, "text-[#cccccc] dark:text-[#fff]")}
10+
>
11+
<defs>
12+
<linearGradient
13+
id="a-cloudLeft"
14+
x1={489.54}
15+
y1={41.15}
16+
x2={105.86}
17+
y2={421.7}
18+
gradientUnits="userSpaceOnUse"
19+
>
20+
<stop offset={0} stopColor={"currentColor"} />
21+
<stop offset={1} stopColor={"currentColor"} stopOpacity={0} />
22+
</linearGradient>
23+
<linearGradient
24+
id="b-cloudLeft"
25+
x1={531.52}
26+
y1={70.4}
27+
x2={-45.63}
28+
y2={646.9}
29+
gradientUnits="userSpaceOnUse"
30+
>
31+
<stop offset={0} stopColor={"currentColor"} stopOpacity={0.8} />
32+
<stop offset={0.47} stopColor={"currentColor"} stopOpacity={0} />
33+
</linearGradient>
34+
</defs>
35+
<path
36+
d="M-5.08 158.29s175.11-24.78 207.51 89.57c0 0 228.89-51.46 247.85 91.48 0 0 83.76-23.51 85.03 29.86H-5.08z"
37+
style={{
38+
fill: "url(#a-cloudLeft)",
39+
}}
40+
/>
41+
<path
42+
d="M0 19.92s76.94.57 84.4 66.37c0 0 43.78-66.37 115.97-20.52 0 0 28.4-78.44 100.59-54.3s92.3 97.75 98.22 125.5c0 0 145.55-42.24 177.51 100.16h46.61s54.44-4.83 60.35 36.2c0 0 68.64-14.48 81.65 39.82 0 0 43.78 4.83 50.89 54.3H0z"
43+
style={{
44+
fill: "url(#b-cloudLeft)",
45+
}}
46+
/>
47+
</svg>
48+
);
49+
export default CloudLeft;

0 commit comments

Comments
 (0)