diff --git a/package-lock.json b/package-lock.json
index 12188ff..12da966 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"@headlessui/react": "^2.1.1",
"dompurify": "^3.1.6",
"emailjs-com": "^3.2.0",
+ "lucide-react": "^0.436.0",
"prismjs": "^1.29.0",
"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
@@ -3961,6 +3962,15 @@
"yallist": "^3.0.2"
}
},
+ "node_modules/lucide-react": {
+ "version": "0.436.0",
+ "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.436.0.tgz",
+ "integrity": "sha512-N292bIxoqm1aObAg0MzFtvhYwgQE6qnIOWx/GLj5ONgcTPH6N0fD9bVq/GfdeC9ZORBXozt/XeEKDpiB3x3vlQ==",
+ "license": "ISC",
+ "peerDependencies": {
+ "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+ }
+ },
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
diff --git a/package.json b/package.json
index f3612cc..0148cee 100644
--- a/package.json
+++ b/package.json
@@ -13,17 +13,15 @@
"@headlessui/react": "^2.1.1",
"dompurify": "^3.1.6",
"emailjs-com": "^3.2.0",
+ "lucide-react": "^0.436.0",
"prismjs": "^1.29.0",
"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
"react-ga4": "^2.1.0",
"react-router-dom": "^6.23.0",
-
"react-syntax-highlighter": "^15.5.0",
-
"react-toastify": "^10.0.5",
-
"tesseract.js": "^5.1.0"
},
"devDependencies": {
diff --git a/public/hero-img-osc-min.png b/public/hero-img-osc-min.png
new file mode 100644
index 0000000..4219eac
Binary files /dev/null and b/public/hero-img-osc-min.png differ
diff --git a/src/Components/Card.jsx b/src/Components/Card.jsx
index 0be7b43..1ab6e3f 100644
--- a/src/Components/Card.jsx
+++ b/src/Components/Card.jsx
@@ -1,28 +1,31 @@
+import { ArrowRight } from "lucide-react";
import { Link } from "react-router-dom";
const Card = ({
name = "no name",
description = `Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others.`,
- linkName = "stopwatch"
+ linkName = "stopwatch",
}) => {
- return (
- <div className="isolate aspect-video w-[22rem] h-auto sm:w-96 rounded-xl bg-[#000]/20 shadow-lg ring-1 ring-black/5 border border-slate-700 ">
- <Link className="no-underline hover:no-underline" to={`/${linkName}`}>
- <div className="p-6">
- <h5 className="block mb-2 font-sans text-3xl antialiased font-semibold leading-snug tracking-normal text-white">
- {name}
- </h5>
- <p className="block text-sm font-sans antialiased font-light leading-relaxed text-inherit text-white">
- {description}
- </p>
- <p className="mt-10 sm:mt-16 flex-row-reverse flex text-sm font-sans antialiased font-light leading-relaxed text-inherit text-white">
- Learn more
- </p>
- </div>
-
- </Link>
+ return (
+ <div className="w-full h-full rounded-md bg-[#000]/20 shadow-lg ring-1 ring-black/5 border border-slate-700 ">
+ <Link className="no-underline hover:no-underline" to={`/${linkName}`}>
+ <div className="p-6">
+ <h5 className="block mb-2 font-sans text-3xl antialiased font-semibold leading-snug tracking-normal text-white">
+ {name}
+ </h5>
+ <p className="block text-sm font-sans antialiased font-light leading-relaxed text-inherit text-white">
+ {description}
+ </p>
+ <p className="mt-10 sm:mt-16 gap-x-2 flex text-sm font-sans antialiased font-light leading-relaxed text-inherit text-white">
+ Learn more{" "}
+ <span>
+ <ArrowRight />
+ </span>
+ </p>
</div>
- );
+ </Link>
+ </div>
+ );
};
export default Card;
diff --git a/src/Home.jsx b/src/Home.jsx
index f5be3ba..ca2ce32 100644
--- a/src/Home.jsx
+++ b/src/Home.jsx
@@ -9,65 +9,97 @@ import Footer from "./Components/Footer";
const Home = () => {
const gaEventTracker = useAnalyticsEventTracker("Home");
-
+ //bwgradient
return (
- <div className="bwgradient min-h-screen flex flex-col items-center justify-center p-4 ">
- <Marquee />
- {/* <Feedback/> */}
- <h1 className="text-4xl sm:text-5xl md:text-6xl text-center font-bold mb-8 bg-gradient-to-r from-[#9A8D9B] via-[#575A79] to-[#2C2E4D] inline-block text-transparent bg-clip-text">
- Practice Interview Problems
- </h1>
- <p className="m-10 text-white text-center">
- {" "}
- Help us improve! Share your honest{" "}
- <Link to={`/feedback`}>
- <strong className="text-lime-400 underline text-xl">feedback</strong>
- </Link>{" "}
- for a better user experience.
- </p>{" "}
- <Link
- to={`/problems`}
- onClick={() => gaEventTracker("click", "All Problems Button")}
- >
- <p className="mb-10 relative inline-flex items-center justify-center p-4 px-6 py-3 overflow-hidden font-medium text-gray-500 transition duration-300 ease-out border-2 border-slate-700 rounded-full shadow-md group w-72">
- <span className="absolute inset-0 flex items-center justify-center w-full h-full text-white duration-300 -translate-x-full bg-black group-hover:translate-x-0 ease">
- <svg
- className="w-6 h-6"
- fill="none"
- stroke="currentColor"
- viewBox="0 0 24 24"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- strokeLinecap="round"
- strokeLinejoin="round"
- strokeWidth="2"
- d="M14 5l7 7m0 0l-7 7m7-7H3"
- />
- </svg>
- </span>
- <span className="absolute flex items-center justify-center w-full h-full text-gray-200 transition-all duration-300 transform group-hover:translate-x-full ease">
- All problems
- </span>
- <span className="relative invisible">All problems</span>
- </p>
- </Link>
- <div className="flex justify-center w-full">
- <div className="px-10 sm:px-0 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full max-w-6xl justify-items-center mb-10">
- {buttonDetails.map(({ name, description }) => (
- <Card
- key={name}
- name={name}
- description={description}
- linkName={name}
- onClick={() => gaEventTracker("click", `Card - ${name}`)}
+ <main className="min-h-screen relative text-white/70">
+ <div class="w-full h-full absolute top-0 z-[-10] bg-neutral-950 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
+ <div className="container mx-auto max-w-6xl mt-48 flex flex-col gap-y-12 p-4 xl:p-0">
+ {/* <Feedback/> */}
+ <div className="w-full grid lg:grid-cols-2 place-items-center mx-auto ">
+ <div className="flex flex-col gap-y-6 items-center lg:items-start text-center lg:text-left">
+ <h1 className="text-white/70 text-5xl md:text-6xl leading-snug font-bold mb-8 lg:mb-12">
+ Nail your next <span className="text-white">interview</span>
+ </h1>
+
+ <h3 className="font-light max-w-prose">
+ Get ready for your front-end interview with confidence. Explore
+ the key topics commonly asked by FAANG companies and dive into
+ code examples to sharpen your skills and ace your next interview.
+ </h3>
+
+ <Link
+ to={`/problems`}
+ onClick={() => gaEventTracker("click", "All Problems Button")}
+ className=""
+ >
+ <p className="relative inline-flex items-center py-2 overflow-hidden transition duration-300 ease-out border-2 border-slate-700 rounded-md hover:border-slate-300 shadow-md group w-48">
+ <span className="absolute inset-0 flex items-center justify-center w-full h-full duration-300 -translate-x-full bg-transparent group-hover:translate-x-0 ease">
+ <svg
+ className="w-6 h-6"
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ d="M14 5l7 7m0 0l-7 7m7-7H3"
+ />
+ </svg>
+ </span>
+ <span className="absolute font-bold text-base flex items-center justify-center w-full h-full transition-all duration-300 transform group-hover:translate-x-full ease">
+ All problems
+ </span>
+ <span className="relative invisible">All problems</span>
+ </p>
+ </Link>
+ </div>
+
+ <div className="">
+ <img
+ src="/hero-img-osc-min.png"
+ alt="Hero Image"
+ className="max-w-sm md:w-full h-full"
/>
- ))}
+ </div>
+ </div>
+
+ <div>
+ <Marquee />
+ </div>
+
+ <div className="flex flex-col justify-center">
+ <h2 className="font-bold py-1 text-center lg:text-left text-3xl lg:text-4xl mb-8">
+ Questions
+ </h2>
+ <div className="mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+ {buttonDetails.map(({ name, description }) => (
+ <Card
+ key={name}
+ name={name}
+ description={description}
+ linkName={name}
+ onClick={() => gaEventTracker("click", `Card - ${name}`)}
+ />
+ ))}
+ </div>
</div>
+
+ <div>
+ <p className="max-w-prose font-light leading-8">
+ Help us improve! Share your honest{" "}
+ <Link to={`/feedback`}>
+ <strong className="text-lime-400 font-bold">feedback</strong>
+ </Link>{" "}
+ for a better user experience.
+ </p>
+ </div>
+
+ <Footer />
</div>
-
- <Footer />
- </div>
+ </main>
);
};
diff --git a/tailwind.config.js b/tailwind.config.js
index 87b43f7..064c047 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,33 +6,33 @@ export default {
colors: {
lightblue: "#add8e6",
primary: {
- "50": "#eff6ff",
- "100": "#dbeafe",
- "200": "#bfdbfe",
- "300": "#93c5fd",
- "400": "#60a5fa",
- "500": "#3b82f6",
- "600": "#2563eb",
- "700": "#1d4ed8",
- "800": "#1e40af",
- "900": "#1e3a8a",
- "950": "#172554"
- }
+ 50: "#eff6ff",
+ 100: "#dbeafe",
+ 200: "#bfdbfe",
+ 300: "#93c5fd",
+ 400: "#60a5fa",
+ 500: "#3b82f6",
+ 600: "#2563eb",
+ 700: "#1d4ed8",
+ 800: "#1e40af",
+ 900: "#1e3a8a",
+ 950: "#172554",
+ },
},
animation: {
- marquee: "marquee 450s linear infinite",
- marquee2: "marquee2 25s linear infinite"
+ marquee: "marquee 25s linear infinite",
+ marquee2: "marquee2 25s linear infinite",
},
keyframes: {
marquee: {
"0%": { transform: "translateX(0%)" },
- "100%": { transform: "translateX(-100%)" }
+ "100%": { transform: "translateX(-100%)" },
},
marquee2: {
"0%": { transform: "translateX(100%)" },
- "100%": { transform: "translateX(0%)" }
- }
- }
+ "100%": { transform: "translateX(0%)" },
+ },
+ },
},
fontFamily: {
body: [
@@ -50,7 +50,7 @@ export default {
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
- "Noto Color Emoji"
+ "Noto Color Emoji",
],
sans: [
"Inter",
@@ -67,9 +67,9 @@ export default {
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
- "Noto Color Emoji"
- ]
- }
+ "Noto Color Emoji",
+ ],
+ },
},
- plugins: []
+ plugins: [],
};