fix: create faq background natively with css

HackAtUCI · Nov 20, 2023 · 025687d · 025687d
1 parent 18f096e
commit 025687d
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 24 deletions.
diff --git a/apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss b/apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss
@@ -1,5 +1,10 @@
 .container {
-	background-image: url("~@/assets/backgrounds/faq-background-mobile.svg");
+	background: radial-gradient(
+			50% 50% at 50% 50%,
+			#2c1909 58.33%,
+			#422810 100%
+		),
+		#aa5315;
 }
 
 .title {
@@ -8,6 +13,11 @@
 
 @media (min-width: 640px) {
 	.container {
-		background-image: url("~@/assets/backgrounds/faq-background.svg");
+		background-image: linear-gradient(
+			180deg,
+			#432810 0.32%,
+			#2b1809 52.42%,
+			#442911 100%
+		);
 	}
 }
diff --git a/apps/site/src/app/(home)/sections/FAQ/FAQ.tsx b/apps/site/src/app/(home)/sections/FAQ/FAQ.tsx
@@ -13,7 +13,9 @@ const FAQ = async () => {
 	}));
 
 	return (
-		<section className={`${styles.container} py-24 flex justify-center bg-no-repeat bg-cover bg-center bg-top`}>
+		<section
+			className={`${styles.container} rounded-[500rem/20rem] py-24 flex justify-center bg-no-repeat bg-cover bg-center bg-top`}
+		>
 			<div className="relative flex flex-col w-4/5 pb-7">
 				<h2
 					className={`${styles.title} my-6 font-display sm:!text-[4.5rem] text-[#fffce2] text-4xl text-center`}

diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -16,7 +16,6 @@ export default function RootLayout({
 }) {
 	return (
 		<html lang="en">
-			{/* <body className="overflow-y-hidden overflow-x-hidden"> */}
 			<body className="overflow-x-hidden">
 				{/* reference: https://github.com/pmndrs/react-three-next */}
 				<Layout>{children}</Layout>

diff --git a/apps/site/src/assets/backgrounds/faq-background-mobile.svg b/apps/site/src/assets/backgrounds/faq-background-mobile.svg
diff --git a/apps/site/src/assets/backgrounds/faq-background.svg b/apps/site/src/assets/backgrounds/faq-background.svg