Redesign feature

.env.example

@@ -2,4 +2,8 @@
 NEXT_PUBLIC_APP_HOST =
 
 # Analytics & trackings
-NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = 
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = 
+
+# Hashnode configuration connection
+HASHNODE_HOST = 
+HASHNODE_TOKEN =

app/(home)/cta.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+import * as React from 'react'
+import { Button } from '~/components/ui/button'
+
+export function CTASection(): React.ReactElement {
+  return (
+    <div className="flex flex-col py-20 laptop:py-36 items-center">
+      <h2 className="text-3xl laptop:text-4xl !leading-tight text-center font-medium mt-10">
+        Let’s make your idea
+        <br className="hidden tablet:block" />
+        become reality
+      </h2>
+
+      <div className="flex mt-16 justify-center">
+        <Button variant={'secondary'} size={'lg'} asChild>
+          <Link href={'/contact'}>
+            Connect now <i className="fi fi-rr-heart" />
+          </Link>
+        </Button>
+      </div>
+    </div>
+  )
+}

app/(home)/hero.tsx

@@ -0,0 +1,83 @@
+import Link from 'next/link'
+import * as React from 'react'
+import { Button } from '~/components/ui/button'
+
+function OpenWorkBadge(): React.ReactElement {
+  return (
+    <div className="flex justify-center items-center px-4 h-9 rounded-full bg-green-200 text-green-800 text-xs gap-2 font-medium transition-all duration-300 hover:scale-95 cursor-pointer">
+      <span className="h-2 w-2 rounded-full bg-green-800" />
+      Open to work
+    </div>
+  )
+}
+
+export function HeroSection(): React.ReactElement {
+  return (
+    <section className="flex flex-col py-20 laptop:py-36 items-center">
+      <OpenWorkBadge />
+
+      <h2 className="text-3xl laptop:text-4xl !leading-tight text-center font-medium mt-10">
+        Hello, I’am a designer, developer & writer
+        <br className="hidden tablet:block" />
+        <span className="text-foreground/60">
+          {' '}
+          loves to crafts products, apps, &
+          <br className="hidden tablet:block" />
+          solutions for people
+        </span>
+      </h2>
+
+      <div className="mt-10 tablet:w-10/12 laptop:w-5/12">
+        <p className="text-foreground/80 text-center !leading-relaxed">
+          Currently focus to work on business, projects, and creating side
+          hustles -{' '}
+          <Link
+            className="font-medium text-foreground"
+            href={'https://sonibble.com'}
+          >
+            Sonibble
+          </Link>
+          ,{' '}
+          <Link
+            className="font-medium text-foreground"
+            href={'https://weebo.com'}
+          >
+            Weebo
+          </Link>
+          ,{' '}
+          <Link
+            className="font-medium text-foreground"
+            href={'https://weelab.com'}
+          >
+            Weelab
+          </Link>
+          . Hunting a new opportunity to join the teams to build a things.
+        </p>
+      </div>
+
+      <div className="flex flex-col laptop:flex-row justify-center gap-4 mt-16">
+        <Button
+          variant={'secondary'}
+          className="transition-all duration-300 hover:scale-95"
+          size={'lg'}
+          asChild
+        >
+          <Link href={'/contact'}>
+            Connect <i className="fi fi-rr-heart" />
+          </Link>
+        </Button>
+
+        <Button
+          variant={'outline'}
+          className="transition-all duration-300 hover:scale-95"
+          size={'lg'}
+          asChild
+        >
+          <Link href={'/about'}>
+            About me <i className="fi fi-rr-arrow-right" />
+          </Link>
+        </Button>
+      </div>
+    </section>
+  )
+}

app/(home)/newsletter.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { NewsletterForm } from '~/blog/newsletter'
+
+export function NewsletterSection(): React.ReactElement {
+  return (
+    <div className="flex flex-col py-20 laptop:py-36 items-center">
+      <h2 className="text-3xl laptop:text-4xl !leading-tight text-center font-medium mt-10">
+        Newsletter
+      </h2>
+
+      <p className="text-foreground/80 text-center tablet:w-8/12 laptop:w-5/12 mt-7 !leading-relaxed">
+        Join the weekly newsletter about new idea, tips , and tricks about
+        design, development, business, productivity and indie hackings. I
+        sharing a lot of resources everyday and will notify to you.
+      </p>
+
+      <div className="flex mt-16 w-full laptop:w-7/12 justify-center">
+        <NewsletterForm />
+      </div>
+    </div>
+  )
+}

app/(home)/page.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { Metadata } from 'next'
+import {
+  defaultOpenGraphMetadata,
+  defaultTwitterMetadata,
+} from '../shared-metadata'
+import { HeroSection } from './hero'
+import { NewsletterSection } from './newsletter'
+import { CTASection } from './cta'
+
+export const metadata: Metadata = {
+  title: 'Nyoman Sunima',
+  description:
+    'Focused on crafting digital products, website, web app, mobile app to help business.',
+  openGraph: {
+    ...defaultOpenGraphMetadata,
+    title: 'Nyoman Sunima',
+    description:
+      'Focused on crafting digital products, website, web app, mobile app to help business.',
+  },
+  twitter: {
+    ...defaultTwitterMetadata,
+    title: 'Nyoman Sunima',
+    description:
+      'Focused on crafting digital products, website, web app, mobile app to help business.',
+  },
+}
+
+export default function HomePage(): React.ReactElement {
+  return (
+    <div className="px-5 laptop:px-0 container mx-auto">
+      <HeroSection />
+      <NewsletterSection />
+      <CTASection />
+    </div>
+  )
+}

src/app/about/about-activity-section.tsx → app/about/activity.tsx

@@ -1,19 +1,16 @@
-export default function AboutActivitySection() {
+import * as React from 'react'
+
+export function ActivitySection(): React.ReactElement {
   return (
-    <section className="flex flex-col container mx-auto laptop:px-20 px-5 items-center">
-      <h2
-        className="text-5xl laptop:text-8xl !leading-tight"
-        data-animation="text-char-opacity"
-        data-cursor-size="200"
-        data-cursor-exclusion
-      >
-        <span className="laptop:pl-20"></span>I did research, planning, design,
-        development & ship the product.
+    <section className="flex flex-col py-20 laptop:py-36">
+      <h2 className="text-3xl laptop:text-4xl !leading-tight font-medium">
+        I did research, planning, design, develop
+        <br className="hidden laptop:block" />& ship the product
       </h2>
 
-      <div className="grid grid-cols-1 laptop:grid-cols-2 text-xl leading-relaxed gap-10 mt-20 laptop:mt-36">
-        <div data-animation="slide-up">
-          <p data-animation-target>
+      <div className="flex flex-col laptop:flex-row gap-y-10 gap-x-14 mt-10">
+        <div className="flex flex-col gap-10">
+          <p className="text-foreground/80 !leading-relaxed">
             My daily activities revolve around the exciting process of
             transforming concepts into fully-fledged applications. From the very
             inception of an idea, I dive into thorough research. Understanding
@@ -23,9 +20,22 @@ export default function AboutActivitySection() {
             This stage lays the foundation for a successful product development
             process.
           </p>
+          <p className="text-foreground/80 !leading-relaxed">
+            I believe in the power of shipping products that make a real impact.
+            With careful testing, bug fixes, and optimizations, I ensure that
+            the application is polished and ready for launch. The satisfaction
+            of seeing the finished product out in the world, making a difference
+            in people's lives, is truly gratifying. As an indie maker, I embrace
+            the entrepreneurial spirit, taking on the entire process from
+            ideation to deployment. I relish the freedom to explore my
+            creativity and the ability to execute projects with autonomy. It
+            allows me to deliver unique and personalized solutions that truly
+            reflect my vision as a designer and developer.
+          </p>
         </div>
-        <div data-animation="slide-up">
-          <p data-animation-target>
+
+        <div className="flex flex-col gap-10">
+          <p className="text-foreground/80 !leading-relaxed">
             Design is where the magic happens. With a keen eye for aesthetics
             and an understanding of user experience, I create captivating
             interfaces that strike a perfect balance between beauty and
@@ -38,20 +48,6 @@ export default function AboutActivitySection() {
             forms the backbone of the final product.
           </p>
         </div>
-        <div data-animation="slide-up">
-          <p data-animation-target>
-            I believe in the power of shipping products that make a real impact.
-            With careful testing, bug fixes, and optimizations, I ensure that
-            the application is polished and ready for launch. The satisfaction
-            of seeing the finished product out in the world, making a difference
-            in people's lives, is truly gratifying. As an indie maker, I embrace
-            the entrepreneurial spirit, taking on the entire process from
-            ideation to deployment. I relish the freedom to explore my
-            creativity and the ability to execute projects with autonomy. It
-            allows me to deliver unique and personalized solutions that truly
-            reflect my vision as a designer and developer.
-          </p>
-        </div>
       </div>
     </section>
   )

app/about/cta.tsx

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import * as React from 'react'
+
+export function CTASection(): React.ReactElement {
+  return (
+    <section className="flex flex-col py-20 laptop:py-36 items-center">
+      <Link
+        href={'/contact'}
+        className="text-3xl laptop:text-4xl !leading-tight font-medium text-center transition-all duration-300 hover:scale-95"
+      >
+        Alright, let’s connect
+        <br className="hidden laptop:block" />& build something
+      </Link>
+    </section>
+  )
+}

app/about/detail.tsx

@@ -0,0 +1,102 @@
+import Image from 'next/image'
+import * as React from 'react'
+
+// predefined images url for the gallery
+const images = [
+  'https://images.unsplash.com/photo-1537996194471-e657df975ab4?q=80&w=2838&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1542897644-e04428948020?q=80&w=3027&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1561969310-fa2e856250ba?q=80&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1540776398900-46755652c969?q=80&w=2914&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+]
+
+interface GalleryItemProps {
+  image: string
+}
+
+function GalleryItem({ image }: GalleryItemProps): React.ReactElement {
+  const imageUrl = image
+
+  return (
+    <div className="flex col-span-1 rounded-2xl p-1 border border-border bg-ambient cursor-pointer">
+      <picture className="relative w-full h-[390px] overflow-hidden rounded-xl">
+        <Image
+          src={imageUrl}
+          alt="Gallery"
+          fill
+          quality={100}
+          priority
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          className="object-cover transition-all duration-300 hover:scale-105"
+        />
+      </picture>
+    </div>
+  )
+}
+
+function GalleryList(): React.ReactElement {
+  return (
+    <div className="grid grid-cols-1 tablet:grid-cols-3 laptop:grid-cols-4 gap-3">
+      {images.map((image, index) => (
+        <GalleryItem image={image} key={index} />
+      ))}
+    </div>
+  )
+}
+
+export function DetailSection(): React.ReactElement {
+  return (
+    <section className="flex flex-col py-20 laptop:py-36">
+      <h2 className="text-3xl laptop:text-4xl !leading-tight font-medium">
+        Hello,
+      </h2>
+
+      <div className="flex mt-7 laptop:mt-10">
+        <p className="text-foreground/80 !leading-relaxed laptop:w-7/12">
+          Hi, My name is Nyoman Sunima, a product designer and creative
+          developer with a passion for solving problems. My journey as a
+          designer has been driven by the desire to create innovative solutions
+          that address real-world challenges. As a product designer, I
+          meticulously blend form and function to deliver seamless experiences.
+        </p>
+      </div>
+
+      <div className="flex mt-5 laptop:mt-16">
+        <p className="text-foreground/80 !leading-relaxed laptop:w-7/12 laptop:ml-28">
+          I believe that design should not only meet users' needs but also
+          exceed their expectations. By putting myself in the users' shoes and
+          prioritizing their perspectives, I ensure that every decision I make
+          is rooted in empathy and usability. The result? Intuitive and
+          delightful user experiences that leave a lasting impression.
+        </p>
+      </div>
+
+      <div className="my-24">
+        <GalleryList />
+      </div>
+
+      <div className="flex flex-col laptop:flex-row gap-y-10 gap-x-14">
+        <div className="flex flex-col gap-10">
+          <p className="text-foreground/80 !leading-relaxed">
+            But my expertise doesn't stop at design. I'm also a creative
+            developer equipped with technical skills to bring ideas to life.
+            Through my knowledge of programming languages and cutting-edge
+            technologies, I turn design concepts into fully functional and
+            interactive digital experiences. By combining design and
+            development,
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-10">
+          <p className="text-foreground/80 !leading-relaxed">
+            I create immersive solutions that captivate and engage audiences.
+            What truly sets me apart is my insatiable thirst for knowledge and
+            growth. I'm constantly exploring new frontiers and staying at the
+            forefront of emerging trends and technologies. This curiosity fuels
+            my ability to think outside the box and deliver forward-thinking
+            solutions that resonate with audiences.
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}