Make it pretty

shipixen/app/page.tsx

@@ -30,9 +30,10 @@ import {
 import { Button } from '@/components/shared/ui/button';
 import HomeList from '@/components/blog/HomeList';
 import stats from '@/data/stats';
+import { metadata } from '@/data/config/metadata';
 
 export default function Home() {
-  const users = stats.stars || 0 + stats.forks || 0;
+  const users = (stats.stars || 0) + (stats.forks || 0);
   return (
     <div className="flex flex-col w-full items-center fancy-overlay">
       {/* <LandingSocialProofBand invert={false} className="hidden md:flex">
@@ -98,7 +99,7 @@ export default function Home() {
         />
       </LandingPrimaryTextCtaSection>
 
-      <section className="container-narrow mt-12 p-6">
+      <section className="max-w-2xl 2xl:max-w-6xl w-full mt-12 p-6">
         <HomeList />
       </section>
 
@@ -201,7 +202,7 @@ export default function Home() {
       /> */}
 
       <LandingBandSection
-        title="Stars! Starts everywhere!"
+        title="Stars! Stars everywhere!"
         description="Our users love us! There's no place as beautiful to post a deal."
         supportingComponent={
           <LandingSocialProof
@@ -251,43 +252,43 @@ export default function Home() {
 
       <LandingTestimonialReadMoreWrapper size="md">
         <LandingTestimonialGrid
-          title="Hear It from Our Users"
+          title="Hear It from Our Users (Coming soon)"
           description="Discover what our happy customers have to say about their experience with our AI app:"
           testimonialItems={[
             {
               name: 'John Smith',
-              text: 'This app transformed our operations, boosting productivity like never before. Highly customizable and incredibly efficient!',
+              text: 'Unbelievable Black Friday deals! I saved so much on top-quality products. Highly recommend checking it out!',
               handle: '@john_smith',
               imageSrc: 'https://picsum.photos/id/64/100/100',
             },
             {
               name: 'Emily Johnson',
-              text: "Even with minimal tech knowledge, I could create my own app from scratch. It's empowering to have full control!",
+              text: "The best deals I've ever seen! Managed to get everything on my wishlist at a fraction of the price.",
               handle: '@emily_johnson',
               imageSrc: 'https://picsum.photos/id/65/100/100',
             },
             {
               name: 'David Rodriguez',
-              text: 'Thanks to the analytics tools, we identified bottlenecks and saved significantly on costs. Truly impressive!',
+              text: 'Incredible savings! The analytics tools helped me find the best deals quickly. Highly impressive!',
               handle: '@david_rodriguez',
               imageSrc: 'https://picsum.photos/id/669/100/100',
               featured: true,
             },
             {
               name: 'Mandy',
-              text: 'Excellent product!',
+              text: 'Amazing Black Friday deals!',
               handle: '@mandy',
               imageSrc: 'https://picsum.photos/id/829/100/100',
             },
             {
               name: 'Alex',
-              text: 'Can easily recommend!',
+              text: 'Found the best deals here! Highly recommend!',
               handle: '@alex',
               imageSrc: 'https://picsum.photos/100/100.webp?random=2',
             },
             {
               name: 'Sam',
-              text: 'I am very happy with the results.',
+              text: 'Extremely satisfied with the Black Friday savings.',
               handle: '@sam',
               imageSrc: 'https://picsum.photos/100/100.webp?random=3',
             },
@@ -360,22 +361,95 @@ export default function Home() {
 
       <LandingFaqCollapsibleSection
         title="Got Questions? We've Got Answers!"
-        description="Find answers to common inquiries about our AI app:"
+        description="Find answers to common inquiries about our deal & discount platform:"
         faqItems={[
           {
-            question: 'Can I integrate my existing systems?',
+            question: 'How do I submit a deal?',
+            answer: (
+              <>
+                You can submit a deal by creating a pull request at{' '}
+                <a
+                  href="https://github.com/danmindru/rare-big-deal/pulls"
+                  className="underline"
+                >
+                  github.com/danmindru/rare-big-deal/pulls
+                </a>
+                . All submissions are automatically accepted in order of
+                submission.
+              </>
+            ),
+          },
+          {
+            question: 'Where can I see the submitted deals?',
+            answer: (
+              <>
+                All submitted deals are featured on our webpage at{' '}
+                <a href="https://rarebigdeal.com" className="underline">
+                  rarebigdeal.com
+                </a>
+                . The submissions will be categorized and displayed
+                alphabetically and you'll get a standalone page for your deal.
+              </>
+            ),
+          },
+          {
+            question: 'Are all deals accepted?',
+            answer:
+              'Yes, as long as you have a deal, it will be accepted and featured on our webpage.',
+          },
+          {
+            question: 'Is the process automated?',
+            answer:
+              'Yes, everything is automated after submission. If you need any manual changes, please raise a pull request.',
+          },
+          {
+            question: 'Can I make changes to my submitted deal?',
+            answer:
+              'Yes, you can make changes by raising a pull request with the necessary modifications.',
+          },
+          {
+            question: 'How are deals ordered?',
+            answer:
+              'Deals are ordered based on the time of submission on the Github repo, with the latest submissions appearing at the bottom. On the webpage, they ordered b alphabetically and grouped by category.',
+          },
+          {
+            question: 'Is there a limit to the number of deals I can submit?',
+            answer:
+              'No, there is no limit to the number of deals you can submit.',
+          },
+          {
+            question: 'Do I need coding skills to submit a deal?',
+            answer:
+              'No, you do not need coding skills. Simply create a pull request with your deal details.',
+          },
+          {
+            question:
+              'How long does it take for my deal to appear on the webpage?',
             answer:
-              'Absolutely! Our app seamlessly integrates with various other tools and systems.',
+              'Deals are processed automatically and should appear on the webpage shortly after submission.',
+          },
+          {
+            question: 'Can I feature my deal at the top of the list?',
+            answer: (
+              <>
+                There is no option to do that currently. Get in touch with us at{' '}
+                <a href={metadata.twitter} className="underline">
+                  here
+                </a>{' '}
+                for more information.
+              </>
+            ),
           },
           {
-            question: 'Do I need coding skills?',
+            question:
+              'What information do I need to include in my deal submission?',
             answer:
-              'Nope! Our user-friendly interface empowers anyone to create and manage their own app.',
+              'Please take a previous deal as an example and include all the necessary information in your submission. You need a name, short description and a deal text as a minimum.',
           },
           {
-            question: 'Is my data secure?',
+            question: 'Can I delete my submitted deal?',
             answer:
-              'Absolutely! We take data security seriously, employing robust measures to keep your information safe.',
+              'If you need to delete your submitted deal, please raise a pull request with the request for deletion.',
           },
         ]}
         withBackground

shipixen/app/tag-data.json

@@ -1 +1 @@
-{"design":1,"graphics":1,"marketing":4,"productivity":6,"efficiency":6,"tools":8,"ai":5,"machine-learning":3,"automation":3,"seo":3,"promotion":2,"developer":2,"macos":2,"voice":2,"text-to-speech":2,"books":1,"learning":1,"programming":1,"themes":1,"plugins":1,"customization":1,"nextjs":3,"react":3,"saas":4,"optimization":1,"startup":1,"business":1,"health":1,"fitness":1,"wellness":1}
+{"design":1,"graphics":1,"marketing":4,"productivity":7,"efficiency":7,"tools":9,"ai":6,"machine-learning":4,"automation":4,"seo":3,"promotion":2,"developer":2,"macos":2,"voice":2,"text-to-speech":2,"books":1,"learning":1,"programming":1,"themes":1,"plugins":1,"customization":1,"optimization":1,"startup":1,"saas":2,"business":1,"health":1,"fitness":1,"wellness":1,"nextjs":1,"react":1}

shipixen/components/blog/HomeList.tsx

@@ -233,7 +233,7 @@ function CategorySection({
         selectedSubcategories={selectedSubcategories}
         handleSubcategoryFilter={handleSubcategoryFilter}
       />
-      <ul className="grid gap-4">
+      <ul className="grid 2xl:grid-cols-2 gap-4">
         {sortedPosts
           .filter(
             (post) =>
@@ -271,10 +271,10 @@ function SubcategoryFilter({
         <button
           key={subcategory}
           onClick={() => handleSubcategoryFilter(category, subcategory!)}
-          className={`px-4 py-2 rounded transition-colors ${
+          className={`text-xs px-4 py-2 rounded transition-colors font-display ${
             selectedSubcategories.includes(subcategory!)
               ? 'bg-primary-500 text-white'
-              : 'bg-gray-200 text-gray-700'
+              : 'bg-primary-100/30 text-gray-700 dark:bg-primary-800/20 dark:text-white'
           }`}
         >
           {subcategory}

shipixen/components/blog/home/PostItem.tsx

@@ -1,7 +1,6 @@
 'use client';
 import React, { useState } from 'react';
 import clsx from 'clsx';
-import { CoreContent } from '@shipixen/pliny/utils/contentlayer';
 import { Blog } from 'shipixen-contentlayer/generated';
 import { formatDate } from '@shipixen/pliny/utils/formatDate';
 import { siteConfig } from '@/data/config/site.settings';
@@ -13,6 +12,27 @@ import { InteractiveStatCard } from '@/components/shared/InteractiveStatCard';
 import { StatCardButtonHoverComponent } from '@/components/shared/StatCardButtonHoverComponent';
 import { cn } from '@/lib/utils';
 import ReactMarkdown from 'react-markdown';
+import { CoreContent } from '@shipixen/pliny/utils/contentlayer';
+
+function hashStringToColor(str: string): string {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const color = `hsl(${hash % 360}, 50%, 70%)`;
+  return color;
+}
+
+function processTitle(title: string): string {
+  const delimiters = [':', ',', '.', '-'];
+  for (const delimiter of delimiters) {
+    if (title.includes(delimiter)) {
+      title = title.split(delimiter)[0];
+    }
+  }
+  const words = title.split(' ').slice(0, 5);
+  return words.join(' ');
+}
 
 export function PostItem({
   post,
@@ -35,10 +55,13 @@ export function PostItem({
   } = post;
   const firstImage = images?.[0];
   const [showDescription, setShowDescription] = useState(false);
+  const fallbackImage = '/static/images/logo.png';
+  const tintColor = hashStringToColor(title);
+  const processedTitle = processTitle(title);
 
   return (
     <InteractiveStatCard
-      href={slug}
+      href={`/products/${slug}`}
       disabled={false}
       hoverComponent={
         <StatCardButtonHoverComponent
@@ -56,50 +79,56 @@ export function PostItem({
       )}
     >
       <div className="w-full px-3 py-1">
-        {logo || images[0] ? (
+        {logo || images?.[0] ? (
           <Image
             aria-hidden="true"
             className="absolute w-full h-full left-0 top-0 -z-100 opacity-20 dark:opacity-20 saturate-200 dark:saturate-[3] blur-2xl bg-cover"
-            src={logo || images[0]}
+            src={logo || images?.[0]}
             alt={title}
             width={200}
             height={200}
           />
-        ) : null}
+        ) : (
+          <div
+            className="absolute w-full h-full left-0 top-0 -z-100 opacity-20 dark:opacity-20 saturate-200 dark:saturate-[3] blur-2xl bg-cover"
+            style={{
+              backgroundImage: `url(${fallbackImage})`,
+              backgroundColor: tintColor,
+            }}
+          />
+        )}
 
         <section className={clsx('w-full flex items-center gap-2')}>
-          <div className="absolute top-0 left-1 h-4 flex items-center justify-center opacity-30">
-            <span className="text-[8px]">1</span>
-          </div>
-
           <div className="flex gap-2 items-center truncate">
             <figure
               className={clsx(
                 'w-8 h-8 flex-shrink-0 rounded-lg overflow-hidden bg-white/50 dark:bg-black/50 border-1 border-solid border-white dark:border-black',
               )}
             >
-              {logo || images[0] ? (
+              {logo || images?.[0] ? (
                 <Image
-                  src={logo || images[0]}
+                  src={logo || images?.[0]}
                   alt="Product Thumbnail"
                   width={200}
                   height={200}
                 />
-              ) : null}
+              ) : (
+                <div
+                  className="w-full h-full"
+                  style={{
+                    backgroundImage: `url(${fallbackImage})`,
+                    backgroundColor: tintColor,
+                  }}
+                />
+              )}
             </figure>
 
             <div className="w-full h-full flex flex-col justify-between gap-1 dark:text-slate-300 truncate">
-              <p className="text-xs sm:text-sm truncate">{title}</p>
-
-              {/* {index === 0 ? (
-                    <Typography className="mb-4 truncate">
-                      {post.tagline}
-                    </Typography>
-                  ) : null} */}
+              <p className="text-xs sm:text-sm truncate">{processedTitle}</p>
             </div>
           </div>
 
-          <div className="flex-shrink-0 ml-auto flex gap-2 tabular-nums">
+          <div className="flex-shrink-0 ml-auto flex gap-2 tabular-nums max-w-sm text-right">
             <span
               className={cn(
                 'flex-col flex gap-1 items-center text-xs p-2 min-w-[40px]',

shipixen/components/landing/LandingBand.tsx

@@ -44,7 +44,7 @@ export const LandingBandSection = ({
       <div className="w-full p-6 max-w-full container-wide gap-6 items-center lg:flex lg:flex-row">
         <div
           className={clsx(
-            'w-full lg:w-auto flex flex-col flex-shrink-0 max-w-lg xl:max-w-3xl',
+            'w-full lg:w-auto flex flex-col flex-shrink-0 max-w-xl xl:max-w-3xl',
             withBackground ? 'text-black' : '',
           )}
         >

shipixen/data/products/bannerify.mdx

@@ -1,18 +1,17 @@
 ---
-title: 'Bannerify'
-date: '2024-11-16'
+title: >
+  Bannerify
+date: 2024-11-16
 tags:
-  - 'Design'
-  - 'Graphics'
-  - 'Marketing'
-images:
-  - '/static/images/product/bannerify/og-image.png'
-logo: '/static/images/product/bannerify/logo.png'
-summary: 'API for Automated Image. Scale your marketing with fastest image generation service'
-category: 'Design Tools'
-deal: '40% OFF on All plans with code **BF2024**'
-subcategory: 'AI Productivity & Learning Tools'
-website: 'https://bannerify.co'
+  - Design
+  - Graphics
+  - Marketing
+summary: >
+  API for Automated Image. Scale your marketing with fastest image generation service
+category: Design Tools
+deal: 40% OFF on All plans with code **BF2024**
+subcategory: AI Productivity & Learning Tools
+website: https://bannerify.co
 layout: PostLayout
 ---