Refactoring ui

moovendhan-v · Mar 26, 2024 · cc05c2e · cc05c2e
1 parent 5f439bb
commit cc05c2e
Show file tree

Hide file tree

Showing 9 changed files with 440 additions and 37 deletions.
diff --git a/ui_tailwind_shadecn/public/vscode.svg b/ui_tailwind_shadecn/public/vscode.svg
diff --git a/ui_tailwind_shadecn/src/components/custom_ui/BlogCard.tsx b/ui_tailwind_shadecn/src/components/custom_ui/BlogCard.tsx
@@ -3,10 +3,18 @@ const BlogCard = ()=>{
         <>
 
         <>
-  Blog Contact Content CTA Ecommerce Feature Footer Gallery Header Hero Pricing
-  Statistic Step Team Testimonial Copied!
-  <section className="text-gray-400 bg-gray-900 body-font">
+  <section className=" body-font">
     <div className="container px-5 py-24 mx-auto">
+
+    <div className="flex flex-col text-center w-full mb-20">
+      <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4">
+        Take Look At Our Latest blog Post
+      </h1>
+      <p className="lg:w-2/3 mx-auto leading-relaxed text-primary">
+        Find more 
+      </p>
+    </div>
+
       <div className="flex flex-wrap -m-4">
         <div className="p-4 md:w-1/3">
           <div className="h-full border-2 border-gray-800 rounded-lg overflow-hidden">
@@ -19,7 +27,7 @@ const BlogCard = ()=>{
               <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
                 CATEGORY
               </h2>
-              <h1 className="title-font text-lg font-medium text-white mb-3">
+              <h1 className="title-font text-lg font-medium mb-3">
                 The Catalyzer
               </h1>
               <p className="leading-relaxed mb-3">
@@ -86,7 +94,7 @@ const BlogCard = ()=>{
               <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
                 CATEGORY
               </h2>
-              <h1 className="title-font text-lg font-medium text-white mb-3">
+              <h1 className="title-font text-lg font-medium mb-3">
                 The 400 Blows
               </h1>
               <p className="leading-relaxed mb-3">
@@ -153,7 +161,7 @@ const BlogCard = ()=>{
               <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
                 CATEGORY
               </h2>
-              <h1 className="title-font text-lg font-medium text-white mb-3">
+              <h1 className="title-font text-lg font-medium mb-3">
                 Shooting Stars
               </h1>
               <p className="leading-relaxed mb-3">
@@ -212,7 +220,7 @@ const BlogCard = ()=>{
       </div>
     </div>
   </section>
-  GitHub
+
 </>
 </>
     )

diff --git a/ui_tailwind_shadecn/src/components/custom_ui/Content.tsx b/ui_tailwind_shadecn/src/components/custom_ui/Content.tsx
@@ -4,20 +4,18 @@ const Content = ()=>{
         <section className="text-gray-400 bg-gray-900 body-font">
   <div className="container px-5 py-24 mx-auto flex flex-wrap">
     <h2 className="sm:text-3xl text-2xl text-white font-medium title-font mb-2 md:w-2/5">
-      Kickstarter Actually Pinterest Brunch Bitters Occupy
+      Design Without Limits: <br /> Explore the World of Open Source UI
     </h2>
     <div className="md:w-3/5 md:pl-6">
       <p className="leading-relaxed text-base">
-        Taxidermy bushwick celiac master cleanse microdosing seitan. Fashion axe
-        four dollar toast truffaut, direct trade kombucha brunch williamsburg
-        keffiyeh gastropub tousled squid meh taiyaki drinking vinegar tacos.
+      Join the Revolution of Open Source UI, <br /> Design Better, Faster, Stronger with Our Open Source Components, Join the Open Source Revolution: Transform Your Website Today
       </p>
       <div className="flex md:mt-4 mt-6">
-        <button className="inline-flex text-white bg-indigo-500 border-0 py-1 px-4 focus:outline-none hover:bg-indigo-600 rounded">
-          Button
+        <button className="inline-flex text-white bg-primary border-0 py-1 px-4 focus:outline-none hover:bg-secondary rounded">
+          Contribute
         </button>
-        <a className="text-indigo-400 inline-flex items-center ml-4">
-          Learn More
+        <a className="text-primary inline-flex items-center ml-4">
+          Star On Github
           <svg
             fill="none"
             stroke="currentColor"

diff --git a/ui_tailwind_shadecn/src/components/custom_ui/Extensions.tsx b/ui_tailwind_shadecn/src/components/custom_ui/Extensions.tsx
@@ -0,0 +1,41 @@
+import {Logo} from './Svg';
+
+const Extension = ()=>{
+    return(
+        <>
+        <>
+  <section className="body-font">
+    <div className="container px-5 py-24 mx-auto flex items-center md:flex-row flex-col">
+      <div className="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center">
+        <h2 className="text-xs text-indigo-500 tracking-widest font-medium mb-1">
+          Downlod Our Extensions
+        </h2>
+        <h1 className="md:text-3xl text-2xl font-medium">
+          Make Devlelopment with our powerfull extensions
+        </h1>
+      </div>
+      <div className="flex md:ml-auto md:mr-0 mx-auto items-center flex-shrink-0 space-x-4">
+        <button className="bg-secondary inline-flex py-3 px-5 rounded-lg items-center focus:outline-none">
+        <Logo />
+          <span className="ml-4 flex items-start flex-col leading-none">
+            <span className="text-xs text-primary mb-1">GET IT FOR</span>
+            <span className="title-font font-medium">Visual Studio Code</span>
+          </span>
+        </button>
+        <button className="bg-secondary inline-flex py-3 px-5 rounded-lg items-center focus:outline-none">
+           <Logo />
+          <span className="ml-4 flex items-start flex-col leading-none">
+            <span className="text-xs text-primary mb-1">INSTALL IT ON</span>
+            <span className="title-font font-medium">Google Chrome</span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </section>
+</>
+
+        </>
+    )
+}
+
+export default Extension;