Merge pull request #7 from gmook9/dev

Changed home page content

src/app/components/CodeBlock.tsx

@@ -0,0 +1,15 @@
+// daisyUI Source: https://daisyui.com/components/mockup-code/
+import React from 'react';
+
+const CodeBlock: React.FC = () => {
+  return (
+    <div className="mockup-code">
+      <pre data-prefix="$"><code>Hello!</code></pre>
+      <pre data-prefix=">" className="text-warning"><code>welcome...</code></pre>
+      <pre data-prefix="$"><code>I am a Software Developer focused on creating impactful digital solutions.</code></pre>
+      <pre data-prefix=">" className="text-success"><code>Done!</code></pre>
+    </div>
+  );
+};
+
+export default CodeBlock;

src/app/components/avatar.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Avatar: React.FC = () => {
+  return (
+    <div className="avatar">
+      <div className="mask mask-hexagon w-28">
+        <img src="/images/profileImage.jpg" alt="Profile Image" />
+      </div>
+    </div>
+  );
+};
+
+export default Avatar;

src/app/home/page.tsx

@@ -1,56 +1,50 @@
 import React from 'react';
-import Image from 'next/image';
-import Card from '../components/card';
+import Card from '../components/Card';
+import Avatar from '../components/Avatar';
 
 const Home: React.FC = () => {
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white pb-16">
       <div className="mb-8 pt-4">
-        <Image
-          src="/images/profileImage.jpg"
-          alt="Profile Image"
-          width={150}
-          height={150}
-          className="rounded-full mx-auto"
-        />
+        <Avatar />
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
         <Card
           imageUrl="/images/githubLogo.png"
-          cardName="Visit My GitHub"
-          cardBodyText="Check out my projects and repositories on GitHub."
+          cardName="GitHub"
+          cardBodyText="My projects and repositories on GitHub."
           btnColor="bg-gray-900 hover:bg-amber-700"
           cardColor="bg-amber-800"
           btnLink="https://github.com/gmook9"
         />
         <Card
           imageUrl="/images/ebwebstore.png"
           cardName="Shop Enchanting Butterfly"
-          cardBodyText="Explore our collection of enchanting products on Grailed."
+          cardBodyText="Shop Enchanting Butterfly on Grailed."
           btnColor="bg-gray-900 hover:bg-blue-500"
           cardColor="bg-blue-600"
           btnLink="https://www.grailed.com/enchantingbutterfly"
         />
         <Card
           imageUrl="/images/eblogo.png"
-          cardName="Official Enchanting Butterfly Website"
-          cardBodyText="Visit our official website for exclusive offers and updates."
+          cardName="Enchanting Butterfly"
+          cardBodyText="Official Enchanting Butterfly website"
           btnColor="bg-gray-900 hover:bg-blue-700"
           cardColor="bg-blue-800"
           btnLink="https://enchantingbutterfly.com/"
         />
         <Card
           imageUrl="/images/stardelicwebstore.png"
           cardName="Shop Stardelic"
-          cardBodyText="Discover unique items from Stardelic on Depop."
+          cardBodyText="Shop Stardelic on Depop."
           btnColor="bg-gray-900 hover:bg-indigo-500"
           cardColor="bg-indigo-600"
           btnLink="https://www.depop.com/st4rdelic/"
         />
         <Card
           imageUrl="/images/stardeliclogo.png"
-          cardName="Official Stardelic Website"
-          cardBodyText="Check out our official Stardelic website for more."
+          cardName="Stardelic"
+          cardBodyText="Official Stardelic website."
           btnColor="bg-gray-900 hover:bg-indigo-700"
           cardColor="bg-indigo-800"
           btnLink="https://st4rdelic.com/"

src/app/page.tsx

@@ -2,17 +2,13 @@
 
 import React from 'react';
 import Link from 'next/link';
+import CodeBlock from "../app/components/CodeBlock";
 
 const HomePage: React.FC = () => {
   return (
     <div className="min-h-screen w-full bg-gray-900 flex flex-col items-center justify-center p-4">
       <div className="text-center">
-        <h1 className="text-4xl font-bold text-gray-200">
-          Welcome
-        </h1>
-        <p className="text-xl text-gray-400 mt-4">
-          I am a passionate Software Engineer focused on creating impactful digital solutions.
-        </p>
+        <CodeBlock />
         <Link href="/home">
           <button className="mt-8 px-6 py-3 bg-blue-500 text-white rounded-full hover:bg-blue-600">
             See More
@@ -23,4 +19,4 @@ const HomePage: React.FC = () => {
   );
 };
 
-export default HomePage;
+export default HomePage;