Skip to content

Commit

Permalink
fix: beta customizer as stable - bg blur & page headings
Browse files Browse the repository at this point in the history
  • Loading branch information
akshat-OwO committed Mar 9, 2024
1 parent e3ee7fb commit 6ffd514
Show file tree
Hide file tree
Showing 14 changed files with 342 additions and 217 deletions.
33 changes: 32 additions & 1 deletion public/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@

--ring: 240 5.9% 10%;

--translucent: 0, 0%, 9.8%, 0.3;
--highlight: 192.94, 100%, 50%;
--radius: 0.5rem;
}

Expand Down Expand Up @@ -92,6 +94,8 @@

--ring: 222.2 84% 4.9%;

--translucent: 227.59, 47.54%, 11.96%, 0.3;
--highlight: 192.94, 100%, 50%;
--radius: 0.5rem;
}

Expand Down Expand Up @@ -156,6 +160,8 @@

--ring: 20 14.3% 4.1%;

--translucent: 40, 6.12%, 9.61%, 0.3;
--highlight: 192.94, 100%, 50%;
--radius: 0.95rem;
}

Expand Down Expand Up @@ -220,6 +226,8 @@

--ring: 224 71.4% 4.1%;

--translucent: 232.17, 34.33%, 13.14%, 0.3;
--highlight: 192.94, 100%, 50%;
--radius: 0.35rem;
}

Expand Down Expand Up @@ -284,7 +292,9 @@

--ring: 0 0% 3.9%;

--radius: ;
--translucent: 192.94, 100%, 50%, 0.3;
--highlight: 192.94, 100%, 50%;
--radius: 0.5rem;
}

.dark .theme-neutral {
Expand Down Expand Up @@ -348,6 +358,9 @@

--ring: 0 72.2% 50.6%;

--translucent: 0, 60.48%, 51.37%, 0.3;
--highlight: 0, 60.48%, 51.37%;

--radius: 0.4rem;
}

Expand Down Expand Up @@ -412,6 +425,9 @@

--ring: 346.8 77.2% 49.8%;

--translucent: 327.8, 57.75%, 41.76%, 0.3;
--highlight: 327.8, 57.75%, 41.76%;

--radius: 0.5rem;
}

Expand Down Expand Up @@ -476,6 +492,9 @@

--ring: 24.6 95% 53.1%;

--translucent: 5.32, 89.43%, 44.51%, 0.3;
--highlight: 5.32, 89.43%, 44.51%;

--radius: 0.95rem;
}

Expand Down Expand Up @@ -540,6 +559,9 @@

--ring: 142.1 76.2% 36.3%;

--translucent: 144.44, 55.1%, 28.82%, 0.3;
--highlight: 144.44, 55.1%, 28.82%;

--radius: ;
}

Expand Down Expand Up @@ -604,6 +626,9 @@

--ring: 221.2 83.2% 53.3%;

--translucent: 238.26, 58.97%, 45.88%, 0.3;
--highlight: 238.26, 58.97%, 45.88%;

--radius: ;
}

Expand Down Expand Up @@ -668,6 +693,9 @@

--ring: 20 14.3% 4.1%;

--translucent: 58.83, 88.03%, 54.12%, 0.3;
--highlight: 58.83, 88.03%, 54.12%;

--radius: 0.95rem;
}

Expand Down Expand Up @@ -732,6 +760,9 @@

--ring: 262.1 83.3% 57.8%;

--translucent: 286.33, 89.96%, 46.86%, 0.3;
--highlight: 286.33, 89.96%, 46.86%;

--radius: ;
}

Expand Down
29 changes: 15 additions & 14 deletions src/app/about-us/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,7 @@ const page: FC<pageProps> = async ({}) => {
<div className="prose prose-sm prose-neutral dark:prose-invert md:prose-base">
<h1 className="text-center">
Unveiling the Minds Behind{" "}
<span className="bg-gradient-to-r from-teal-500 via-teal-600 to-teal-500 bg-clip-text text-transparent">
SyllabusX
</span>
<span className="text-highlight">SyllabusX</span>
</h1>
</div>
<div className="prose prose-sm prose-neutral dark:prose-invert">
Expand All @@ -57,17 +55,20 @@ const page: FC<pageProps> = async ({}) => {
</div>
<div className="w-full py-10">
<div className="relative aspect-video rounded-md">
<Image
src={
aboutContent
? "https:" +
aboutContent.teamImage.fields.file.url
: "/placeholder.png"
}
alt="Team Image"
fill
className="rounded-md"
/>
<div className="conic-center absolute h-full w-full" />
<div className="z-10 aspect-video w-full rounded-md bg-accent/20 p-2 shadow-2xl">
<Image
src={
aboutContent
? "https:" +
aboutContent.teamImage.fields.file.url
: "/placeholder.png"
}
alt="Team Image"
fill
className="rounded-md p-2"
/>
</div>
</div>
</div>
{team ? (
Expand Down
4 changes: 1 addition & 3 deletions src/app/changelog/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,7 @@ const page: FC<pageProps> = async ({}) => {
<div className="prose prose-sm prose-neutral dark:prose-invert md:prose-base">
<h1 className="text-center">
Changelog{" "}
<span className="bg-gradient-to-r from-teal-500 via-teal-600 to-teal-500 bg-clip-text text-transparent">
Chronicles
</span>
<span className="text-highlight">Chronicles</span>
</h1>
</div>
<div className="prose prose-sm prose-neutral dark:prose-invert">
Expand Down
4 changes: 1 addition & 3 deletions src/app/contact-us/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,7 @@ const Page: FC<pageProps> = ({}) => {
<div className="prose prose-sm prose-neutral dark:prose-invert md:prose-base">
<h1 className="text-center">
Let&apos;s Connect: Reach Out to{" "}
<span className="bg-gradient-to-r from-teal-500 via-teal-600 to-teal-500 bg-clip-text text-transparent">
SyllabusX
</span>
<span className="text-highlight">SyllabusX</span>
</h1>
</div>
<div className="prose prose-sm prose-neutral dark:prose-invert">
Expand Down
4 changes: 1 addition & 3 deletions src/app/courses/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,7 @@ const page: FC<pageProps> = async ({}) => {
<div className="prose prose-sm prose-neutral dark:prose-invert md:prose-base">
<h1 className="text-center">
Unleash Your Academic{" "}
<span className="bg-gradient-to-r from-teal-500 via-teal-600 to-teal-500 bg-clip-text text-transparent">
Odyssey
</span>
<span className="text-highlight">Odyssey</span>
</h1>
</div>
<div className="prose prose-sm prose-neutral dark:prose-invert">
Expand Down
9 changes: 5 additions & 4 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--radius: 0.5rem;
--translucent: rgba(0, 200, 255, 0.3);
--translucent: 192.94, 100%, 50%, 0.3;
--highlight: 192.94, 100%, 50%;
}

.dark {
Expand Down Expand Up @@ -77,16 +78,16 @@
.radial-top {
background: radial-gradient(
ellipse 80% 35% at 50% -20%,
var(--translucent),
hsl(var(--translucent)),
rgba(0, 0, 100, 0)
);
}

.conic-center {
background: conic-gradient(
from 230.29deg at 51.63% 52.16%,
var(--translucent) 0deg,
var(--translucent) 360deg
hsl(var(--translucent)) 0deg,
hsl(var(--translucent)) 360deg
);
filter: blur(150px);
transform: translateZ(0px);
Expand Down
5 changes: 1 addition & 4 deletions src/app/privacy-policy/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,7 @@ const page: FC<pageProps> = async ({}) => {
<div className="flex flex-col items-center gap-y-2">
<div className="prose prose-sm prose-neutral dark:prose-invert md:prose-base">
<h1 className="text-center">
Privacy{" "}
<span className="bg-gradient-to-r from-teal-500 via-teal-600 to-teal-500 bg-clip-text text-transparent">
Policy
</span>
Privacy <span className="text-highlight">Policy</span>
</h1>
</div>
</div>
Expand Down
4 changes: 1 addition & 3 deletions src/app/t&c/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,7 @@ const page: FC<pageProps> = async ({}) => {
<div className="prose prose-sm prose-neutral dark:prose-invert md:prose-base">
<h1 className="text-center">
Terms &{" "}
<span className="bg-gradient-to-r from-teal-500 via-teal-600 to-teal-500 bg-clip-text text-transparent">
Conditions
</span>
<span className="text-highlight">Conditions</span>
</h1>
</div>
</div>
Expand Down
23 changes: 13 additions & 10 deletions src/components/Hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,8 @@ const Hero: FC<HeroProps> = ({ content, releaseTag, releaseUrl }) => {
<div className="flex flex-col items-center gap-y-2">
<div className="prose prose-sm prose-neutral dark:prose-invert md:prose-base">
<h1 className="text-center">
<span className="bg-gradient-to-r from-teal-500 via-teal-600 to-teal-500 bg-clip-text text-transparent">
SyllabusX
</span>{" "}
is Your academic GPS. Navigate studies effortlessly.
<span className="text-highlight">SyllabusX</span> is
Your academic GPS. Navigate studies effortlessly.
</h1>
</div>
<div className="prose prose-sm prose-neutral dark:prose-invert">
Expand All @@ -46,13 +44,18 @@ const Hero: FC<HeroProps> = ({ content, releaseTag, releaseUrl }) => {
</div>
<Link
href="/courses"
className={cn(buttonVariants({ variant: "default" }))}
className={cn(
buttonVariants({
variant: "default",
className: "z-10",
})
)}
>
Browse Courses
</Link>
<div className="relative h-full w-full self-center">
<div className="conic-center absolute -z-10 h-full w-full" />
<div className="z-10 hidden aspect-video w-full p-2 shadow-2xl dark:block">
<div className="conic-center absolute h-full w-full" />
<div className="z-10 hidden aspect-video w-full rounded-md bg-accent/20 p-2 shadow-2xl dark:block">
<Image
src={
content
Expand All @@ -63,10 +66,10 @@ const Hero: FC<HeroProps> = ({ content, releaseTag, releaseUrl }) => {
alt="Hero Image"
fill
quality={100}
className="rounded-md"
className="rounded-md p-2"
/>
</div>
<div className="z-10 aspect-video w-full p-2 shadow-2xl dark:hidden">
<div className="z-10 aspect-video w-full rounded-md bg-accent/20 p-2 shadow-2xl dark:hidden">
<Image
src={
content
Expand All @@ -77,7 +80,7 @@ const Hero: FC<HeroProps> = ({ content, releaseTag, releaseUrl }) => {
alt="Hero Image Light"
fill
quality={100}
className="rounded-md"
className="rounded-md p-2"
/>
</div>
</div>
Expand Down
Loading

0 comments on commit 6ffd514

Please sign in to comment.