Improve VisD & copy on landing page

web/components/feed-create.tsx

@@ -7,44 +7,52 @@ import { ContractsGrid } from './contracts-list'
 import { Contract } from '../../common/contract'
 import { Col } from './layout/col'
 import clsx from 'clsx'
+import { SparklesIcon } from '@heroicons/react/solid'
+import { Row } from './layout/row'
 
 export function FeedPromo(props: { hotContracts: Contract[] }) {
   const { hotContracts } = props
 
   return (
     <>
-      <Col className="w-full bg-white p-6 sm:rounded-lg">
+      <Col className="m-6 mb-1 text-center sm:m-12">
         <h1 className="mt-4 text-4xl sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
-          <div className="mb-2">Create your own</div>
+          <div className="font-semibold sm:mb-2">
-          <div className="bg-gradient-to-r from-teal-400 to-green-400 bg-clip-text  font-bold text-transparent">
+            A{' '}
-            prediction markets
+            <span className="bg-gradient-to-r from-teal-400 to-green-400 bg-clip-text font-bold text-transparent">
+              market{' '}
+            </span>
+            for
+          </div>
+          <div className="font-semibold">
+            every{' '}
+            <span className="bg-gradient-to-r from-teal-400 to-green-400 bg-clip-text font-bold text-transparent">
+              prediction
+            </span>
           </div>
         </h1>
         <Spacer h={6} />
         <div className="mb-4 text-gray-500">
-          Find prediction markets run by your favorite creators, or make your
+          Find prediction markets on any topic imaginable. Or create your own!
-          own.
           <br />
-          Sign up to get M$ 1,000 for free and start trading!
+          Sign up to get M$ 1,000 and start trading.
           <br />
         </div>
         <Spacer h={6} />
         <button
-          className="btn btn-lg self-center border-none bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
+          className="btn btn-lg self-center border-none bg-gradient-to-r from-teal-500 to-green-500  normal-case hover:from-teal-600 hover:to-green-600"
           onClick={firebaseLogin}
         >
-          Sign up now
+          Sign up for free
         </button>{' '}
       </Col>
 
-      <Spacer h={6} />
+      <Spacer h={12} />
-      {/* 
-      <TagsList
-        className="mt-2"
-        tags={['#politics', '#crypto', '#covid', '#sports', '#meta']}
-      />
-      <Spacer h={6} /> */}
 
+      <Row className="m-4 mb-6 items-center gap-1 text-xl font-semibold text-gray-800">
+        <SparklesIcon className="inline h-5 w-5" aria-hidden="true" />
+        Trending today
+      </Row>
       <ContractsGrid
         contracts={hotContracts?.slice(0, 10) || []}
         showHotVolume