feat: 2025 website

Author: kidchenko

.gitignore

@@ -30,3 +30,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+CLAUDE.md
+.claude

public/assets/dark-submarine.png

@@ -3,7 +3,7 @@ import clsx from 'clsx'
 
 export function Button({ href, className, ...props }) {
   className = clsx(
-    'inline-flex justify-center rounded-2xl bg-blue-600 p-4 text-base font-semibold text-white hover:bg-blue-500 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-white/70',
+    'inline-flex justify-center rounded-2xl bg-gradient-to-r from-dotnet-purple to-dotnet-purple-light p-4 px-8 text-base font-semibold text-white hover:from-dotnet-purple-light hover:to-dotnet-blue transition-all duration-300 shadow-lg shadow-dotnet-purple/30 hover:shadow-xl hover:shadow-dotnet-purple/50 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dotnet-purple active:scale-95 hover:scale-105',
     className
   )
 

public/assets/light mode-1.png

@@ -4,13 +4,59 @@ import { Button } from '@/components/Button'
 
 export function Footer() {
   return (
-    <footer className="py-16">
-      <Container className="flex flex-col items-center justify-between md:flex-row">
-        <Logo className="h-12 w-auto text-slate-900" />
-        <Button href="https://dotnetconfth2024.eventbrite.com/?ref=site" target="_blank" rel="noreferrer" >Get your tickets</Button>
-        <p className="mt-6 text-base text-slate-500 md:mt-0">
-          .NET Conf Thailand is a free event from developers to developers. | Made with &#10084; in Bangkok
-        </p>
+    <footer className="py-16 bg-gray-900 border-t border-dotnet-purple/20 relative">
+      {/* Smooth transition gradient overlay */}
+      <div className="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-gray-900 via-gray-900/70 to-transparent pointer-events-none" />
+      <Container className="relative">
+        <div className="flex flex-col items-center gap-8">
+          {/* Logo */}
+          <Logo className="h-12 w-auto" />
+
+          {/* Social Media Links */}
+          <div className="flex items-center gap-6">
+            <a
+              href="https://www.linkedin.com/company/net-thailand/"
+              target="_blank"
+              rel="noreferrer"
+              className="text-gray-400 hover:text-dotnet-blue transition-colors"
+              aria-label="LinkedIn"
+            >
+              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+              </svg>
+            </a>
+            <a
+              href="https://www.facebook.com/dotNETConfTH/"
+              target="_blank"
+              rel="noreferrer"
+              className="text-gray-400 hover:text-dotnet-blue transition-colors"
+              aria-label="Facebook Page"
+            >
+              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+              </svg>
+            </a>
+            <a
+              href="https://www.facebook.com/groups/dotnetthailand/"
+              target="_blank"
+              rel="noreferrer"
+              className="text-gray-400 hover:text-dotnet-blue transition-colors"
+              aria-label="Facebook Group"
+            >
+              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 13.5h-2.62v7.5h-3.12v-7.5H9.75V10.5h2.404V8.625c0-2.393 1.07-3.75 3.75-3.75.563 0 1.185.094 1.781.187v2.719h-1.219c-.937 0-1.125.422-1.125 1.078V10.5h2.532l-.379 3z"/>
+              </svg>
+            </a>
+          </div>
+
+          {/* Button */}
+          <Button className="text-sm px-6 py-2.5">Tickets - Coming Soon</Button>
+
+          {/* Footer Text */}
+          <p className="text-sm text-gray-400 text-center">
+            .NET Conf Thailand is a free event from developers to developers. | Made with &#10084; in Bangkok
+          </p>
+        </div>
       </Container>
     </footer>
   )

public/logo/bot.png

@@ -5,22 +5,22 @@ import { Logo } from '@/components/Logo'
 
 export function Header() {
   return (
-    <header className="relative z-50 pb-11 lg:pt-11">
+    <header className="relative z-50 pb-11 lg:pt-11 bg-gray-900">
       <Container className="flex flex-wrap items-center justify-center sm:justify-between lg:flex-nowrap">
         <div className="mt-10 lg:mt-0 lg:grow lg:basis-0">
-          <Logo className="h-12 w-auto text-slate-900" />
+          <Logo className="h-12 w-auto" />
         </div>
-        <div className="order-first -mx-4 flex flex-auto basis-full overflow-x-auto whitespace-nowrap border-b border-blue-600/10 py-4 font-mono text-sm text-blue-600 sm:-mx-6 lg:order-none lg:mx-0 lg:basis-auto lg:border-0 lg:py-0">
+        <div className="order-first -mx-4 flex flex-auto basis-full overflow-x-auto whitespace-nowrap border-b border-dotnet-purple/30 py-4 font-mono text-sm text-gray-200 sm:-mx-6 lg:order-none lg:mx-0 lg:basis-auto lg:border-0 lg:py-0">
           <div className="mx-auto flex items-center gap-4 px-4">
             <p>
-              <time dateTime="2024-11-25">23 of November, 2024</time>
+              <time dateTime="2025-11-29">29 of November, 2025</time>
             </p>
             <DiamondIcon className="h-1.5 w-1.5 overflow-visible fill-current stroke-current" />
-            <a href='https://maps.app.goo.gl/so6HqiA4S9ujQJuj6' target="_blank" rel="noreferrer">Seven Peaks Software - Bangkok</a>
+            <p>Location: To be Announced</p>
           </div>
         </div>
         <div className="hidden sm:mt-10 sm:flex lg:mt-0 lg:grow lg:basis-0 lg:justify-end">
-          <Button href="https://dotnetconfth2024.eventbrite.com/?ref=site" target="_blank" rel="noreferrer">Get your tickets</Button>
+          <Button>Tickets - Coming Soon</Button>
         </div>
       </Container>
     </header>

src/components/Button.jsx

@@ -6,39 +6,58 @@ import backgroundImage from '@/images/background.jpg'
 
 export function Hero() {
   return (
-    <div className="relative pt-10 pb-20 sm:py-24">
-      <div className="absolute inset-x-0 -top-48 -bottom-14 overflow-hidden bg-indigo-50">
-        <Image
-          className="absolute top-0 left-0 translate-y-[-10%] translate-x-[-55%] -scale-x-100 sm:left-1/2 sm:translate-y-[-6%] sm:translate-x-[-98%] lg:translate-x-[-106%] xl:translate-x-[-122%]"
-          src={backgroundImage}
-          alt=""
-          width={918}
-          height={1495}
-          priority
-          unoptimized
-        />
-        <div className="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-white" />
-        <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-white" />
+    <div className="relative pt-24 pb-32 sm:pt-32 sm:pb-40 lg:pt-40 lg:pb-48 bg-gradient-to-b from-gray-900 via-dotnet-purple-dark to-gray-900 overflow-hidden min-h-[90vh] flex items-center">
+      <div className="absolute inset-0 overflow-hidden">
+        {/* Animated gradient ellipse overlays for depth */}
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-dotnet-purple opacity-25 rounded-full blur-3xl animate-pulse-slow" />
+        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-dotnet-blue opacity-25 rounded-full blur-3xl animate-pulse-slow" style={{ animationDelay: '1s' }} />
+        <div className="absolute top-1/2 left-1/2 w-[600px] h-[600px] -translate-x-1/2 -translate-y-1/2 bg-purple-600 opacity-15 rounded-full blur-3xl animate-pulse-slow" style={{ animationDelay: '2s' }} />
+        {/* Smooth transition from header with taller gradient */}
+        <div className="absolute inset-x-0 top-0 h-64 bg-gradient-to-b from-gray-900 via-gray-900/70 via-gray-900/40 to-transparent" />
+        <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-gray-900/95" />
+        {/* Submarine decoration with improved visibility */}
+        <div className="absolute right-0 top-[55%] -translate-y-1/2 w-1/2 max-w-2xl hidden lg:block opacity-75 animate-float">
+          <Image
+            src="/assets/dark-submarine.png"
+            alt=""
+            width={800}
+            height={400}
+            unoptimized
+            className="w-full h-auto"
+          />
+        </div>
       </div>
-      <Container className="relative">
+      <Container className="relative w-full">
         <div className="mx-auto max-w-2xl lg:max-w-4xl lg:px-12">
-          <h1 className="font-display text-5xl font-bold tracking-tighter text-blue-600 sm:text-7xl">
-            <span className="sr-only">.NET Conf 2024 - Thailand</span>.NET Conf 2024 Thailand
+          <h1 className="font-display text-5xl font-bold tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-purple-300 to-blue-400 sm:text-7xl">
+            <span className="sr-only">.NET Conf 2025 - Thailand</span>.NET Conf 2025 Thailand
           </h1>
-          <div className="mt-6 space-y-6 font-display text-2xl tracking-tight text-blue-900">
-            <p>
-            .NET Conf Thailand is our local <a className='text-blue-600' target='_blank' href='https://www.dotnetconf.net/' rel="noreferrer">.NET Conf</a> event, an event where we will be showcasing many of the advancements and capabilities of .NET. including some of the cool technologies that were recently announced by Microsoft. 
-            These technologies (but not limited to) include Web, Mobile Desktop, .NET Core, EF Core, C#, IoT, AI, ML, and Mobile.
+          <div className="mt-8 space-y-6 font-display">
+            <p className="text-2xl sm:text-3xl font-semibold text-white leading-relaxed">
+              Join Thailand's premier <a className='text-white hover:text-blue-200 transition-colors underline decoration-blue-200/60 hover:decoration-blue-200 font-bold' target='_blank' href='https://www.dotnetconf.net/' rel="noreferrer">.NET</a> community event
+            </p>
+            <p className="text-lg sm:text-xl text-gray-200 leading-relaxed max-w-3xl">
+              Discover the latest in .NET 10, explore cutting-edge technologies from Microsoft, and connect with fellow developers. From AI and cloud to mobile and IoT—experience it all in one day.
             </p>
           </div>
-          <Button href="https://dotnetconfth2024.eventbrite.com/?ref=site" className="mt-10 w-full sm:hidden">
-            Get your tickets
-          </Button>
+          <div className="mt-12 flex flex-col sm:flex-row gap-4 items-start">
+            <Button className="group relative overflow-hidden">
+              <span className="relative z-10">Tickets - Coming Soon</span>
+              <div className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+            </Button>
+          </div>
+          {/* Scroll down indicator */}
+          <div className="absolute bottom-8 left-1/2 -translate-x-1/2 hidden lg:flex flex-col items-center gap-2">
+            <span className="text-sm text-gray-400 font-mono">Scroll to explore</span>
+            <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+            </svg>
+          </div>
           {/* <dl className="mt-10 grid grid-cols-2 gap-y-6 gap-x-10 sm:mt-16 sm:gap-y-10 sm:gap-x-16 sm:text-center lg:auto-cols-auto lg:grid-flow-col lg:grid-cols-none lg:justify-start lg:text-left">
             {[
               ['Speakers', '11'],
               ['People Attending', '150+'],
-              ['Date', '25/11/2024 10:30 AM'],
+              ['Date', '29/11/2025 10:30 AM'],
               ['Venue', 'SCBX NEXT TECH'],
               ['Location', 'Siam Paragon - Bangkok'],
             ].map(([name, value]) => (

src/components/Footer.jsx

@@ -1,25 +1,36 @@
 import Link from "next/link";
+import Image from "next/image";
 
 export function Logo(props) {
   return (
-    // <svg aria-hidden="true" viewBox="0 0 183 48" {...props}>
-    //   <path
-    //     fill="#3B82F6"
-    //     fillRule="evenodd"
-    //     d="M1.172 21.172a4 4 0 000 5.656l20 20a4 4 0 105.656-5.656l-20-20a4 4 0 00-5.656 0z"
-    //     clipRule="evenodd"
-    //   />
-    //   <path
-    //     fill="#93C5FD"
-    //     fillRule="evenodd"
-    //     d="M26.828 6.828a4 4 0 10-5.656-5.656l-19 19A3.987 3.987 0 015 19a3.98 3.98 0 012.827 1.172L10.657 23 26.828 6.828z"
-    //     clipRule="evenodd"
-    //   />
-    //   <path
-    //     fill="#0F172A"
-    //     d="M52 32V15.2h5.736c1.968 0 3.584.352 4.848 1.056 1.28.688 2.224 1.664 2.832 2.928.624 1.248.936 2.72.936 4.416 0 1.696-.312 3.176-.936 4.44-.608 1.248-1.552 2.224-2.832 2.928-1.264.688-2.88 1.032-4.848 1.032H52zm3.072-2.64h2.52c1.408 0 2.52-.224 3.336-.672a3.958 3.958 0 001.752-1.968c.352-.864.528-1.904.528-3.12 0-1.2-.176-2.232-.528-3.096a3.944 3.944 0 00-1.752-1.992c-.816-.464-1.928-.696-3.336-.696h-2.52V29.36zm18.263 2.928c-1.2 0-2.264-.256-3.192-.768a5.559 5.559 0 01-2.184-2.16c-.529-.928-.793-2-.793-3.216 0-1.232.257-2.328.769-3.288a5.687 5.687 0 012.16-2.232c.927-.544 2.016-.816 3.264-.816 1.168 0 2.2.256 3.096.768a5.407 5.407 0 012.088 2.112c.511.88.767 1.864.767 2.952 0 .176-.008.36-.023.552 0 .192-.009.392-.025.6h-9.047c.063.928.383 1.656.96 2.184.591.528 1.303.792 2.136.792.623 0 1.143-.136 1.56-.408.431-.288.752-.656.96-1.104h3.12a5.68 5.68 0 01-1.128 2.064 5.423 5.423 0 01-1.92 1.44c-.753.352-1.609.528-2.569.528zm.024-9.984a3.23 3.23 0 00-1.992.648c-.577.416-.945 1.056-1.105 1.92h5.928c-.047-.784-.335-1.408-.864-1.872-.527-.464-1.183-.696-1.967-.696zm12.927 9.984c-1.216 0-2.288-.264-3.216-.792a5.851 5.851 0 01-2.208-2.208c-.528-.944-.792-2.024-.792-3.24 0-1.216.264-2.296.792-3.24A5.851 5.851 0 0183.07 20.6c.928-.528 2-.792 3.216-.792 1.52 0 2.8.4 3.84 1.2 1.04.784 1.704 1.872 1.992 3.264h-3.24a2.299 2.299 0 00-.96-1.344c-.464-.336-1.016-.504-1.656-.504-.848 0-1.568.32-2.16.96-.592.64-.888 1.528-.888 2.664 0 1.136.296 2.024.888 2.664.592.64 1.312.96 2.16.96.64 0 1.192-.16 1.656-.48.48-.32.8-.776.96-1.368h3.24c-.288 1.344-.952 2.424-1.992 3.24-1.04.816-2.32 1.224-3.84 1.224zm12.903 0c-1.2 0-2.264-.256-3.192-.768a5.559 5.559 0 01-2.184-2.16c-.528-.928-.792-2-.792-3.216 0-1.232.256-2.328.768-3.288a5.687 5.687 0 012.16-2.232c.928-.544 2.016-.816 3.264-.816 1.168 0 2.2.256 3.096.768a5.407 5.407 0 012.088 2.112c.512.88.768 1.864.768 2.952 0 .176-.008.36-.024.552 0 .192-.008.392-.024.6h-9.048c.064.928.384 1.656.96 2.184.592.528 1.304.792 2.136.792.624 0 1.144-.136 1.56-.408.432-.288.752-.656.96-1.104h3.12a5.68 5.68 0 01-1.128 2.064 5.423 5.423 0 01-1.92 1.44c-.752.352-1.608.528-2.568.528zm.024-9.984a3.23 3.23 0 00-1.992.648c-.576.416-.944 1.056-1.104 1.92h5.928c-.048-.784-.336-1.408-.864-1.872-.528-.464-1.184-.696-1.968-.696zm7.096 14.976V20.096h2.736l.336 1.704c.384-.528.888-.992 1.512-1.392.64-.4 1.464-.6 2.472-.6 1.12 0 2.12.272 3 .816a5.846 5.846 0 012.088 2.232c.512.944.768 2.016.768 3.216 0 1.2-.256 2.272-.768 3.216a5.894 5.894 0 01-2.088 2.208c-.88.528-1.88.792-3 .792-.896 0-1.68-.168-2.352-.504a4.24 4.24 0 01-1.632-1.416v6.912h-3.072zm6.408-7.68c.976 0 1.784-.328 2.424-.984.64-.656.96-1.504.96-2.544s-.32-1.896-.96-2.568c-.64-.672-1.448-1.008-2.424-1.008-.992 0-1.808.336-2.448 1.008-.624.656-.936 1.504-.936 2.544s.312 1.896.936 2.568c.64.656 1.456.984 2.448.984zM125.36 32c-1.248 0-2.248-.304-3-.912-.752-.608-1.128-1.688-1.128-3.24v-5.184h-2.04v-2.568h2.04l.36-3.192h2.712v3.192h3.216v2.568h-3.216v5.208c0 .576.12.976.36 1.2.256.208.688.312 1.296.312h1.488V32h-2.088zm5.014-13.752c-.56 0-1.024-.168-1.392-.504-.352-.336-.528-.76-.528-1.272s.176-.928.528-1.248c.368-.336.832-.504 1.392-.504.56 0 1.016.168 1.368.504.368.32.552.736.552 1.248s-.184.936-.552 1.272c-.352.336-.808.504-1.368.504zM128.838 32V20.096h3.072V32h-3.072zm12.518.288c-1.696 0-3.152-.36-4.368-1.08a7.383 7.383 0 01-2.808-3.048c-.656-1.312-.984-2.824-.984-4.536 0-1.712.328-3.224.984-4.536.656-1.312 1.592-2.336 2.808-3.072 1.216-.736 2.672-1.104 4.368-1.104 2.016 0 3.664.504 4.944 1.512 1.296.992 2.104 2.392 2.424 4.2h-3.384c-.208-.912-.656-1.624-1.344-2.136-.672-.528-1.568-.792-2.688-.792-1.552 0-2.768.528-3.648 1.584-.88 1.056-1.32 2.504-1.32 4.344 0 1.84.44 3.288 1.32 4.344.88 1.04 2.096 1.56 3.648 1.56 1.12 0 2.016-.24 2.688-.72.688-.496 1.136-1.176 1.344-2.04h3.384c-.32 1.728-1.128 3.08-2.424 4.056-1.28.976-2.928 1.464-4.944 1.464zm14.287 0c-1.152 0-2.192-.264-3.12-.792a5.957 5.957 0 01-2.184-2.184c-.528-.944-.792-2.032-.792-3.264 0-1.232.272-2.312.816-3.24a5.905 5.905 0 012.184-2.208c.928-.528 1.968-.792 3.12-.792 1.136 0 2.16.264 3.072.792a5.68 5.68 0 012.184 2.208c.544.928.816 2.008.816 3.24 0 1.232-.272 2.32-.816 3.264a5.727 5.727 0 01-2.184 2.184c-.928.528-1.96.792-3.096.792zm0-2.664c.8 0 1.496-.296 2.088-.888.592-.608.888-1.504.888-2.688 0-1.184-.296-2.072-.888-2.664-.592-.608-1.28-.912-2.064-.912-.816 0-1.52.304-2.112.912-.576.592-.864 1.48-.864 2.664 0 1.184.288 2.08.864 2.688.592.592 1.288.888 2.088.888zM163.046 32V20.096h2.712l.24 2.016a4.21 4.21 0 011.584-1.68c.704-.416 1.528-.624 2.472-.624 1.472 0 2.616.464 3.432 1.392.816.928 1.224 2.288 1.224 4.08V32h-3.072v-6.432c0-1.024-.208-1.808-.624-2.352-.416-.544-1.064-.816-1.944-.816-.864 0-1.576.304-2.136.912-.544.608-.816 1.456-.816 2.544V32h-3.072zm13.714 0v-9.336h-1.632v-2.568h1.632v-1.392c0-1.44.36-2.464 1.08-3.072.736-.608 1.728-.912 2.976-.912h1.32v2.616h-.84c-.528 0-.904.104-1.128.312-.224.208-.336.56-.336 1.056v1.392h2.568v2.568h-2.568V32h-3.072z"
-    //   />
-    // </svg>
-    <Link className="text-2xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-blue-400 to-blue-600" href="/">.NET Conf 2024 - Thailand</Link>
+    <Link href="/" className="flex items-center gap-3">
+      <div className="relative w-14 h-14 flex-shrink-0">
+        <Image
+          src="/logo/bot.png"
+          alt=".NET Thailand Bot"
+          width={56}
+          height={56}
+          unoptimized
+        />
+        {/* Small .NET badge positioned at bottom right of bot */}
+        <div className="absolute -bottom-1 -right-1 w-6 h-6 rounded border-2 border-white shadow-sm overflow-hidden">
+          <Image
+            src="/logo.png"
+            alt=".NET"
+            width={24}
+            height={24}
+            unoptimized
+          />
+        </div>
+      </div>
+      <div className="flex flex-col gap-1">
+        <span className="text-xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 leading-none whitespace-nowrap">
+          .NET Conf Thailand
+        </span>
+        <span className="text-sm font-semibold text-white leading-none">
+          2025
+        </span>
+      </div>
+    </Link>
   )
 }