feat: remove all 3D models and replace with svg

astrodevs-labs · Oct 13, 2024 · 10acde4 · 10acde4
1 parent 7f3a33c
commit 10acde4
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 390 deletions.
diff --git a/src/app/components/about.tsx b/src/app/components/about.tsx
@@ -5,18 +5,15 @@ import interact from 'public/interact.webp'
 
 export default function About() {
   return (
-    <section
-      className="mx-4 my-32 space-y-52 py-24 md:px-8 lg:px-16"
-      id="about"
-    >
-      <div className="flex justify-center space-x-6">
+    <section className="mt-40 space-y-52 py-24" id="about">
+      <div className="flex justify-center lg:space-x-6">
         <Image
           src={logo}
           alt="osmium logo"
           className="hidden rounded-lg lg:block lg:h-96 lg:w-96"
           priority
         />
-        <Card className="p-2 2xl:w-[500px]">
+        <Card>
           <CardHeader className="text-3xl font-bold">
             Current problem in smart contract developpement
           </CardHeader>
@@ -34,7 +31,7 @@ export default function About() {
         </Card>
       </div>
       <div className="flex justify-center space-x-6">
-        <Card className="p-2 2xl:w-[500px]">
+        <Card>
           <CardHeader className="text-pretty text-3xl font-bold">
             What is Osmium and how does it solve the problem ?
           </CardHeader>

diff --git a/src/app/components/contact.tsx b/src/app/components/contact.tsx
@@ -1,6 +1,13 @@
 'use client'
 
 import { Button } from '@/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/ui/card'
 import {
   Form,
   FormControl,
@@ -22,6 +29,13 @@ import { AiOutlineLoading3Quarters } from 'react-icons/ai'
 import { toast } from 'sonner'
 import * as z from 'zod'
 
+const features = [
+  'Develop your ecosystem',
+  'Improve Developper Experience',
+  'Enhance your development processes',
+  'Access cutting-edge technology solutions',
+]
+
 const formSchema = z.object({
   name: z.string().min(2).max(50),
   email: z.string().email().min(2).max(50),
@@ -84,30 +98,52 @@ export default function Contact() {
 
   return (
     <section
-      className="my-52 flex w-full flex-col items-center py-24"
+      className="m-4 flex flex-col items-center justify-center sm:h-screen"
       id="contact"
     >
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-          <div className="flex w-full flex-col justify-between lg:flex-row lg:space-x-20">
-            <div className="h-96 w-full max-w-96">
-              <p className="text-4xl font-bold text-primary">Contact</p>
+          <div className="flex w-full flex-col justify-between md:flex-row md:space-x-20">
+            <div className="w-full ">
               <div className="mt-4 text-lg text-foreground">
-                <p className="text-2xl font-semibold">
-                  We are dedicated to improving the development of your
-                  ecosystem. By contacting us, you can:
-                </p>
-                <ul className="mt-2 list-inside list-disc text-muted-foreground">
-                  <li className="mt-2">Enhance your development processes</li>
-                  <li className="mt-2">Receive expert advice and support</li>
-                  <li className="mt-2">Streamline your project management</li>
-                  <li className="mt-2">
-                    Access cutting-edge technology solutions
-                  </li>
-                </ul>
+                <Card className="">
+                  <CardHeader className="text-center">
+                    <CardTitle className="mb-4 text-2xl font-semibold">
+                      Maybe You...
+                    </CardTitle>
+                    <CardDescription className="font-light text-gray-500 dark:text-gray-400 sm:text-lg">
+                      Relevant for Start up & tech companies.
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    {features.map((feature) => (
+                      <ul
+                        role="list"
+                        className="mb-8 space-y-4 text-left"
+                        key={feature}
+                      >
+                        <li className="flex items-center space-x-3">
+                          <svg
+                            className="h-5 w-5 flex-shrink-0 text-green-500 dark:text-green-400"
+                            fill="currentColor"
+                            viewBox="0 0 20 20"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              fillRule="evenodd"
+                              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                              clipRule="evenodd"
+                            ></path>
+                          </svg>
+                          <span>{feature}</span>
+                        </li>
+                      </ul>
+                    ))}
+                  </CardContent>
+                </Card>
               </div>
             </div>
-            <div className="flex w-72 flex-col sm:w-[500px] ">
+            <div className="flex flex-col sm:mt-0 ">
               <FormField
                 control={form.control}
                 name="name"

diff --git a/src/app/components/faq.tsx b/src/app/components/faq.tsx
@@ -7,14 +7,10 @@ import {
 
 export default function Faq() {
   return (
-    <section className="my-40 flex w-full flex-col items-center space-y-4 px-2">
+    <section className="flex h-screen w-full flex-col items-center justify-center space-y-4 px-4">
       <p className="text-3xl font-bold">Common Questions</p>
       <div className="flex w-full items-center justify-center">
-        <Accordion
-          type="single"
-          collapsible
-          className="w-96 md:w-[600px] xl:w-[750px]"
-        >
+        <Accordion type="single" collapsible className="w-full">
           <AccordionItem value="item-1">
             <AccordionTrigger>
               Will you be supporting the Solidity language?

diff --git a/src/app/components/features.tsx b/src/app/components/features.tsx
@@ -58,7 +58,7 @@ function Element({
           <p
             className={clsx(
               'text-start text-sm text-gray-500 transition-all duration-300 ease-linear dark:text-gray-400 ',
-              showDesc ? 'h-32 opacity-100 sm:h-20' : 'h-0 opacity-0',
+              showDesc ? 'h-36 opacity-100 sm:h-20 md:h-28' : 'h-0 opacity-0',
             )}
           >
             {showDesc ? description : null}
@@ -75,25 +75,23 @@ function Element({
 export function Features() {
   const [current, setCurrent] = useState(0)
   return (
-    <div className="my-32 flex items-center justify-center sm:px-2 md:px-8 lg:px-0 xl:px-12">
-      <Card className="flex w-full max-w-[1000px] justify-around p-4 md:p-6">
-        <div className="space-y-2 p-4">
-          <div className="space-y-2">
-            {list.map((item, index) => (
-              <Element
-                key={index}
-                {...item}
-                setCurrent={setCurrent}
-                current={current}
-                index={index}
-              />
-            ))}
-          </div>
+    <div className="flex h-screen items-center justify-center">
+      <Card className="flex w-full  flex-col-reverse items-center justify-around p-4 md:flex-row md:items-start md:p-6">
+        <div className="space-y-2 pt-2">
+          {list.map((item, index) => (
+            <Element
+              key={index}
+              {...item}
+              setCurrent={setCurrent}
+              current={current}
+              index={index}
+            />
+          ))}
         </div>
-        <div className="flex h-fit w-96 items-center justify-center md:w-[500px]">
+        <div className="flex h-fit items-center justify-center md:w-[500px]">
           <Image
             alt={list[current].alt}
-            className="h-auto w-full rounded-lg"
+            className="w-60 rounded-lg lg:w-96 "
             src={list[current].src}
           />
         </div>

diff --git a/src/app/components/footer.tsx b/src/app/components/footer.tsx
@@ -11,7 +11,7 @@ export default function Footer() {
     'https://marketplace.visualstudio.com/items?itemName=OsmiumToolchains.osmium-solidity-extension'
   const github = 'https://github.com/astrodevs-labs/osmium'
   return (
-    <footer className="mx-8 flex justify-center">
+    <footer className="flex justify-center">
       <div className="flex w-full justify-between border-t-2 border-solid border-gray-400">
         <div className="mt-4 w-60 items-center space-x-2 sm:flex">
           <div className="h-20 w-32">

diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
@@ -24,7 +24,7 @@ export default function Header() {
     }
   }, [])
   return (
-    <header className="sticky top-0 z-20 flex flex-row justify-between bg-background p-4">
+    <header className="sticky top-0 z-20 flex flex-row justify-between bg-background py-4">
       <div className="flex items-baseline space-x-10">
         <h1 className="mr-2 hidden text-4xl font-bold md:block">Osmium</h1>
         <nav>

diff --git a/src/app/components/hero.tsx → src/app/components/hero/hero.tsx b/src/app/components/hero.tsx → src/app/components/hero/hero.tsx
@@ -5,14 +5,14 @@ import RibbonEffect from './ribbonEffect'
 export default function Hero() {
   return (
     <section
-      className="mb-16 flex flex-col items-center justify-center space-y-8 py-24 2xl:mb-48"
+      className="my-16 flex flex-col items-center justify-center space-y-8 px-4 lg:px-16 2xl:px-32"
       id="home"
     >
       <div className="relative m-44 flex h-fit w-full flex-col justify-center overflow-hidden rounded-md bg-black">
         <p className="z-10 text-5xl font-bold text-osmium sm:text-8xl">
           Osmium
         </p>
-        <p className="z-10 text-3xl sm:text-5xl">
+        <p className="z-10 text-3xl font-medium sm:text-5xl">
           <strong>Develop</strong>, <strong>Build</strong> and
           <br />
           <strong>Deploy</strong> smart contracts easily

diff --git a/src/app/components/ribbonEffect.tsx → src/app/components/hero/ribbonEffect.tsx b/src/app/components/ribbonEffect.tsx → src/app/components/hero/ribbonEffect.tsx