Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactored Home Page UI #11

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactored Home Page UI #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 1 addition & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
Binary file added public/hero-img-osc-min.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 21 additions & 18 deletions src/Components/Card.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
142 changes: 87 additions & 55 deletions src/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};

Expand Down
46 changes: 23 additions & 23 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -50,7 +50,7 @@ export default {
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji"
"Noto Color Emoji",
],
sans: [
"Inter",
Expand All @@ -67,9 +67,9 @@ export default {
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji"
]
}
"Noto Color Emoji",
],
},
},
plugins: []
plugins: [],
};