Fix styles

src/components/FeatureCard/index.tsx

@@ -34,7 +34,7 @@ const FeatureCard = ({
       alignItems='center'
       rowGap='10px'
       borderRadius='10px'
-      cursor='pointer'
+      cursor={selectable ? 'pointer' : undefined}
     >
       <Box display='flex' flexDirection='row' alignItems='center'>
         <Box flexGrow='1'>

src/pages/AddProject/index.tsx

@@ -942,7 +942,8 @@ const AddProject = () => {
                               feature
                             )}
                             toggleSelect={() => {
-                              setSelectedFeature(feature);
+                              if (feature.featureType !== 'backend')
+                                setSelectedFeature(feature);
                               if (
                                 featuresForm.values.selectedFeatures &&
                                 !featuresForm.values.selectedFeatures.includes(
@@ -994,10 +995,15 @@ const AddProject = () => {
                       <Carousel {...carouselSettings}>
                         {selectedFeature?.wireframes?.map((wireframe) => (
                           <Box
+                            height='0'
                             width='150px'
-                            height='300px'
+                            overflow='hidden'
-                            background={`url(${wireframe.src})`}
+                            paddingTop='calc(591.44 / 1127.34 * 100%)'
-                          ></Box>
+                            position='relative'
+                            className='wireframe'
+                          >
+                            <img src={wireframe.src} alt='Wireframe' />
+                          </Box>
                         ))}
                       </Carousel>
                     </>

src/pages/AddProject/styles.ts

@@ -15,4 +15,14 @@ export const Wrapper = styled.div<WrapperProps>`
       stroke: ${({ theme, color }) => theme.colors[color || 'client'].main};
     }
   }
+
+  .wireframe {
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
 `;

src/pages/Auth/Login/index.tsx

@@ -135,13 +135,6 @@ const Login = () => {
                   loading={loading}
                   disabled={loading}
                 />
-                {/* <Button
-                  variant='secondary-action'
-                  fullWidth
-                  color='client'
-                  text='Login with Google'
-                  iconLeft={<Google />}
-                /> */}
               </Box>
               <Box display='flex' flexDirection='row'>
                 <Box flexGrow='1'>
@@ -150,9 +143,6 @@ const Login = () => {
                   </Text>
                   <Link href='/signup'>Signup</Link>
                 </Box>
-                <Link href='/' color='gray'>
-                  Build a Project
-                </Link>
               </Box>
             </Box>
           </form>

src/pages/Auth/Signup/index.tsx

@@ -125,13 +125,6 @@ const Signup = () => {
                   loading={loading}
                   disabled={loading}
                 />
-                {/* <Button
-                  variant='secondary-action'
-                  fullWidth
-                  color='client'
-                  text='Signup with Google'
-                  iconLeft={<Google />}
-                /> */}
               </Box>
               <Box display='flex' flexDirection='row'>
                 <Box flexGrow='1'>
@@ -140,9 +133,6 @@ const Signup = () => {
                   </Text>
                   <Link href='/login'>Login</Link>
                 </Box>
-                <Link href='/' color='gray'>
-                  Build a Project
-                </Link>
               </Box>
             </Box>
           </form>