---

import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";

const sloganList = ['We Hate Etsy Too.','at least were not shopify','Art for humans, by humans','boop! get booped by Cat',
    'The world is your oyster, not an AI\'s']
const randomIndex = Math.floor(Math.random() * sloganList.length);
const resultingSlogan = sloganList[randomIndex];

---
<BaseLayout pageTitle={pageTitle}>
  <style>
    h1 {
      font-family: var(--winter-selfie);
      -webkit-text-stroke-width: 3px;
      -webkit-text-stroke-color: white;
    }
  </style>
  <div class="flx(wrap) middle space-evenly halftone">
    <div class="flx(wrap) space-evenly is-full">
      <div class="flx(column) middle center is-4">
        <h1 style="margin: 0;">VFP</h1>
        <h1 style="margin: 0;">Media</h1>
        <div style="background-color:white;">
        <h2 style="font-size: 1.5rem;"><i class="slogan">{resultingSlogan}</i></h2>
        </div>
      </div>
      <figure class="orbit-figure is-5 flx center middle" style="margin:1rem 0;">
        <img class="orbit-img" src="/vfpcattailfolded.png" alt='hero logo here'>
      </figure>
    </div>
  </div>




  <div class="flx(column) middle space-evenly is-full">
    <h2>What is VFP Media?</h2>
    <div class="flx(wrap) is-full space-around middle">
      
      <div class='flx middle center is-5' style="width: 400px;" >
        <p style="text-align: justify; line-height: 1.5rem;">VFP media is a hosting service built for artists and makers by artists and makers. Our goal is to support artists in their mission to make their
artistic endeavors viable and profitable. We support artists and makers by providing ecommerce, and portfolio websites for 10 dollars + per month. At VFP media, we believe art is for humans and should be made by humans. We are strongly against the use of AI in digital art, writing, and 3d art as well.
</p>

      </div>
      <figure class="flx middle center" style="margin:0;">
      <img src="https://cataas.com/cat" width="300px">
      </figure>
    </div>
    
    
  </div>
  <!--why make this???-->
   <div class="flx(column) middle space-evenly is-full">
    <h2>Why make this?</h2>
    <div class="flx(wrap) is-full space-around middle">
      <figure class="flx middle center" style="margin:0;">
      <img src="/pickleCat.webp" width="200px">
      <img src="/scaredCat.webp" width="300px">
      </figure>
      <div class='flx(column) middle center is-5' style="width: 400px;" >
        <h3>AI Harms Artists and Consumers</h3>
        <p style="text-align: justify; line-height: 1.5rem;">
          There are countless stories of people on the internet thinking they are buying art from an Artist only to find out that the product they have purchased
          was in fact made by an AI. These are people who would have given money to an artist selling a print or 3d printed design, only to be drowned out by the AI slop machine.
           The more real artists we have the better we can seperate the legitamite artists from the prompters using every
piece of data possible to weaponize it against AI. We can poison training data using nightshade on images, and look for suspicious traffic on websites we control
        </p>

      </div>
      
    </div>
    <div class="for-indies flx(wrap) is-full space-around middle">
      <div class="flx(column) middle center" style="width:400px;">
        <h3>For artist independence</h3>
        <p>
          We want artists independant of third party platforms. In the age of AI creating a website
is now easier than ever, however not everyone has the time or wants to learn. Artists are then
forced to outsource it to other companies who provide all in one solutions and make it easy and attractive such that they can take everything away, 
etsy will nickel and dime you for just hosting products on your website. at vfpmedia, we only ask that you use modern compression using webp and webm,
 and make sure your work is your own.
        </p>
        <p>Etsy, Square and Shopify will also charge 20+ dollars for something that a simple payment processing api can be down in a few hours by someone whos done this 
several times before. word press is a complicated solution and can possibly work as a free option using woo commerce,
however vfpmedia has technology already in use that can be retrofitted and redesigned 
to fit most ecommerce, portfolio, and blogging situations, that are much faster and uses more modern technology than wordpress.
as someone who has breifly worked in wordpress there is no shortage of jobs asking for page speed requirements. our solution is lightweight, clean and responsive.</p>
      </div>
      <figure>
        <img src="/independentCat.webp" width="300px">
      </figure>
    </div>
    
  </div>

  <div class="flx(column) middle space-evenly is-full">
    <h2>How does it work?</h2>
    <div class="flx(wrap) is-full space-around middle">
      
      <div class='flx middle center is-5' style="max-width: 400px; padding: .5rem;" >
        <p style="text-align: justify; line-height: 1.5rem;">

First, if you have a website, you provide us with your website and domain name, and we will work with you to migrate it to our personal web servers. You only need to help us pay server rent and keep our lights on to run the business. Our goal is to use the profits to reinvest in advertising and reinvest into advertising and foster a community of real artists to be enjoyed by real people. We will most likely convert your website to run on node.js, but if you prefer to keep the original website technology and  use our service solely as managed hosting, we may need to give you special provisions, which would increase the cost, or potentially give you a private server, also increasing your costs. the costs would be negated if you used node.js, and used the xxx.vfpmedia.com subdomain, as this reduces the  complexity we need to manage.
        </p>
      </div>
      <div class="flx center middle is-6">
        <pre class="mermaid"  style="flex-grow: 1;">

          flowchart TD
            
                A[Give us your website, or Website Design in PSD or other common picture format] 
                A ==> B[Migrate domain name to our servers] & C[Get a free subdomain]
                B ==> D & F 
                
                C ==> D[Convert website to node.js] & F
                
                
                F[Leave website as is] ==> G[$Profit];
                D ==> G
                classDef default fill:#222,stroke:#111,stroke-width:4px, color:white, font-weight:bold, font-size:1.5rem,text-shadow: 2px 2px 5px #111; 
        </pre>
      </div>
    </div>
    
    <div  style=" padding: .5rem;">
      <p>Once your site is migrated, we simply make sure it stays running for as long as you keep paying for it. We will have a ticket system to which you can email to 
vfpmedia@airmail.cc if you have any issues or need help. Expect a timely response within 24 hours and in the case of wanting us to build new features for your 
store or leave issues related to the node.js store vfpmedia@airmail.cc is a valid place as well.

if you don't have a website, a basic blog, portfolio, ecommerce,website will be provided for you at no cost, we'll work with you if you have a design in mind, and implement it and a free subdomain of your choosing.
(i.e. artistnamehere.vfpmedia.com) </p>
<figure class="flx(wrap) center middle">
  <img src="https://cataas.com/cat" width="300px">
</figure>
<p>at this time we are only working with artists we know in meat space in Kansas. we will set you up with stripe, and you will then
be able to take payments online with your store, as long as you update inventory. (website dashboard and hosting dashboard in the works..)
so long as you pay use 10 dollars per month your web presence and store will be there. much like shopify or any other hosting service. website customization will be 
you. we recommend using qwen or gemma AI to help you design elements if possible. should you need our help with design, I can help at 25/hr though since I am one person
i would easily be booked and would probably hire it out to a fiverr person or you could as well.
in the future we may create a website builder if theres enough interest, but mainly we want you to share hosting with us much like we would share rent together. </p>
    </div>

  </div>


<div class="flx(wrap) center middle">
  <h2>Status: <span style="color: #8bc926;">Alpha</span></h2>
</div>

<div class="flx(column,wrap) center middle">
  <h2>Roadmap:</h2>
  <pre class="mermaid"  style="flex-grow: 1;">
    flowchart TD
      id["Create proof of concept node.js store"] == "`**-we are here-**`"
      ==o b([run in production]) 
      ==> c([create systematic process to sign up new users using podman])
      ==> d([create login and inventory management for node.js ecommerce users])
      ==> f([secure all uploads for node.js eccomerce store and blog users with nightshade])
      ==> g([create a catalog of artist sites managed by vfpmedia])
      ==> h([create our own internal CPanel for managing node.js websites])
      ==> i([Create multi website tracking anaylsis for tracking AI bots and potential Ai Artists])
      ==> j([Create website builder for node.js store based on CSS flexbox and grid])

      classDef default fill:#222,stroke:#111,stroke-width:4px, color:white, font-weight:bold, font-size:1.25rem,text-shadow: 2px 2px 5px #111;
  </pre>
</div>

<div class="conclusion flx(wrap) center middle">
  <h2>We hope you'll join Us</h2>
  <p>Are you tired of Etsy fees and costly store fees and paying almost 100 dollars per month just to keep your business alive on the internet? Work with us, and we'll let
you do what you do best. creating content that enriches the lives of others while not being bled out like pig for your money. all you have to do is send us an email 
and we'll send you updates about VFP media. </p>
  <a href="mailto:vfpmedia@airmail.cc" class="btn(large) is-round is-success">Send Email</a>
</div>
  <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true, securityLevel:'strict', look:'handDrawn', nodePlacementStrategy: 'LINEAR_SEGMENTS' });
  </script>
  <script>
    const figure = document.querySelector('.orbit-figure');
    const img = document.querySelector('.orbit-img');

    figure.addEventListener('mousemove', (e) => {
      // 1. Get the dimensions and center of the figure container
      const rect = figure.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;

      // 2. Calculate how far the mouse is from the center
      const mouseX = e.clientX - centerX;
      const mouseY = e.clientY - centerY;

      // 3. THE MAGIC: The "Damping Factor"
      // Lower number = stays closer to center. Higher = follows mouse more.
      const intensity = 0.2; 
      const moveX = mouseX * intensity;
      const moveY = mouseY * intensity;

      // 4. Calculate a slight rotation based on mouse position
      // This creates the "orbit/tilt" feeling
      const rotateX = mouseY * 0.05; // Tilt up/down
      const rotateY = -mouseX * 0.05; // Tilt left/right

      // 5. Apply the transformation
      img.style.transform = `translate(${moveX}px, ${moveY}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    });

    // Reset position when mouse leaves the area
    figure.addEventListener('mouseleave', () => {
      img.style.transform = `translate(0px, 0px) rotateX(0deg) rotateY(0deg)`;
    });

  
  </script>
</BaseLayout>
