fixed styling

ofluffydev · Jul 30, 2024 · e7d34c7 · e7d34c7
1 parent 4e9959a
commit e7d34c7
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 37 deletions.
diff --git a/src/components/home/NeedAWebsite.tsx b/src/components/home/NeedAWebsite.tsx
@@ -31,31 +31,39 @@ function NeedAWebsite() {
         description: "Track your website's performance and user behavior."
     }];
 
-    return (<div className="bg-gradient-to-r from-purple-500 to-pink-600 flex flex-col p-20 text-left justify-center">
-        <InView>
-            {({inView, ref}) => <div ref={ref}
-                                     className={inView ? 'opacity-100 animated-list-item' : 'opacity-0 pointer-events-none'}>
-                <h1 className="text-xl font-extrabold">Need a Website?</h1>
-                <h3>Customized websites for use at any scale</h3>
-                <h2 className="text-lg">
-                    We build everything from simple static site to full-scale business websites with
-                    account and shopping functionality.
-                </h2>
-            </div>}
-        </InView>
-        <div className="flex-row flex justify-center">
-            {features.map((feature, index) => (<FeatureCard
-                key={index}
-                title={feature.title}
-                icon={feature.icon}
-                description={feature.description}
-            />))}
+    return (
+        <div className="bg-gradient-to-r from-purple-500 to-pink-600 flex flex-col p-6 md:p-12 lg:p-20 text-left justify-center">
+            <InView>
+                {({inView, ref}) => (
+                    <div ref={ref}
+                         className={`${inView ? 'opacity-100 animated-list-item' : 'opacity-0 pointer-events-none'} mb-8`}>
+                        <h1 className="text-2xl md:text-3xl lg:text-4xl font-extrabold">Need a Website?</h1>
+                        <h3 className="text-lg md:text-xl mt-2">Customized websites for use at any scale</h3>
+                        <h2 className="text-xl md:text-2xl mt-4">
+                            We build everything from simple static site to full-scale business websites with
+                            account and shopping functionality.
+                        </h2>
+                    </div>
+                )}
+            </InView>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                {features.map((feature, index) => (
+                    <FeatureCard
+                        key={index}
+                        title={feature.title}
+                        icon={feature.icon}
+                        description={feature.description}
+                    />
+                ))}
+            </div>
+            <p className="text-center mt-8 text-sm sm:text-base">
+                Learn more in the <Link to="/services"
+                                        className="text-purple-200 hover:text-purple-400 underline">services</Link> section
+                or <Link to="/contact" className="text-purple-200 hover:text-purple-400 underline">contact us</Link> today
+                for more information!
+            </p>
         </div>
-        <p className="text-center">Learn more in the <Link to="/services"
-                                                           className="text-purple-200 hover:text-purple-400 underline">services</Link> section
-            or <Link to="/contact" className="text-purple-200 hover:text-purple-400 underline">contact us</Link> today
-            for more information!</p>
-    </div>)
+    );
 }
 
 export default NeedAWebsite;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -25,7 +25,7 @@ export default function Header() {
         };
     }, []);
 
-    return (<header className="header left-0 right-0 top-0 pl-4 pr-4 h-16">
+    return (<header className="header left-0 right-0 top-0 pl-4 pr-4 w-screen h-16">
         <div className="logo">
             <span className="brand">{WEBSITE_TITLE}</span>
         </div>

diff --git a/src/fluffy-pack/components/FeatureCard.tsx b/src/fluffy-pack/components/FeatureCard.tsx
@@ -5,19 +5,28 @@ interface FeatureCardProps {
     title: string;
     description: string;
     icon?: (props: { className?: string }) => ReactNode;
-    }
+}
 
 function FeatureCard({title, description, icon}: FeatureCardProps) {
-    return <InView>
-    {({ inView, ref }) =>
-    <div ref={ref} className={`text-center bg-gray-800 m-3 p-2 w-1/5 ${inView? 'opacity-100 animated-list-item' : 'opacity-0 pointer-events-none'}`}>
-        <h2 className="text-xl font-bold">{title}</h2>
-        <div className="w-full flex justify-center items-center h-20">
-            {icon?.({ className: "w-12 h-12" })}
-        </div>
-        <p>{description}</p>
-    </div>}
-    </InView>
+    return (
+        <InView>
+            {({ inView, ref }) => (
+                <div 
+                    ref={ref} 
+                    className={`
+                        text-center bg-gray-800 p-4 rounded-lg
+                        ${inView ? 'opacity-100 animated-list-item' : 'opacity-0 pointer-events-none'}
+                    `}
+                >
+                    <h2 className="text-lg sm:text-xl font-bold mb-2">{title}</h2>
+                    <div className="w-full flex justify-center items-center h-16 sm:h-20 mb-2">
+                        {icon?.({ className: "w-8 h-8 sm:w-12 sm:h-12" })}
+                    </div>
+                    <p className="text-sm sm:text-base">{description}</p>
+                </div>
+            )}
+        </InView>
+    );
 }
 
 export default FeatureCard;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -8,7 +8,7 @@ import NeedAWebsite from "@/components/home/NeedAWebsite.tsx";
 const roles = ['Web Developer', 'Course Creator', 'Project Enthusiast'];
 
 function Home() {
-    return (<div className={'homePage'}>
+    return (<div className={'homePage overflow-hidden'}>
         <Hero welcomeText={'Welcome!'} secondaryText={'Kaden\'s corner of the internet'}/>
         <AboutMe tinyText={'Short Section About Me :D'} hookText={'Scroll to see some of my work'} name={'Kaden Frisk'}
                  roles={roles}