ui improvmen on mobile (it's steal ugly)t

No0ne003 · May 14, 2024 · 7fff418 · 7fff418
1 parent 11f51f4
commit 7fff418
Showing 1 changed file with 5 additions and 10 deletions.
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -1,18 +1,13 @@
 import { projects } from "@/data/projects";
-import { FaReact, FaRegStar } from "react-icons/fa";
 import { Link } from "react-router-dom";
 
 function Home({ setCursorVariant }) {
  return (
  <main className="flex min-h-screen flex-col">
  <div className="landing relative mb-24 py-12 sm:py-16 lg:pt-20 xl:pb-0">
- <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
- <div className="relative mx-auto hidden max-w-screen-lg bg-red-300 lg:block">
- <FaReact className="absolute right-0 text-[9rem] fill-primary -rotate-45 -translate-x-0 translate-y-[-19.5px]" />
- <FaRegStar className="absolute left-0 text-[7rem] fill-primary translate-x-[200px] translate-y-[-19.5]" />
- </div>
+ <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col justify-end max-sm:h-[75vh]">
  <div className="mx-auto max-w-3xl text-center">
- <h1 className="mt-5 text-3xl font-light leading-snug text-foreground sm:text-5xl sm:leading-snug lg:text-6xl lg:leading-snug">
+ <h1 className="mt-5 text-4xl max-sm:text-start leading-snug text-foreground sm:text-5xl sm:leading-snug lg:text-6xl lg:leading-snug">
  Discover Awesome React.js{" "}
  <span
  onMouseEnter={() => setCursorVariant("bigText")}
@@ -22,16 +17,16 @@ function Home({ setCursorVariant }) {
  Projects
  </span>
  </h1>
- <p className="mx-auto mt-5 max-w-md text-base leading-7 text-foreground/80">
+ <p className="max-sm:text-start sm:mx-auto mt-5 max-w-md text-base leading-7 text-foreground/80">
  Explore a curated collection of open-source projects, components,
  React hooks, and more, all in one place.
  </p>
  </div>
  </div>
  </div>
 
- <div className="sm:px-none mx-auto mt-20 max-w-screen-lg flex flex-1 flex-col px-4">
- <div className="flex flex-col">
+ <div className="sm:px-none mx-auto max-w-screen-lg flex flex-1 flex-col px-4">
+ <div className="flex flex-col md:w-[1000px]">
  {projects.map((item) => (
  <div
  key={item.id}